/* global React, CTA_URL, NAV_LINKS, HERO, CASES, PROBLEMS, BENEFITS, STEPS, FAQ_ITEMS, FINAL_CTA, FOOTER, Counter, Reveal, LiveClock, Typewriter, BrowserBar, AlarmMockCard */
const { useState: useStateB } = React;

function VariantB() {
  return (
    <div data-screen-label="Sergio.R landing" style={{ background: "var(--bg-canvas)" }}>
      <NavB />
      <HeroB />
      <ShowcaseB />
      <ProblemsB />
      <PipelineB />
      <BenefitsB />
      <FinalCTAB />
      <FaqB />
      <FooterB />
    </div>);

}

/* ============ NAV ============ */
function NavB() {
  return (
    <nav className="term-nav">
      <div className="container">
        <span className="term-nav__brand">
          SERGIO.R<span className="cursor" />
        </span>
        <div className="term-nav__links" style={{ marginLeft: 16 }}>
          {NAV_LINKS.map((l) =>
          <a key={l.label} href={l.href}
          target={l.external ? "_blank" : undefined}
          rel={l.external ? "noopener" : undefined}>
              {l.label}
            </a>
          )}
        </div>
        <span style={{ flex: 1 }} />
        <span style={{
          fontFamily: "var(--font-mono)", fontSize: 11,
          color: "var(--fg-secondary)", letterSpacing: 1.1, textTransform: "uppercase"
        }}>
          <LiveClock />
        </span>
        <a href={CTA_URL} className="btn btn-uv" target="_blank" rel="noopener">
          Audit gratuit <span>→</span>
        </a>
      </div>
    </nav>);

}

/* ============ HERO ============ */
function HeroB() {
  return (
    <section className="term-hero" id="top" style={{ padding: "72px 0 80px" }}>
      <div className="container">

        {/* Eyebrow bar */}
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          flexWrap: "wrap", gap: 12,
          marginBottom: 48, paddingBottom: 20,
          borderBottom: "1px solid var(--bg-slate)",
        }}>
          <span className="kicker" style={{ color: "var(--fg-secondary)" }}>
            <span style={{ color: "var(--static-mint)" }}>▸</span> {HERO.eyebrow}
          </span>
          <span className="status-pill">
            <span className="dot" /> Disponible · France entière
          </span>
        </div>

        <div className="term-hero__grid" style={{ alignItems: "start", gap: 56 }}>

          {/* LEFT — headline + deck + CTAs + trust */}
          <div>
            <h1 style={{
              fontFamily: "var(--font-display)", fontWeight: 900,
              fontSize: "clamp(48px, 6.5vw, 88px)",
              lineHeight: 0.95, letterSpacing: 0.3,
              margin: "0 0 28px 0", color: "var(--fg-primary)",
            }}>
              Votre présence en ligne<br />
              ne reflète pas<br />
              <span style={{ color: "var(--static-mint)" }}>votre niveau.</span>
            </h1>

            <p style={{
              fontFamily: "var(--font-sans)", fontWeight: 500,
              fontSize: 19, lineHeight: 1.6,
              color: "var(--fg-muted)", maxWidth: 540,
              margin: "0 0 36px 0",
            }}>
              {HERO.deck}
            </p>

            <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap", marginBottom: 48 }}>
              <a href={CTA_URL} className="btn btn-mint" target="_blank" rel="noopener">
                {HERO.cta} <span>→</span>
              </a>
              <a href="#realisations" className="btn btn-ghost">
                {HERO.ctaSecondary}
              </a>
            </div>

            {/* Trust signals */}
            <div style={{
              display: "flex", gap: 36, flexWrap: "wrap",
              paddingTop: 28, borderTop: "1px solid var(--bg-slate)",
            }}>
              {[
                { label: "Ingénieur télécom", sub: "Infra réseau · Bâtiment · Terrain" },
                { label: "Réponse en 24 h", sub: "Audit gratuit · Sans engagement" },
                { label: "Vous restez propriétaire", sub: "Domaine · Hébergement · Contenu" },
              ].map((t, i) => (
                <div key={i}>
                  <div style={{
                    fontFamily: "var(--font-mono)", fontWeight: 700,
                    fontSize: 11, letterSpacing: 1.5, textTransform: "uppercase",
                    color: "var(--static-mint)", marginBottom: 5,
                  }}>{t.label}</div>
                  <div style={{
                    fontFamily: "var(--font-mono)", fontSize: 9,
                    letterSpacing: 1.2, textTransform: "uppercase",
                    color: "var(--fg-secondary)",
                  }}>{t.sub}</div>
                </div>
              ))}
            </div>
          </div>

          {/* RIGHT — Audit preview card */}
          <Reveal as="div" className="term-hero__panel" style={{ alignSelf: "start" }}>
            <div className="term-hero__panel-title" style={{ marginBottom: 4 }}>
              <span>● Ce que je regarde dans votre audit</span>
              <span style={{ color: "var(--fg-secondary)" }}>Gratuit · 24 h</span>
            </div>

            {HERO.auditItems.map((item) => (
              <div key={item.n} className="term-hero__metric" style={{ alignItems: "flex-start", gap: 16 }}>
                <div style={{
                  fontFamily: "var(--font-mono)", fontWeight: 700,
                  fontSize: 12, lineHeight: 1.2,
                  color: "var(--static-ultraviolet)", minWidth: 24, paddingTop: 2,
                }}>{item.n}</div>
                <div className="term-hero__metric-lbl">
                  <strong style={{
                    display: "block", marginBottom: 3,
                    fontFamily: "var(--font-sans)", fontWeight: 700,
                    fontSize: 14, color: "var(--fg-primary)",
                  }}>{item.t}</strong>
                  {item.b}
                </div>
              </div>
            ))}

            <div style={{ paddingTop: 20, marginTop: 8, borderTop: "1px solid var(--bg-slate)" }}>
              <a href={CTA_URL} className="btn btn-mint" target="_blank" rel="noopener"
                style={{ width: "100%", justifyContent: "center" }}>
                Demander l'audit gratuit <span>→</span>
              </a>
              <p style={{
                fontFamily: "var(--font-mono)", fontSize: 9,
                letterSpacing: 1.2, textTransform: "uppercase",
                color: "var(--fg-secondary)", marginTop: 10,
                textAlign: "center", marginBottom: 0,
              }}>Sans engagement · Résultat en 24 h ouvrées</p>
            </div>
          </Reveal>

        </div>
      </div>
    </section>
  );
}

