/* ===== public-facing sections (light) ===== */

function TrustChips() {
  const items = ["15 ans d'expérience", "Déplacement compris", "On t'explique tout", "7j/7 · 17h–22h"];
  return (
    <div className="chips">
      {items.map((c) => <span key={c} className="chip"><span className="dot"></span>{c}</span>)}
    </div>
  );
}

function Hero({ hero, onCall }) {
  const eyebrow = <span className="eyebrow">Dépannage informatique · Caen &amp; alentours</span>;
  const title = <h1>Ton ordi a un coup de mou&nbsp;?<br /><span style={{ color: "var(--brand)" }}>On le remet sur pied.</span></h1>;
  const sub = (
    <p style={{ fontSize: "1.18rem", color: "var(--muted)", maxWidth: 540 }}>
      Dépannage à domicile, virus, données perdues, nouvelle box… 15 ans à réparer
      les ordis du coin. Et surtout, on t'explique pour que tu n'aies plus à nous rappeler.
    </p>
  );
  const ctas = (
    <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center" }}>
      <button className="btn btn-primary btn-lg shine" onClick={onCall}>
        <Icon name="phone" size={19} color="#fff" /> Être rappelé gratuitement
      </button>
      <a className="btn btn-ghost btn-lg" href="tel:+33658665493">06 58 66 54 93</a>
    </div>
  );

  if (hero === "centre") {
    return (
      <section className="section" style={{ paddingTop: "clamp(56px,7vw,96px)" }}>
        <div className="wrap center" style={{ display: "grid", gap: 26, justifyItems: "center" }}>
          <Reveal>{eyebrow}</Reveal>
          <Reveal delay={60} style={{ maxWidth: 880 }}>{title}</Reveal>
          <Reveal delay={120} style={{ display: "grid", justifyItems: "center", gap: 8 }}>{sub}</Reveal>
          <Reveal delay={180}>{ctas}</Reveal>
          <Reveal delay={240}><TrustChips /></Reveal>
          <Reveal delay={300} style={{ width: "100%", marginTop: 22 }}>
            <Ph label="photo — intervention chez un client / atelier" style={{ height: "clamp(260px,38vw,460px)" }} />
          </Reveal>
        </div>
      </section>
    );
  }

  if (hero === "plein") {
    return (
      <section className="section" style={{ position: "relative", padding: 0 }}>
        <div style={{ position: "relative", minHeight: "clamp(520px,72vh,720px)", display: "flex", alignItems: "center" }}>
          <div className="ph" style={{ position: "absolute", inset: 0, borderRadius: 0, borderLeft: "none", borderRight: "none" }}>
            <span className="lbl mono" style={{ position: "absolute", bottom: 16, right: 16 }}>photo plein-cadre — setup / atelier</span>
          </div>
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, var(--bg) 0%, color-mix(in oklab,var(--bg),transparent 30%) 46%, transparent 78%)" }}></div>
          <div className="wrap" style={{ position: "relative" }}>
            <div style={{ display: "grid", gap: 26, maxWidth: 620 }}>
              <Reveal>{eyebrow}</Reveal>
              <Reveal delay={60}>{title}</Reveal>
              <Reveal delay={120}>{sub}</Reveal>
              <Reveal delay={180}>{ctas}</Reveal>
              <Reveal delay={240}><TrustChips /></Reveal>
            </div>
          </div>
        </div>
      </section>
    );
  }

  /* split (default) */
  return (
    <section className="section">
      <div className="wrap hero-grid" style={{ display: "grid", gridTemplateColumns: "1.05fr .95fr", gap: "clamp(32px,5vw,72px)", alignItems: "center" }}>
        <div className="glow" style={{ display: "grid", gap: 26 }}>
          <div aria-hidden="true" className="glow-orb" style={{ top: -40, left: -60, width: 360, height: 360, background: "radial-gradient(circle, color-mix(in oklab,var(--accent),transparent 80%), transparent 70%)" }}></div>
          <Reveal>{eyebrow}</Reveal>
          <Reveal delay={60}>{title}</Reveal>
          <Reveal delay={120}>{sub}</Reveal>
          <Reveal delay={180}>{ctas}</Reveal>
          <Reveal delay={240}><TrustChips /></Reveal>
          <Reveal delay={300} style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
            <span className="stars" style={{ display: "inline-flex", gap: 3, color: "var(--accent)" }}>
              {[0,1,2,3,4].map(i => <Icon key={i} name="star" size={16} color="var(--accent)" />)}
            </span>
            <span style={{ color: "var(--muted)", fontWeight: 600, fontSize: ".98rem" }}>
              « Patient, clair, et jamais de jugement » — ce qu'on nous dit le plus.
            </span>
          </Reveal>
        </div>
        <Reveal delay={140} style={{ position: "relative" }}>
          <Ph label="photo — dépanneur en intervention" style={{ height: "clamp(340px,42vw,520px)" }} />
          <div className="card" style={{ position: "absolute", bottom: -22, left: -22, padding: "16px 20px", display: "flex", alignItems: "center", gap: 14, boxShadow: "0 20px 50px -22px rgba(20,30,80,.35)" }}>
            <div style={{ width: 46, height: 46, borderRadius: 12, background: "var(--brand-tint)", display: "grid", placeItems: "center", color: "var(--brand)" }}>
              <Icon name="clock" size={24} color="var(--brand)" />
            </div>
            <div style={{ lineHeight: 1.2 }}>
              <strong style={{ fontFamily: "Space Grotesk", fontSize: "1.05rem" }}>Ouvert 7j/7</strong>
              <div className="mono" style={{ fontSize: ".8rem", color: "var(--muted)" }}>17h → 22h</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

const SERVICES = [
  ["home", "Dépannage à domicile", "On vient chez toi, sur Caen et tout autour. Pas besoin de débrancher et transporter ta tour."],
  ["shield", "Virus & nettoyage", "Pubs qui s'ouvrent partout, ordi qui rame ? On nettoie, on sécurise, on remet d'aplomb."],
  ["disk", "Récupération de données", "Photos, documents, souvenirs… on récupère ce qui peut l'être, même quand ça semble perdu."],
  ["printer", "Box, imprimante & périphériques", "Installation et configuration de ta box, imprimante, clavier, écran — tout branché et testé."],
  ["remote", "Assistance à distance", "Un souci rapide ? On prend la main à distance pour régler ça sans déplacement."],
  ["grad", "Formation & initiation", "Mails, photos, visios avec les petits-enfants : on t'apprend à ton rythme, sans jargon."],
];

function Services({ onCall }) {
  return (
    <section className="section" id="services" style={{ background: "var(--bg-2)" }}>
      <div className="wrap">
        <Reveal style={{ maxWidth: 640, marginBottom: 48 }}>
          <span className="eyebrow">Ce qu'on répare</span>
          <h2 style={{ fontSize: "clamp(2rem,4vw,2.9rem)", margin: ".5rem 0 .7rem" }}>Un problème, une solution claire</h2>
          <p style={{ color: "var(--muted)", fontSize: "1.1rem" }}>
            Que tu sois perdu avec un nouvel ordi ou bloqué par une panne, on s'occupe de tout —
            et on te laisse plus à l'aise qu'avant.
          </p>
        </Reveal>
        <div className="svc-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 22 }}>
          {SERVICES.map(([ic, t, d], i) => (
            <Reveal key={t} delay={(i % 3) * 80} className="card svc-card"
              style={{ display: "grid", gap: 14, alignContent: "start", transition: "transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s" }}>
              <div style={{ width: 54, height: 54, borderRadius: 14, background: "var(--brand-tint)", display: "grid", placeItems: "center", color: "var(--brand)" }}>
                <Icon name={ic} size={28} color="var(--brand)" />
              </div>
              <h3 style={{ fontSize: "1.32rem" }}>{t}</h3>
              <p style={{ color: "var(--muted)", fontSize: "1.02rem" }}>{d}</p>
            </Reveal>
          ))}
        </div>
        <Reveal style={{ marginTop: 44, display: "flex", flexWrap: "wrap", gap: "18px 28px", alignItems: "center", justifyContent: "center", textAlign: "center", background: "var(--brand-tint)", border: "1px solid var(--brand-300)", borderRadius: "var(--radius)", padding: "26px 32px" }}>
          <span style={{ fontSize: "1.2rem", fontWeight: 700, fontFamily: "Space Grotesk", color: "var(--brand)" }}>
            Un de ces soucis&nbsp;? On peut souvent régler ça le soir même.
          </span>
          <button className="btn btn-primary btn-lg" onClick={onCall}>
            <Icon name="phone" size={18} color="#fff" /> Être rappelé gratuitement
          </button>
        </Reveal>
      </div>
    </section>
  );
}

function Formation({ onCall }) {
  const points = [
    "On t'explique au fur et à mesure, dans des mots simples.",
    "Un petit récap écrit à la fin, pour ne rien oublier.",
    "Patience et zéro jugement — surtout avec les débutants.",
    "Objectif : la prochaine fois, tu te débrouilles tout seul.",
  ];
  return (
    <section className="section" id="formation">
      <div className="wrap form-grid" style={{ display: "grid", gridTemplateColumns: ".95fr 1.05fr", gap: "clamp(32px,5vw,72px)", alignItems: "center" }}>
        <Reveal style={{ position: "relative", order: 0 }}>
          <Ph label="photo — moment de formation avec un client senior" style={{ height: "clamp(320px,40vw,470px)" }} />
        </Reveal>
        <Reveal delay={120} style={{ display: "grid", gap: 22 }}>
          <span className="eyebrow">Notre priorité</span>
          <h2 style={{ fontSize: "clamp(2rem,4vw,2.9rem)" }}>On te forme pour ne pas revenir deux fois</h2>
          <p style={{ color: "var(--muted)", fontSize: "1.12rem" }}>
            Réparer, c'est bien. T'apprendre à éviter le prochain souci, c'est mieux.
            On prend le temps de t'expliquer ce qu'on fait — la formation du client, c'est
            le cœur de notre métier.
          </p>
          <div style={{ display: "grid", gap: 14 }}>
            {points.map((p) => (
              <div key={p} style={{ display: "flex", gap: 13, alignItems: "flex-start" }}>
                <span style={{ flex: "0 0 auto", width: 28, height: 28, borderRadius: 9, background: "var(--brand)", display: "grid", placeItems: "center", marginTop: 2 }}>
                  <Icon name="check" size={16} color="#fff" stroke={2.6} />
                </span>
                <span style={{ fontWeight: 600 }}>{p}</span>
              </div>
            ))}
          </div>
          <div className="card" style={{ padding: "22px 24px", display: "grid", gap: 14, background: "var(--brand-tint)", borderColor: "var(--brand-300)" }}>
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
              <div>
                <div className="mono" style={{ fontSize: ".72rem", textTransform: "uppercase", letterSpacing: ".14em", color: "var(--brand)" }}>Formation à la carte</div>
                <div style={{ fontFamily: "Space Grotesk", fontWeight: 700, fontSize: "1.15rem", marginTop: 2 }}>1 h d'initiation, chez toi</div>
              </div>
              <div className="abo-price" style={{ color: "var(--brand)" }}>
                <span className="num" style={{ fontSize: "2.4rem" }}>50€</span>
                <span className="per" style={{ color: "var(--muted)" }}>/ heure</span>
              </div>
            </div>
            <div className="tarif-card" style={{ borderColor: "var(--brand-300)" }}>
              <span style={{ fontWeight: 600 }}>Diagnostic &amp; devis</span>
              <span style={{ fontFamily: "Space Grotesk", fontWeight: 700, color: "var(--brand)" }}>Gratuit</span>
            </div>
            <div className="tarif-card" style={{ borderColor: "var(--brand-300)" }}>
              <span style={{ fontWeight: 600 }}>Pack 3 h (le tarif malin)</span>
              <span style={{ fontFamily: "Space Grotesk", fontWeight: 700, color: "var(--brand)" }}>120€ <span className="mono" style={{ fontSize: ".7rem", color: "var(--muted)", fontWeight: 400 }}>soit 40€/h</span></span>
            </div>
            <p className="mono" style={{ fontSize: ".76rem", color: "var(--muted)" }}>
              Avec l'abonnement Tranquillité, une heure de formation est offerte chaque trimestre.
            </p>
          </div>
          <div>
            <button className="btn btn-primary btn-lg shine" onClick={onCall}>Demander une initiation</button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

const STATS = [
  ["bolt", "15 ans", "d'expérience en dépannage informatique"],
  ["pin", "Caen & alentours", "déplacement compris dans l'intervention"],
  ["clock", "7j/7 · 17h–22h", "joignable tous les jours, même le week-end"],
  ["grad", "Pédagogie", "on t'explique, tu deviens autonome"],
];

function TrustBand() {
  return (
    <section className="section" style={{ paddingTop: "clamp(40px,5vw,64px)", paddingBottom: "clamp(40px,5vw,64px)" }}>
      <div className="wrap">
        <div className="stat-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 18 }}>
          {STATS.map(([ic, big, small], i) => (
            <Reveal key={big} delay={i * 70} className="card" style={{ display: "grid", gap: 10, alignContent: "start", borderColor: "var(--brand-300)" }}>
              <div style={{ width: 48, height: 48, borderRadius: 13, background: "var(--brand-tint)", display: "grid", placeItems: "center" }}>
                <Icon name={ic} size={26} color="var(--brand)" />
              </div>
              <div style={{ fontFamily: "Space Grotesk", fontWeight: 700, fontSize: "1.6rem", lineHeight: 1.05, color: "var(--brand)" }}>{big}</div>
              <div style={{ color: "var(--muted)", fontSize: ".98rem" }}>{small}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Services, Formation, TrustBand });