function Founders({ sansFont, cursiveFont }) {
  return (
    <section id="founders-corner" className="relative bg-black text-white py-24 md:py-36 grain" style={{ "--grain-opacity": 0.09 }}>
      <div className="px-5 md:px-10">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-10 md:gap-16 items-start">
          {/* Left: big type */}
          <div className="md:col-span-7">
            <div className="flex items-center gap-3 mb-5">
              <span className="w-10 h-px bg-white/40" />
              <span className="uppercase tracking-[0.35em] text-[11px] text-white/50">
                03 — Founders corner
              </span>
            </div>
            <h2
              className="hero-title"
              style={{ fontFamily: sansFont, fontSize: "clamp(44px, 7vw, 120px)" }}>
              
              Two hands,{" "}
              <span
                className="inline-block italic"
                style={{
                  fontFamily: cursiveFont,
                  fontStyle: "normal",
                  fontSize: "1.25em",
                  transform: "rotate(-3deg)"
                }}>
                
                one
              </span>{" "}
              workshop.
            </h2>

            <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 gap-8 max-w-2xl text-[14px] leading-relaxed text-white/70">
              <p>Qurcee designs and manufactures contemporary office furniture that blends comfort, craftsmanship, and functionality. Every piece is manufactured in India. From ergonomic seating to collaborative spaces, we create thoughtfully engineered solutions that inspire productivity and elevate modern workspaces through quality, customization, and timeless design.



              </p>
              <p>
                Every object leaves our studio under a single rule — it must earn
                its place in a room quietly. No loud shapes, no season, no
                shortcuts.
              </p>
            </div>

            <div className="mt-12 flex items-center gap-8">
              <a
                href="#"
                className="group inline-flex items-center gap-3 text-[12px] uppercase tracking-[0.28em] text-white hover:text-white/90">
                
                <span className="relative">
                  Read the long letter
                  <span className="absolute left-0 right-0 -bottom-1 h-px bg-white/40 group-hover:bg-white transition-colors" />
                </span>
                <span className="inline-flex items-center justify-center w-10 h-10 rounded-full ring-1 ring-white/30 group-hover:ring-white/70 transition">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
                    <path d="M5 12h14M13 6l6 6-6 6" />
                  </svg>
                </span>
              </a>
            </div>
          </div>

          {/* Right: portraits */}
          <div className="md:col-span-5">
            <div className="grid grid-cols-2 gap-4">
              {[
              { name: "Lina Oliveira", role: "Design", tone: "ph-warm", initials: "LO" },
              { name: "Tiago Alves", role: "Timber", tone: "ph-sand", initials: "TA" }].
              map((p) =>
              <div key={p.name}>
                  <div className={`relative aspect-[3/4] ${p.tone} overflow-hidden`}>
                    {/* Face placeholder */}
                    <svg viewBox="0 0 120 160" className="absolute inset-0 w-full h-full text-white/25" aria-hidden="true">
                      <g fill="none" stroke="currentColor" strokeWidth="1">
                        <circle cx="60" cy="60" r="24" />
                        <path d="M20 160 C 25 110, 95 110, 100 160" />
                      </g>
                    </svg>
                    <div className="absolute top-3 left-3 text-[10px] tracking-[0.35em] uppercase text-white/50">
                      {p.initials}
                    </div>
                  </div>
                  <div className="mt-3 text-[14px]" style={{ letterSpacing: "-0.01em" }}>
                    {p.name}
                  </div>
                  <div className="text-[11px] uppercase tracking-[0.28em] text-white/50 mt-1">
                    {p.role}
                  </div>
                </div>
              )}
            </div>

            {/* Numbers */}
            <div className="mt-10 grid grid-cols-3 gap-4 text-center">
              {[
              { n: "07", l: "Years" },
              { n: "15", l: "Objects" },
              { n: "38", l: "Projects" }].
              map((x) =>
              <div key={x.l} className="border-t border-white/10 pt-4">
                  <div className="text-[28px] md:text-[34px] tabular-nums" style={{ letterSpacing: "-0.02em" }}>
                    {x.n}
                  </div>
                  <div className="text-[10px] uppercase tracking-[0.35em] text-white/50 mt-2">
                    {x.l}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Founders });