/* ============ SHOWCASE ============ */
function ShowcaseB() {
  return (
    <section className="section" id="realisations">
      <div className="container">
        <div className="section__head">
          <div>
            <span className="kicker">▸ Réalisations · 03 cas</span>
            <h2 className="h-display glitch" data-text="Fait pour votre métier."
            style={{ fontSize: "clamp(48px, 7vw, 96px)", marginTop: 14 }}>
              Fait pour votre métier.
            </h2>
            <p style={{
              fontFamily: "var(--font-serif)", fontStyle: "italic",
              fontSize: 20, lineHeight: 1.3, color: "var(--fg-muted)",
              maxWidth: 580, letterSpacing: "-0.16px", marginTop: 18
            }}>
              Chaque site est construit autour du vrai parcours de vos clients —
              leurs questions, leurs doutes, ce qui les convainc de choisir quelqu'un.
              Pas un template. Pas du générique.
            </p>
          </div>
        </div>

        <div className="showcase">
          {CASES.map((c, i) => {
            const accents = ["var(--tile-orange)", "var(--static-ultraviolet)", "var(--tile-yellow)"];
            return (
              <Reveal as="article" key={c.title} className="case case--dark" delay={i * 100}
              style={{ borderTop: `3px solid ${accents[i]}` }}>
                <span className="case__role" style={{ color: accents[i] }}>
                  Cas 0{i + 1} · {c.role}
                </span>
                <div className="case__art">
                  <BrowserBar url={c.url} />
                  <div style={{ height: "calc(100% - 32px)", overflow: "hidden" }}>
                    {c.img ? <img src={c.img} alt={c.title} /> : <AlarmMockCard />}
                  </div>
                </div>
                <h3 className="case__head">{c.title}</h3>
                <p className="case__deck" style={{ color: "var(--fg-muted)" }}>{c.quote}</p>
                <div style={{
                  marginTop: "auto", paddingTop: 14,
                  borderTop: "1px solid var(--bg-slate)",
                  display: "flex", justifyContent: "space-between", alignItems: "center"
                }}>
                  <span style={{
                    fontFamily: "var(--font-mono)", fontSize: 11,
                    letterSpacing: 1.5, textTransform: "uppercase",
                    color: accents[i]
                  }}>→ {c.stat}</span>
                  <span style={{
                    fontFamily: "var(--font-mono)", fontSize: 10,
                    color: "var(--fg-secondary)", letterSpacing: 1.5
                  }}>{c.url}</span>
                </div>
              </Reveal>);

          })}
        </div>
      </div>
    </section>);

}

