// ABOUT
const { useState, useEffect, useRef } = React;
const { Link, Btn, MediaPh, useReveal, TEAM } = window;

function About() {
  return (
    <main className="page-enter">
      <AboutHero />
      <AboutOrigin />
      <AboutValues />
      <AboutTeam />
      <AboutStudio />
      <AboutCTA />
    </main>
  );
}

function AboutHero() {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ paddingTop: 180, paddingBottom: 60 }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end" }}>
        <div>
          <div className="eyebrow">↳ À propos du studio</div>
          <h1 className="serif" style={{ fontSize: "clamp(64px, 9vw, 184px)", lineHeight: 0.9, letterSpacing: "-0.025em", marginTop: 28 }}>
            27 personnes,<br/>
            une équipe <em style={{ color: "var(--acid-deep)" }}>distribuée</em>,<br/>
            un seul produit<br/>
            précis.
          </h1>
        </div>
        <div>
          <p className="body-lg" style={{ maxWidth: 520, marginBottom: 36 }}>
            Nous sommes un studio marketing qui fonctionne comme une entreprise de logiciels, et une entreprise de logiciels qui pense comme un atelier créatif. Clyvonna a été fondée en 2019 lorsque deux associés ont quitté une grande agence le même vendredi et investi 40 000 $ de leurs économies dans un bail et une imprimante.
          </p>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
            {[
              ["Création", "2019, Cedar Rapids"],
              ["Effectif", "27 personnes, croissance lente"],
              ["Indépendance", "100 %, sans private equity, sans holding"],
              ["Ancienneté moyenne", "4,1 ans"],
            ].map(([k, v]) => (
              <div key={k}>
                <div className="lx-label" style={{ marginBottom: 6 }}>{k}</div>
                <div className="serif" style={{ fontSize: 22 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutOrigin() {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ background: "var(--cream-2)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80 }}>
        <div>
          <div className="eyebrow-num">Origine</div>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 84px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginTop: 16 }}>
            Pourquoi ce studio<br/>existe, en trois<br/>paragraphes.
          </h2>
          <div style={{ marginTop: 40 }}>
            <MediaPh ratio="3/4" accent="ox" label="2019 · Le premier bail" tr="DOSSIER ORIGINAL">
              <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
                <span className="serif" style={{ fontSize: 96, color: "var(--cream)", fontStyle: "italic" }}>i.</span>
              </div>
            </MediaPh>
          </div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
          {[
            "En 2019, Inès Marchetti et Daiyu Okafor dirigeaient la pratique stratégie au sein d'une grande agence avec laquelle elles ne s'entendaient plus. Le travail était bon. Le système autour du travail était un désastre : présentations interminables, tarification fondée sur l'extraction horaire, et un processus créatif qui pénalisait celles et ceux qui pensaient. Elles sont parties le même vendredi — une coïncidence devenue partenariat dès le mardi suivant.",
            "Nous avons commencé avec un seul client (une marque DTC que vous connaissez peut-être aujourd'hui) et une thèse qui n'a fait que s'affiner : les meilleures équipes marketing fonctionnent comme des équipes produit. Elles livrent en cycles courts, travaillent à découvert, instrumentent ce qu'elles produisent, et refusent le faux choix entre marque et performance. La plupart des agences fonctionnent encore sur le modèle des années 1990. Pas nous.",
            "Sept ans plus tard, Clyvonna LLC compte 27 personnes en équipe distribuée, avec un siège à Cedar Rapids, dans l'Iowa. Nous avons construit une plateforme SaaS qui opère sous le capot de nos missions clients, et que nous distribuons désormais de façon indépendante. Nous avons refusé plus d'opportunités que nous n'en avons acceptées, y compris des offres flatteuses de holdings. Nous restons un studio indépendant. Nous comptons le rester.",
          ].map((p, i) => (
            <p key={i} className="body-lg" style={{ textWrap: "pretty" }}>
              <span className="mono" style={{ color: "var(--muted)", marginRight: 12 }}>{`0${i+1}`}</span>
              {p}
            </p>
          ))}
          <div style={{ marginTop: 24, padding: 32, background: "var(--cream)", border: "1px solid var(--rule)" }}>
            <div className="lx-label" style={{ marginBottom: 12 }}>Signé</div>
            <div className="serif italic" style={{ fontSize: 32, lineHeight: 1.1 }}>Inès Marchetti & Daiyu Okafor</div>
            <div className="body-sm" style={{ marginTop: 8 }}>Fondatrices. Toujours là. Toujours en train de débattre du même sujet.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutValues() {
  const ref = useReveal();
  const values = [
    { stand: "Nous vous disons ce que nous ne ferions pas.", against: "Les agences qui disent oui à tout.", body: "Nous avons refusé 11 missions au cours des 18 derniers mois. Nous refuserons la vôtre aussi si elle ne convient pas. Cela nous épargne à toutes et tous un trimestre de théâtre." },
    { stand: "Nous partageons notre P&L sur chaque forfait.", against: "Les grilles de tarifs opaques et la « charge d'équipe ».", body: "Vous voyez les heures, le mix de séniorité, notre marge, et la marge de contribution de votre côté. L'échange est honnête, ou il n'a pas lieu." },
    { stand: "Nous n'avons pas d'« offre IA ».", against: "Les pratiques qui existent parce qu'elles sonnent nouvelles.", body: "Nous utilisons les outils qui sont utiles — et nous en utilisons beaucoup — mais nous ne prétendons pas que « l'IA » soit une discipline. Stratégie, artisanat et jugement le sont." },
    { stand: "Nous embauchons des personnes qui font le travail.", against: "L'associé d'agence qui se présente au pitch et disparaît.", body: "Les personnes seniors que vous rencontrez sont celles qui gèrent votre compte. Les visages et l'exécution coïncident. Toujours." },
    { stand: "Nous mesurons avec des méthodes mixtes.", against: "L'attribution au dernier clic érigée en religion.", body: "Marketing-mix modeling, geo-lift, tests de holdout, MTA quand c'est encore utile. Des questions différentes appellent des instruments différents. Nous ne faisons pas semblant du contraire." },
    { stand: "Nous écrivons tout.", against: "Le résumé post-réunion qui n'arrive jamais.", body: "Chaque réunion a un brief et un compte rendu. Chaque décision a un responsable. Chaque projet vit dans notre plateforme. La mémoire n'est pas une stratégie." },
  ];
  return (
    <section ref={ref} className="reveal" style={{ paddingTop: 140, paddingBottom: 140 }}>
      <div className="page section-head" style={{ padding: 0 }}>
        <div>
          <div className="eyebrow-num">Positions</div>
          <h2 className="serif" style={{ fontSize: "clamp(48px, 6vw, 112px)", lineHeight: 0.94, letterSpacing: "-0.02em", marginTop: 16 }}>
            Pas des valeurs.<br/>Des positions.<em style={{ color: "var(--acid-deep)" }}>—</em>
          </h2>
        </div>
        <div style={{ alignSelf: "end" }}>
          <p className="body-lg" style={{ maxWidth: 480 }}>
            La plupart des pages « valeurs » d'agence sont des platitudes illisibles. Voici des positions, avec leur contraire. Si vous êtes en désaccord avec plusieurs d'entre elles, nous ne sommes probablement pas le bon partenaire.
          </p>
        </div>
      </div>

      <div className="page" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
        {values.map((v, i) => (
          <div key={i} style={{ borderTop: "1px solid var(--rule)", paddingTop: 32, paddingBottom: 32 }}>
            <div className="mono" style={{ color: "var(--muted)", marginBottom: 12 }}>0{i+1} · Position</div>
            <h3 className="serif" style={{ fontSize: 36, lineHeight: 1.06, letterSpacing: "-0.01em" }}>{v.stand}</h3>
            <div className="mono" style={{ color: "var(--ox)", marginTop: 18, marginBottom: 16 }}>↳ Contre · <span style={{ color: "var(--ink-2)", textTransform: "none", letterSpacing: 0, fontFamily: "var(--sans)", fontSize: 13 }}>{v.against}</span></div>
            <p className="body" style={{ maxWidth: 520 }}>{v.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function AboutTeam() {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ background: "var(--ink)", color: "var(--cream)", paddingTop: 140, paddingBottom: 140 }}>
      <div className="page section-head" style={{ padding: 0 }}>
        <div>
          <div className="eyebrow-num" style={{ color: "rgba(242,237,228,0.6)" }}>L'équipe</div>
          <h2 className="serif" style={{ fontSize: "clamp(48px, 6vw, 112px)", lineHeight: 0.94, letterSpacing: "-0.02em", marginTop: 16, color: "var(--cream)" }}>
            27 personnes<br/>précises.
          </h2>
        </div>
        <div style={{ alignSelf: "end" }}>
          <p className="body-lg" style={{ maxWidth: 480, color: "rgba(242,237,228,0.78)" }}>
            Nous recrutons lentement. Profil senior par construction — 14 d'entre nous ont plus d'une décennie d'expérience. Huit visages ci-dessous ; les autres vivent sur un mur de polaroïds près de la cuisine.
          </p>
        </div>
      </div>

      <div className="page" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
        {TEAM.map((p, i) => <TeamCard key={p.name} p={p} i={i} />)}
      </div>

      <div className="page" style={{ marginTop: 80, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end" }}>
        <p className="serif italic" style={{ fontSize: 36, lineHeight: 1.2, maxWidth: 600 }}>
          « Nous avons une règle officieuse : toute personne qui se présente comme un "thought leader" en visioconférence doit apporter des viennoiseries le vendredi. »
        </p>
        <div>
          <Btn to="/careers" variant="acid">Postes ouverts · 7</Btn>
        </div>
      </div>
    </section>
  );
}

function TeamCard({ p, i }) {
  const [hover, setHover] = useState(false);
  const accent = p.accent === "acid" ? "var(--acid)" : p.accent === "ox" ? "var(--ox)" : p.accent === "cobalt" ? "var(--cobalt)" : "var(--ink-3)";
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: "relative" }}>
      <div style={{ position: "relative", aspectRatio: "3/4", background: accent, overflow: "hidden", borderRadius: 2 }}>
        <div style={{ position: "absolute", inset: 0, backgroundImage: "repeating-linear-gradient(45deg, rgba(15,15,14,0.06) 0 1px, transparent 1px 14px)" }} />
        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <span className="serif" style={{ fontSize: 120, color: p.accent === "acid" ? "var(--ink)" : "var(--cream)", lineHeight: 1 }}>
            {p.name.split(" ").map(n => n[0]).join("")}
          </span>
        </div>
        <div style={{ position: "absolute", top: 12, left: 12, right: 12, display: "flex", justifyContent: "space-between" }}>
          <span className="mono" style={{ color: p.accent === "acid" ? "var(--ink)" : "rgba(242,237,228,0.8)", fontSize: 10 }}>#{String(i+1).padStart(2,"0")}</span>
          <span className="mono" style={{ color: p.accent === "acid" ? "var(--ink)" : "rgba(242,237,228,0.8)", fontSize: 10 }}>{p.city}</span>
        </div>
        {/* Flip overlay */}
        <div style={{
          position: "absolute", inset: 0, padding: 20,
          background: "rgba(15,15,14,0.94)", color: "var(--cream)",
          opacity: hover ? 1 : 0, transition: "opacity .3s var(--ease)",
          display: "flex", flexDirection: "column", justifyContent: "flex-end",
        }}>
          <div className="lx-label" style={{ color: "rgba(242,237,228,0.6)", marginBottom: 10 }}>Outils</div>
          <div className="body" style={{ color: "var(--cream)", marginBottom: 18 }}>{p.tool}</div>
          <div className="lx-label" style={{ color: "rgba(242,237,228,0.6)", marginBottom: 10 }}>Opinion</div>
          <div className="serif italic" style={{ fontSize: 18, lineHeight: 1.25, color: "var(--cream)" }}>« {p.opinion} »</div>
          <div className="mono" style={{ color: "var(--acid)", marginTop: 16 }}>{p.years} ans d'expérience</div>
        </div>
      </div>
      <div style={{ marginTop: 14 }}>
        <div className="serif" style={{ fontSize: 22, color: "var(--cream)" }}>{p.name}</div>
        <div className="body-sm" style={{ color: "rgba(242,237,228,0.6)" }}>{p.role}</div>
      </div>
    </div>
  );
}

function AboutStudio() {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ paddingTop: 140, paddingBottom: 140 }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24, gridAutoRows: "minmax(280px, auto)" }}>
        <div style={{ gridColumn: "span 2", gridRow: "span 2" }}>
          <MediaPh ratio="4/3" accent="acid" label="Studio · Cedar Rapids, Iowa" tr="2e ÉTAGE · 200 m²">
            <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <svg width="50%" viewBox="0 0 100 100" fill="none">
                <rect x="10" y="20" width="80" height="60" fill="none" stroke="#0F0F0E" strokeWidth="0.6" />
                <rect x="10" y="20" width="80" height="12" fill="#0F0F0E" />
                <path d="M30 32 V80 M50 32 V80 M70 32 V80" stroke="#0F0F0E" strokeWidth="0.4" />
              </svg>
            </div>
          </MediaPh>
        </div>
        <div>
          <MediaPh ratio="3/4" accent="ox" label="Bibliothèque · 412 ouvrages" />
        </div>
        <div>
          <MediaPh ratio="3/4" accent="ink" label="Atelier d'impression · 2 presses" />
        </div>

        <div style={{ gridColumn: "span 2", padding: 36, background: "var(--cream-2)", borderRadius: 4, border: "1px solid var(--rule)" }}>
          <div className="eyebrow">↳ Un aperçu du studio</div>
          <h3 className="serif" style={{ fontSize: 36, lineHeight: 1.06, letterSpacing: "-0.01em", marginTop: 12, marginBottom: 20 }}>
            Le siège de Cedar Rapids dispose d'une presse typographique en état de marche, d'une imprimante plus ancienne que la moitié de l'équipe, et d'une cuisine où l'on cuisine vraiment.
          </h3>
          <p className="body-lg" style={{ maxWidth: 600 }}>
            Nous faisons du pain le mercredi. Les déjeuners du vendredi sont une tradition que nous n'avons pas rompue depuis 2020. Le bureau est ouvert aux clients, aux bourses et au visiteur curieux occasionnel, sur rendez-vous.
          </p>
        </div>
        <div>
          <MediaPh ratio="1/1" accent="cobalt" label="La cuisine" tr="MER · JOUR DU PAIN" />
        </div>
      </div>
    </section>
  );
}

function AboutCTA() {
  return (
    <section style={{ background: "var(--cream-2)", borderTop: "1px solid var(--rule)", padding: "100px 0" }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 60, alignItems: "end" }}>
        <h2 className="serif" style={{ fontSize: "clamp(48px, 6vw, 112px)", lineHeight: 0.95, letterSpacing: "-0.02em" }}>
          Passez nous voir un mercredi.<br/>
          Nous aurons du pain.<em style={{ color: "var(--acid-deep)" }}>—</em>
        </h2>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <Btn to="/contact" magnetic>Visiter le studio</Btn>
          <Btn to="/careers" variant="ghost">Rejoindre l'équipe</Btn>
        </div>
      </div>
    </section>
  );
}

window.About = About;