// ─────────────────────────────────────────────────────────────
// Mezoo — Page Home
// Editorial hi-fi landing. Senior chrome (italic-serif emphasis,
// pill CTAs, brass accent) with Stratum tech proof injected via
// SpecCard, mono callouts, dimension lines, tabular stats.
// ─────────────────────────────────────────────────────────────

function HomePage() {
  useReveal();
  const { go } = useRouter();

  return (
    <main className="mz-page">
      {/* ── 01 · Hero ─────────────────────────────────────────── */}
      <section style={{ paddingTop: 'var(--s-8)', paddingBottom: 'var(--s-7)', position: 'relative' }}>
        <div className="mz-container-wide">
          <Reveal>
            <Eyebrow>Conviction n°01 — Trente ans, un seul standard</Eyebrow>
          </Reveal>

          <Reveal delay={80} as="h1" className="mz-display-xl"
            style={{ marginTop: 'var(--s-5)', maxWidth: '14ch' }}>
            On bâtit des outils numériques <Em>qui défendent</Em> leurs propriétaires.
          </Reveal>

          <div style={{ display: 'grid', gridTemplateColumns: '1.35fr 1fr', gap: 'var(--s-8)', marginTop: 'var(--s-7)', alignItems: 'flex-end' }}>
            <Reveal delay={160} className="mz-lead" style={{ maxWidth: '52ch' }}>
              Mezoo est un atelier numérique senior pour les PME et ETI qui considèrent
              leur site et leurs applications comme un patrimoine — pas comme une dépense.
              Conseil <Em>agnostique</Em>, ingénierie sans dette, sécurité de niveau entreprise —
              du premier audit jusqu'au support 24/7, sans intermédiaire junior.
            </Reveal>

            <Reveal delay={240} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-3)', alignItems: 'flex-start' }}>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <button onClick={() => go('contact')} className="mz-btn mz-btn-primary">
                  Prendre rendez-vous
                  <svg width="13" height="13" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M2 6h8M6 2l4 4-4 4" /></svg>
                </button>
                <button onClick={() => go('manifeste')} className="mz-btn mz-btn-ghost">Lire le manifeste</button>
              </div>
              <span className="mz-mono" style={{ color: 'var(--fg-subtle)', letterSpacing: '0.06em' }}>
                ↳ réponse sous 24h ouvrées · entretien sans engagement
              </span>
            </Reveal>
          </div>
        </div>
      </section>

      {/* ── 02 · Stats strip + Spec card ──────────────────────── */}
      <section style={{ paddingBlock: 'var(--s-6)', borderBlock: '1px solid var(--hairline-strong)' }}>
        <div className="mz-container-wide" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 'var(--s-8)', alignItems: 'center' }}>

          <Reveal style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--s-5)' }}>
            {[
              { v: 30, suffix: '', sub: 'années d\'atelier', meta: 'depuis 1996' },
              { v: 180, suffix: '+', sub: 'plateformes livrées', meta: 'tous secteurs' },
              { v: 97, suffix: '%', sub: 'clients fidélisés', meta: 'à 3 ans' },
              { v: 99.98, suffix: '%', decimals: 2, sub: 'uptime moyen', meta: '12 derniers mois' },
            ].map((s) => (
              <div key={s.sub} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <span className="mz-stat-value" style={{
                  fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 500,
                  letterSpacing: '-0.04em', lineHeight: 1, color: 'var(--fg)',
                }}>
                  <CountUp to={s.v} suffix={s.suffix} decimals={s.decimals || 0} />
                </span>
                <span style={{ fontSize: 14, color: 'var(--fg-muted)' }}>{s.sub}</span>
                <span className="mz-mono" style={{ color: 'var(--fg-subtle)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>{s.meta}</span>
              </div>
            ))}
          </Reveal>

          <Reveal delay={120}>
            <HeroLiveMock />
          </Reveal>
        </div>
      </section>

      {/* ── 03 · Trois engagements ────────────────────────────── */}
      <section style={{ paddingBlock: 'var(--s-9)' }}>
        <div className="mz-container-wide">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 'var(--s-7)', alignItems: 'flex-end', marginBottom: 'var(--s-7)' }}>
            <Reveal>
              <Eyebrow>§ 02 — Notre méthode</Eyebrow>
            </Reveal>
            <Reveal delay={80} as="h2" className="mz-display">
              Trois <Em>engagements</Em> signés à la main —<br />depuis trente ans.
            </Reveal>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--s-4)' }}>
            {[
              {
                roman: 'I.',
                t: 'Diagnostiquer',
                d: 'Audit complet de l\'existant — code, sécurité, performance, expérience. Restitution écrite, mesures objectives, recommandations chiffrées.',
                specs: [['Durée typ.', '5 jours'], ['Livrables', 'Rapport + plan 3 ans'], ['Sans engagement', 'oui']],
              },
              {
                roman: 'II.',
                t: 'Architecturer',
                d: 'Conception sur-mesure, choix techniques agnostiques (Next, Astro, Shopify, AWS — au cas par cas), ingénierie revue ligne par ligne en senior.',
                specs: [['TTM médian', '14 jours'], ['Revue', 'Senior systématique'], ['Documentation', 'À chaque commit']],
              },
              {
                roman: 'III.',
                t: 'Pérenniser',
                d: 'Infogérance, monitoring temps réel, astreinte senior 24/7. Évolutions au rythme du métier, jamais l\'inverse. Contrat sans gel.',
                specs: [['Astreinte', '< 15 min'], ['Patch sécu.', 'sous 24h'], ['Engagement', '12 mois min.']],
              },
            ].map((c, i) => (
              <Reveal key={c.roman} delay={i * 120} as="article" className="mz-card mz-card-link"
                style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-4)', minHeight: 380 }}>
                <header style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
                  <span className="mz-italic" style={{ fontSize: 44, lineHeight: 1 }}>{c.roman}</span>
                  <span className="mz-mono" style={{ color: 'var(--fg-subtle)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>Phase · 0{i + 1}</span>
                </header>
                <h3 className="mz-h3" style={{ fontSize: 26 }}>{c.t}</h3>
                <p className="mz-body" style={{ fontSize: 15 }}>{c.d}</p>
                <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 6, paddingTop: 'var(--s-3)', borderTop: '1px dashed var(--hairline)' }}>
                  {c.specs.map(([k, v]) => (
                    <div key={k} style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 11 }}>
                      <span style={{ color: 'var(--fg-subtle)', letterSpacing: '0.06em' }}>{k}</span>
                      <span style={{ color: 'var(--fg)' }}>{v}</span>
                    </div>
                  ))}
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ── 04 · Stack agnostique ─────────────────────────────── */}
      <section style={{ paddingBlock: 'var(--s-9)', background: 'var(--surface)', borderBlock: '1px solid var(--hairline)' }}>
        <div className="mz-container-wide">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 'var(--s-7)', alignItems: 'flex-end', marginBottom: 'var(--s-7)' }}>
            <Reveal>
              <Eyebrow>§ 03 — Convictions techniques</Eyebrow>
            </Reveal>
            <Reveal delay={80} as="h2" className="mz-display">
              On choisit l'outil <Em>après</Em> le diagnostic.<br />
              <span style={{ color: 'var(--fg-muted)' }}>Jamais avant.</span>
            </Reveal>
          </div>

          <Reveal className="mz-body" style={{ maxWidth: '60ch', marginBottom: 'var(--s-6)' }}>
            Aucune chapelle technologique. Aucun partenariat préférentiel qui biaiserait
            la recommandation. On évalue, on documente, on tranche — et on assume le choix
            pendant les dix ans qui suivent.
          </Reveal>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--hairline-strong)' }}>
            {[
              { c: 'Frontend', items: ['Next.js', 'Astro', 'SvelteKit', 'Remix'] },
              { c: 'CMS / E-com', items: ['WordPress', 'Shopify', 'Sanity', 'Strapi'] },
              { c: 'Backend / DB', items: ['Node', 'Go', 'PostgreSQL', 'Supabase'] },
              { c: 'Cloud / Sécu', items: ['AWS', 'OVH Sov.', 'Cloudflare', 'Stripe'] },
            ].map((col, i) => (
              <Reveal key={col.c} delay={i * 80} style={{
                padding: 'var(--s-4) var(--s-5)',
                borderRight: i < 3 ? '1px solid var(--hairline-strong)' : 'none',
                display: 'flex', flexDirection: 'column', gap: 'var(--s-3)',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: 'var(--s-3)', borderBottom: '1px solid var(--hairline)' }}>
                  <span className="mz-eyebrow">{col.c}</span>
                  <span className="mz-mono" style={{ color: 'var(--fg-subtle)' }}>0{i + 1}</span>
                </div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {col.items.map((it) => (
                    <li key={it} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 15, color: 'var(--fg)' }}>
                      <span style={{ width: 5, height: 5, background: 'var(--accent)', flexShrink: 0 }} />
                      {it}
                    </li>
                  ))}
                </ul>
              </Reveal>
            ))}
          </div>
          <Reveal delay={400} className="mz-mono" style={{ display: 'block', marginTop: 'var(--s-4)', color: 'var(--fg-subtle)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
            ↳ + tous les autres si justifiés par le diagnostic
          </Reveal>
        </div>
      </section>

      {/* ── 05 · Références ───────────────────────────────────── */}
      <section style={{ paddingBlock: 'var(--s-9)' }}>
        <div className="mz-container-wide">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 'var(--s-7)', flexWrap: 'wrap', gap: 'var(--s-4)' }}>
            <Reveal>
              <Eyebrow>§ 04 — Pièces récentes</Eyebrow>
              <h2 className="mz-display" style={{ marginTop: 'var(--s-4)' }}>
                Quatre <Em>pièces</Em> de 2025.
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <button onClick={() => go('case')} className="mz-btn mz-btn-ghost">
                Voir les 47 pièces de l'atelier
                <svg width="13" height="13" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M2 6h8M6 2l4 4-4 4" /></svg>
              </button>
            </Reveal>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'var(--s-5)' }}>
            {[
              { n: '47', sector: 'Horticulture pro.', title: 'Hortis SA', italic: 'cinq sites', rest: 'fusionnés en un outil métier.', metric: ['Lighthouse', '99 / 100 / 95'], days: '11 jours', highlight: true },
              { n: '46', sector: 'Cabinet d\'avocats', title: 'Berger & Associés', italic: 'portail client', rest: 'sécurisé bout-en-bout.', metric: ['Sécurité', 'A+ · ISO 27001'], days: '21 jours' },
              { n: '45', sector: 'DTC · cosmétiques', title: 'Clos-Marie', italic: 'e-commerce', rest: 'réécrit, ×3.2 sur le panier.', metric: ['Conversion', '+218%'], days: '18 jours' },
              { n: '44', sector: 'Industrie', title: 'Parquet & Fils', italic: 'configurateur 3D', rest: 'devis automatisés en 30s.', metric: ['Devis/mois', '×7'], days: '32 jours' },
            ].map((c, i) => (
              <Reveal key={c.n} delay={i * 100}
                as="article" className="mz-card mz-card-link"
                onClick={() => go('case')}
                style={{ padding: 0, display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 0, overflow: 'hidden' }}>
                <div style={{ borderRight: '1px solid var(--hairline)', display: 'flex' }}>
                  {[<PieceHortisMock key="h" />, <PieceBergerMock key="b" />, <PieceClosMarieMock key="c" />, <PieceParquetMock key="p" />][i]}
                </div>
                <div style={{ padding: 'var(--s-5)', display: 'flex', flexDirection: 'column', gap: 'var(--s-3)' }}>
                  <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                    <span className="mz-mono" style={{ color: 'var(--fg-subtle)', letterSpacing: '0.12em' }}>N° {c.n} / 47</span>
                    <span className="mz-mono" style={{ color: 'var(--fg-subtle)' }}>{c.days}</span>
                  </header>
                  <span style={{ fontSize: 13, color: 'var(--fg-muted)' }}>{c.sector}</span>
                  <h3 style={{ fontSize: 26, fontFamily: 'var(--font-display)', fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.1 }}>
                    {c.title} — <Em>{c.italic}</Em> {c.rest}
                  </h3>
                  <footer style={{ marginTop: 'auto', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingTop: 'var(--s-3)', borderTop: '1px solid var(--hairline)' }}>
                    <span className="mz-mono" style={{ color: 'var(--fg-subtle)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{c.metric[0]}</span>
                    <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, color: 'var(--fg)', letterSpacing: '-0.02em' }}>{c.metric[1]}</span>
                  </footer>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ── 06 · Voix client ──────────────────────────────────── */}
      <section style={{ paddingBlock: 'var(--s-9)', background: 'var(--surface)', borderBlock: '1px solid var(--hairline)' }}>
        <div className="mz-container-wide">
          <Reveal>
            <Eyebrow>§ 05 — Voix</Eyebrow>
          </Reveal>
          <Reveal delay={120} as="blockquote" style={{
            margin: 'var(--s-5) 0 0', maxWidth: '24ch',
            fontFamily: 'var(--font-display)', fontSize: 'clamp(40px, 5.2vw, 88px)',
            fontWeight: 500, letterSpacing: '-0.04em', lineHeight: 1.02,
            textWrap: 'balance',
          }}>
            « Trois mois après livraison, <Em>aucune ligne</Em> n'a eu à être réécrite. Sérénité totale. »
          </Reveal>
          <Reveal delay={240} style={{ marginTop: 'var(--s-5)', display: 'flex', alignItems: 'center', gap: 'var(--s-4)' }}>
            <span style={{ width: 40, height: 1, background: 'var(--accent)' }} />
            <div>
              <div style={{ fontSize: 15, fontWeight: 500 }}>Christine Vasseur</div>
              <div style={{ fontSize: 13, color: 'var(--fg-muted)' }}>Directrice des opérations — Hortis SA · 240 collaborateurs</div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ── 07 · Contact CTA bandeau ──────────────────────────── */}
      <section style={{ paddingBlock: 'var(--s-9)' }}>
        <div className="mz-container-wide" style={{
          display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 'var(--s-7)', alignItems: 'center',
        }}>
          <Reveal>
            <Eyebrow>§ 06 — Démarrer</Eyebrow>
            <h2 className="mz-display" style={{ marginTop: 'var(--s-4)' }}>
              Trente minutes, sans engagement, pour <Em>voir si c'est sérieux</Em>.
            </h2>
            <p className="mz-lead" style={{ marginTop: 'var(--s-4)', maxWidth: '46ch' }}>
              On vous appelle. On regarde votre site, votre stack, vos contraintes.
              On vous dit ce qu'on ferait — gratuitement, par écrit, sous 48h.
            </p>
            <div style={{ marginTop: 'var(--s-5)', display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
              <button onClick={() => go('contact')} className="mz-btn mz-btn-accent">
                Prendre rendez-vous
                <svg width="13" height="13" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M2 6h8M6 2l4 4-4 4" /></svg>
              </button>
              <a href="mailto:hello@mezoo.studio" className="mz-link" style={{ fontSize: 15 }}>hello@mezoo.studio</a>
            </div>
          </Reveal>

          <Reveal delay={160}>
            <div style={{
              border: '1px solid var(--hairline-strong)', padding: 'var(--s-5)',
              display: 'flex', flexDirection: 'column', gap: 'var(--s-3)',
              position: 'relative', background: 'var(--bg)',
            }}>
              <div style={{ position: 'absolute', top: 0, left: 0, width: 8, height: 8, background: 'var(--accent)' }} />
              <Eyebrow line={false}>Prochains créneaux</Eyebrow>
              {[
                ['Jeudi 14 mai', '10h00 — 30 min', false],
                ['Vendredi 15 mai', '14h30 — 30 min', false],
                ['Lundi 18 mai', '09h00 — 30 min', true],
                ['Mardi 19 mai', '16h00 — 30 min', false],
              ].map(([d, h, taken]) => (
                <div key={d} style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  padding: '10px 0', borderBottom: '1px dashed var(--hairline)',
                  opacity: taken ? 0.4 : 1,
                }}>
                  <span style={{ fontSize: 14 }}>{d}</span>
                  <span className="mz-mono" style={{ color: 'var(--fg-muted)' }}>{taken ? 'Pris' : h}</span>
                </div>
              ))}
              <div className="mz-mono" style={{ color: 'var(--fg-subtle)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
                ↳ Fuseau : Europe/Paris
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { HomePage });