/* ============ PROBLEMS (diagnostic grid) ============ */
function ProblemsB() {
  return (
    <section className="section">
      <div className="container">
        <div className="section__head">
          <div>
            <span className="kicker" style={{ color: "var(--static-ultraviolet)" }}>
              ▸ Diagnostic · 06 frictions
            </span>
            <h2 className="h-display" style={{ fontSize: "clamp(48px, 7vw, 88px)", marginTop: 14 }}>
              Vous reconnaissez<br />
              <span style={{ color: "var(--static-ultraviolet)" }}>ça ?</span>
            </h2>
            <p style={{
              fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 16,
              lineHeight: 1.55, color: "var(--fg-muted)", maxWidth: 540, marginTop: 18
            }}>
              Six situations qu'on retrouve chez presque tous les artisans techniques.
              Si trois ou plus vous parlent, l'audit est fait pour vous.
            </p>
          </div>
        </div>

        <div className="diag">
          {PROBLEMS.map((p, i) =>
          <Reveal as="article" key={i} className="diag__card" delay={i * 80}>
              <div className="diag__head">
                <span className="diag__id">Friction {String(i + 1).padStart(2, "0")}</span>
                <span className="diag__tag">● Critique</span>
              </div>
              <h3 className="diag__t">{p.t}</h3>
              <p className="diag__b">{p.b}</p>
              <div className="diag__bar" style={{ marginTop: "auto" }}>
                <span style={{
                position: "absolute", top: -16, right: 0,
                fontFamily: "var(--font-mono)", fontSize: 9,
                letterSpacing: 1.5, color: "var(--fg-secondary)",
                textTransform: "uppercase"
              }}>Impact {60 + i * 7 % 35} %</span>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ============ PIPELINE ============ */
function PipelineB() {
  return (
    <section className="section" id="services">
      <div className="container">
        <div className="section__head">
          <div>
            <span className="kicker" style={{ color: "var(--static-mint)" }}>
              ▸ Processus · 04 étapes
            </span>
            <h2 className="h-display" style={{ fontSize: "clamp(48px, 7vw, 88px)", marginTop: 14 }}>
              Quatre étapes.<br />
              Zéro <span style={{ color: "var(--static-mint)" }}>surprise</span>.
            </h2>
            <p style={{
              fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 16,
              lineHeight: 1.55, color: "var(--fg-muted)", maxWidth: 540, marginTop: 18
            }}>
              Vous validez à chaque étape. Rien n'est lancé sans votre accord.
              Pas de jargon, pas de mauvaises surprises sur la facture.
            </p>
          </div>
        </div>

        <div className="pipeline">
          {STEPS.map((s, i) =>
          <Reveal as="div" key={s.n} className="pipeline__step" delay={i * 120}>
              <div className="pipeline__id">Étape {s.n} · J +{i * 3}</div>
              <h3 className="pipeline__t">{s.t}</h3>
              <p className="pipeline__b">{s.b}</p>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ============ BENEFITS ============ */
function BenefitsB() {
  return (
    <section className="section">
      <div className="container">
        <div className="section__head">
          <div>
            <span className="kicker" style={{ color: "var(--static-ultraviolet)" }}>
              ▸ La solution
            </span>
            <h2 className="h-display" style={{ fontSize: "clamp(48px, 7vw, 88px)", marginTop: 14 }}>
              Ce que ça change<br />
              <span style={{ color: "var(--static-mint)" }}>concrètement.</span>
            </h2>
          </div>
        </div>

        <div className="benefits-grid">
          {BENEFITS.map((b, i) =>
          <Reveal as="article" key={i} delay={i * 100} style={{
            background: "var(--bg-canvas)",
            boxShadow: "inset 0 0 0 1px var(--bg-slate)",
            borderRadius: "var(--r-card)",
            padding: 32,
            display: "flex",
            gap: 24,
            alignItems: "flex-start"
          }}>
              <div style={{
              fontFamily: "var(--font-display)", fontWeight: 900,
              fontSize: 56, lineHeight: 0.9, color: "var(--static-ultraviolet)",
              letterSpacing: 0.5, minWidth: 80
            }}>0{i + 1}</div>
              <div>
                <h3 style={{
                fontFamily: "var(--font-sans)", fontWeight: 700,
                fontSize: 22, lineHeight: 1.15, margin: "8px 0 10px 0"
              }}>{b.t}</h3>
                <p style={{
                fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 14.5,
                lineHeight: 1.55, color: "var(--fg-muted)", margin: 0
              }}>{b.b}</p>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ============ FINAL CTA ============ */
function FinalCTAB() {
  return (
    <section className="section">
      <div className="container">
        <Reveal as="div" className="cta-b">
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 12,
            letterSpacing: 1.8, textTransform: "uppercase",
            color: "var(--static-mint)", marginBottom: 24
          }}>
            ▸ {FINAL_CTA.eyebrow}
          </div>
          <h2 className="cta-b__h">
            {FINAL_CTA.h1}<br />
            <em>{FINAL_CTA.h2}</em>
          </h2>
          <p className="cta-b__deck">{FINAL_CTA.body}</p>
          <div style={{ display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
            <a href={CTA_URL} className="btn btn-mint" target="_blank" rel="noopener">
              {FINAL_CTA.cta} <span>→</span>
            </a>
            <span className="status-pill" style={{ color: "rgba(255,255,255,0.85)" }}>
              <span className="dot" /> Sans engagement
            </span>
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ============ FAQ ============ */
function FaqB() {
  const [open, setOpen] = useStateB(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="faq-grid">
          <div className="faq-sticky">
            <span className="kicker" style={{ color: "var(--static-ultraviolet)" }}>
              ▸ FAQ · 04 questions
            </span>
            <h2 className="h-display" style={{ fontSize: 64, marginTop: 14 }}>
              Questions<br />
              <span style={{ color: "var(--static-mint)" }}>fréquentes.</span>
            </h2>
            <p style={{
              fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 14,
              color: "var(--fg-secondary)", marginTop: 24, lineHeight: 1.55
            }}>
              Les quatre questions qui reviennent à chaque audit.
            </p>
          </div>
          <div>
            {FAQ_ITEMS.map((it, i) => {
              const isOpen = open === i;
              return (
                <div key={i} className={`faq-row ${isOpen ? "open" : ""}`}>
                  <button className="faq-row__btn" onClick={() => setOpen(isOpen ? -1 : i)}>
                    <span>
                      <span style={{
                        fontFamily: "var(--font-mono)", fontSize: 12,
                        color: "var(--static-ultraviolet)", marginRight: 12,
                        letterSpacing: 1.5
                      }}>Q{String(i + 1).padStart(2, "0")}</span>
                      {it.q}
                    </span>
                    <span className="faq-row__plus">+</span>
                  </button>
                  <div className="faq-row__a"><p>{it.a}</p></div>
                </div>);

            })}
          </div>
        </div>
      </div>
    </section>);

}

/* ============ FOOTER ============ */
function FooterB() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__inner">
          <div>
            <h3 className="footer__mark" style={{
              fontFamily: "var(--font-display)", fontWeight: 900,
              fontSize: 56, letterSpacing: 0.5
            }}>
              SERGIO<span className="accent" style={{ color: "var(--static-mint)" }}>.R</span>
            </h3>
            <span className="footer__tag">{FOOTER.tag}</span>
          </div>
          <div className="footer__col">
            <h5>Contact</h5>
            <ul>
              <li><a>{FOOTER.phone} (whatsapp)</a></li>
              <li><a>{FOOTER.email}</a></li>
              <li><a href={CTA_URL}>Audit gratuit →</a></li>
              <li><a href="https://fr.linkedin.com/in/sergerabetokotany/en" target="_blank" rel="noopener">About me ↗</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h5>Services</h5>
            <ul>
              <li><a>Site web</a></li>
              <li><a>SEO local</a></li>
              <li><a>Maintenance</a></li>
              <li><a>Refonte</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h5>Métiers</h5>
            <ul>
              <li><a>Électricité</a></li>
              <li><a>Fibre · Télécom</a></li>
              <li><a>Alarme · Vidéo</a></li>
              <li><a>CVC · Plomberie</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2026 SERGIO.R — Tous droits réservés</span>
          <span>Freelance · France · WhatsApp {FOOTER.phone}</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { VariantB });