/* FOUNDERS — 3 cards, warm + human */

const FOUNDERS = [
{
  name: "Prasiddhi Jain",
  role: "Co-founder · Brand, Growth & Ops",
  bio: "Leads brand, growth, and operations. Former strategy and technology consultant with deep experience in go-to-market, consumer marketing, and content strategy across early-stage and enterprise contexts.",
  linkedin: "https://www.linkedin.com/in/prasiddhijain/",
  tint: "bg-blue",
  hs: "hs-green",
  rot: "-1deg",
  photo: window.__resources.prasiddhi
},
{
  name: "Chris Ackerman",
  role: "Co-founder · Product",
  bio: "Leads product design and development. Former technology innovation consultant with deep experience in emerging tech, GenAI, and customer-driven product definition supported by research.",
  linkedin: "https://www.linkedin.com/in/christopher-ackerman/",
  tint: "bg-blue",
  hs: "hs-orange",
  rot: "1.5deg",
  photo: window.__resources.chris
},
{
  name: "Hamza Malik",
  role: "Founding team · Engineering",
  bio: "Leads product development and technical execution. Background in product management and engineering, with a focus on task design, scoring systems, and the user experience across every job simulation task.",
  linkedin: "https://www.linkedin.com/in/hamzaymalik/",
  tint: "bg-blue",
  hs: "hs-green",
  rot: "-1.5deg",
  photo: window.__resources.hamza
}];


function Portrait({ tint, initials, rot, photo, name }) {
  return (
    <div className="relative w-full aspect-[4/5] border-2 border-ink overflow-hidden hov-rot" style={{ transform: `rotate(${rot})` }}>
      {/* solid color field behind */}
      <div className={`absolute inset-0 ${tint}`} />
      {/* the human — sits cleanly in front, B&W on white */}
      <img
        src={photo}
        alt={name}
        className="absolute inset-0 w-full h-full object-cover object-top"
        style={{ filter: "grayscale(1) contrast(1.05)" }} />
      {/* scan stripes ride above the photo for the retro feel */}
      <div className="absolute inset-0 opacity-15 pointer-events-none mix-blend-multiply" style={{
        backgroundImage: "repeating-linear-gradient(to bottom, #141414 0 1px, transparent 1px 5px)"
      }} />
      <div className="absolute top-2 left-2 font-mono text-[10px] bg-ink text-cream px-1.5 py-0.5 z-10">ID_{initials}</div>
    </div>);

}

function Founders() {
  return (
    <section id="founders" data-snap className="relative bg-cream border-b-2 border-ink">
      <div className="max-w-[1400px] mx-auto px-5 md:px-8 py-20 md:py-28">
        <div className="flex items-center justify-between font-mono text-sm md:text-base mb-10" aria-hidden="true">
          <span>05 / FOUNDERS</span>
          <span>3 PEOPLE · 1 IDEA</span>
        </div>

        <div className="grid lg:grid-cols-12 gap-8 items-end mb-12">
          <h2 className="lg:col-span-8 font-display font-bold tracking-tight leading-[0.95] text-[44px] md:text-[72px] lg:text-[88px]">
            Built by people who <br />
            <span className="text-orange">sat through the interviews.</span>
          </h2>
          <p className="lg:col-span-4 text-base md:text-lg text-ink-2 max-w-md">Three co-founders from MIT, one shared passion to change the future of jobs.

          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-8 md:gap-10">
          {FOUNDERS.map((f, i) =>
          <article key={f.name} className={`group border-2 border-ink bg-cream p-5 ${f.hs}`}>
              <Portrait tint={f.tint} initials={f.name.split(" ").map((p) => p[0]).join("")} rot={f.rot} photo={f.photo} name={f.name} />
              <div className="mt-5">
                <div className="font-mono text-[11px] text-ink-2">{f.role}</div>
                <h3 className="font-display font-bold text-3xl mt-1">{f.name}</h3>
                <p className="mt-3 text-sm md:text-base text-ink-2 leading-relaxed">{f.bio}</p>
                <a href={f.linkedin} target="_blank" rel="noopener noreferrer"
                  className="mt-4 inline-flex items-center gap-2 font-mono text-[11px] uppercase tracking-wider bg-cream text-ink border-2 border-ink px-3 py-2 hs-sm btn-chunky">
                  <span className="w-4 h-4 bg-blue text-cream border border-ink flex items-center justify-center font-display font-bold text-[10px] leading-none">in</span>
                  LinkedIn <span className="arr">→</span>
                </a>
              </div>
            </article>
          )}
        </div>

        {/* signed */}
        <div className="mt-16 flex flex-wrap items-center justify-between gap-4 font-mono text-xs border-t-2 border-ink pt-6">
          <span>FOUNDED 2026 · CAMBRIDGE, MA</span>
        </div>
      </div>
    </section>);

}

window.Founders = Founders;