// ─────────────────────────────────────────────────────────
//  Founder Dossier — Rohit's personal section
// ─────────────────────────────────────────────────────────

function FounderDossier() {
  return (
    <section className="section shell" data-screen-label="Founder">
      <div>
        <div className="kicker">§The founder · A short dossier</div>
        <h2 style={{
          fontFamily:'var(--serif)', fontWeight:400,
          fontSize:'clamp(40px, 5vw, 76px)', lineHeight:1.0,
          letterSpacing:'-0.02em', margin:'18px 0 0', maxWidth:'20ch',
          textWrap:'balance',
        }}>
          Not an agency.<br/>
          <span style={{fontStyle:'italic', color:'var(--accent)'}}>One operator.</span>
        </h2>
      </div>

      <div className="dossier-grid">
        <div className="dossier-portrait">
          <div className="frame">
            <div className="silhouette">
              <img src={(window.__resources && window.__resources.rsMonogram) || "assets/rs-monogram.svg"} alt="RS · Rohit Sharma"/>
            </div>
            <img
              className="founder-photo"
              src="assets/founder-portrait-2026.webp"
              alt="Rohit Sharma · Founder, WebBrandify"
              loading="eager"
              decoding="async"
            />
          </div>
          <div className="meta">
            <span>
              <span>Frame 12 · Roll 04</span>
              <span className="v">Studio · 2026</span>
            </span>
            <span>
              <span>Captured by</span>
              <span className="v">Self · iPhone</span>
            </span>
          </div>
        </div>

        <div className="dossier-content">
          <span className="kicker">Rohit Sharma · 28 · Jammu, India</span>
          <h3>
            From <em>real-estate sales floor</em> to engineering the systems that replace it.
          </h3>

          <p className="dossier-bio">
            I started in 2019 selling premium realty as a third-generation operator at JK
            Realtors. We were losing premium clients to <strong>faster-loading template
            websites</strong>. Frustrated, I taught myself React, then n8n, then how to ship
            entire systems end-to-end.
          </p>

          <p className="dossier-bio">
            Today I run <strong>WebBrandify</strong> — a one-operator studio that takes
            <em> two engagements per quarter</em>. Premium real estate, fashion, hospitality,
            and seed-to-Series-B SaaS. Same operator from intake to deployment.
            No account managers. No handoffs. Just the work.
          </p>

          <p className="dossier-bio">
            Believer in: <strong>restraint over decoration</strong>, motion that <em>serves
            meaning</em>, and the idea that the website is the product&rsquo;s first promise.
          </p>

          <div className="dossier-signature">
            <svg viewBox="0 0 220 64" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M 8 44 Q 12 28, 18 38 Q 24 50, 32 38 Q 40 26, 48 38 Q 56 50, 64 32 Q 72 18, 78 30 L 78 42 M 88 28 Q 96 26, 100 32 Q 104 40, 96 42 Q 88 44, 92 36 Q 96 28, 104 30 M 116 22 Q 124 32, 122 42 M 134 28 Q 142 28, 140 38 Q 138 46, 132 42 M 156 22 L 158 44 M 156 22 Q 164 24, 168 30 Q 172 38, 164 38 M 180 22 L 182 44 M 196 32 Q 204 28, 206 36 Q 208 44, 200 42 Q 192 40, 196 32" />
              <path d="M 8 56 L 212 56" strokeWidth="0.5" opacity="0.4"/>
            </svg>
            <div className="sig-meta">
              <strong>Rohit Sharma</strong><br/>
              Founder · Principal Architect<br/>
              WebBrandify Studio · 2026
            </div>
          </div>

          <div className="dossier-cards">
            <div className="dossier-mini">
              <div className="l">Currently reading</div>
              <div className="v">"The Cold Start Problem" — Andrew Chen</div>
            </div>
            <div className="dossier-mini">
              <div className="l">Currently building</div>
              <div className="v">Vault Capital · SaaS dashboard for VCs</div>
            </div>
            <div className="dossier-mini">
              <div className="l">Latest essay</div>
              <div className="v">"Why premium sites bleed leads in 400ms"</div>
            </div>
            <div className="dossier-mini">
              <div className="l">Studio hours</div>
              <div className="v">Mon–Fri · 09:30–18:00 IST</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.FounderDossier = FounderDossier;