// home.jsx — Hero, Services, Diagnostic, Reviews, FAQ, Contact, Footer for home page

const Hero = ({ navigate, tweaks = {} }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const showKanji = tweaks.heroStyle !== "minimal";
  const info = window.RN_INFO;

  // count up
  const counters = [
    { v: 12000, suffix: "+", l: "Réparations" },
    { v: info.rating.score, suffix: "/5", l: `${info.rating.count}+ avis Google`, decimals: 1 },
    { v: 20, suffix: " min", l: "Express écran" },
    { v: 6, suffix: " mois", l: "Garantie" },
  ];

  return (
    <section className="hero paper">
      <div className="hero-bg">
        <div className="hero-grid" />
        {showKanji && <span className="hero-kanji hero-kanji--1">修</span>}
        {showKanji && <span className="hero-kanji hero-kanji--2">理</span>}
        <Shuriken className="hero-shuriken shuriken-rotate" size={500} />
      </div>

      <div className="container hero-content">
        <div className="hero-meta">
          <span className="eyebrow-jp">修理忍者 · BASTILLE</span>
          <span className="hero-status">
            <span className="pulse" />
            BOUTIQUE OUVERTE · LUN—SAM
          </span>
          <span className="hero-status">
            <Shuriken size={12} style={{ color: "var(--crimson)" }} />
            DIAGNOSTIC GRATUIT
          </span>
        </div>

        <h1 className="hero-title">
          <div className="line"><span>Réparé en</span></div>
          <div className="line"><span><em>silence.</em></span></div>
          <div className="line"><span>Précis comme une lame.</span></div>
        </h1>

        <div className="hero-bottom">
          <p className="hero-lead">
            <strong>Repair Ninja</strong> remet vos écrans, batteries et cartes mères en état en <em style={{ color: "var(--crimson)", fontStyle: "normal" }}>20 minutes</em> en moyenne. Atelier familial à <strong>Paris Bastille</strong>, pièces premium, garantie 6 mois — et chaque euro dépensé devient un <em style={{ color: "var(--crimson)", fontStyle: "normal" }}>Shuriken Point</em>.
          </p>
          <div className="hero-ctas">
            <button className="btn btn--primary" onClick={() => navigate("diagnostic")}>
              <span>Lancer un diagnostic</span>
              <IconArrowRight />
            </button>
            <button className="btn btn--ghost" onClick={() => navigate("shop")} style={{ color: "var(--cream)" }}>
              <span>Voir la boutique</span>
            </button>
          </div>
        </div>

        <div className="hero-stats">
          {counters.map((c, i) => (
            <CounterStat key={i} {...c} />
          ))}
        </div>
      </div>
    </section>
  );
};

const CounterStat = ({ v, suffix, l, decimals = 0 }) => {
  const [val, setVal] = React.useState(0);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          let start = 0;
          const dur = 1600;
          const t0 = performance.now();
          const step = (t) => {
            const k = Math.min(1, (t - t0) / dur);
            const eased = 1 - Math.pow(1 - k, 3);
            setVal(eased * v);
            if (k < 1) requestAnimationFrame(step);
          };
          requestAnimationFrame(step);
          obs.disconnect();
        }
      });
    });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [v]);

  const formatted = decimals > 0 ? val.toFixed(decimals) : Math.round(val).toLocaleString("fr-FR");
  return (
    <div className="stat" ref={ref}>
      <div className="v">{formatted}<em>{suffix}</em></div>
      <div className="l">{l}</div>
    </div>
  );
};

const Ticker = () => {
  const items = [
    { jp: "修理", t: "Écran iPhone" },
    { jp: "電池", t: "Batterie" },
    { jp: "水", t: "Désoxydation" },
    { jp: "板", t: "Carte mère" },
    { jp: "盾", t: "Hydrogel" },
    { jp: "鏡", t: "Verre Trempé" },
    { jp: "速", t: "Express 30 min" },
    { jp: "保", t: "Garantie 6 mois" },
  ];
  const list = [...items, ...items];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {list.map((it, i) => (
          <span className="ticker-item" key={i}>
            <span style={{ fontFamily: "var(--font-jp)", color: "var(--crimson)" }}>{it.jp}</span>
            <span>{it.t}</span>
            <span className="ticker-dot" />
          </span>
        ))}
      </div>
    </div>
  );
};

const Services = ({ navigate }) => {
  const items = [
    {
      num: "01",
      title: "Téléphone",
      icon: <IconPhone size={48} />,
      desc: "Écran, batterie, connecteur, vitre arrière. iPhone, Samsung, Xiaomi, Google. Réparation express en boutique.",
      cta: "Diagnostic en 60s",
    },
    {
      num: "02",
      title: "Ordinateur",
      icon: <IconLaptop size={48} />,
      desc: "MacBook, PC portable, tour. Changement clavier, batterie, SSD, dalle. Récupération de données possible.",
      cta: "Voir les services",
    },
    {
      num: "03",
      title: "Tablette",
      icon: <IconTablet size={48} />,
      desc: "iPad, Galaxy Tab, Surface. Vitre, écran LCD, connecteur de charge. Devis transparent sans surprise.",
      cta: "Tarifs indicatifs",
    },
  ];
  return (
    <section className="section section--cream paper" id="services">
      <div className="container">
        <div className="sec-head">
          <div>
            <span className="kicker">三 · TROIS DOMAINES</span>
            <h2 style={{ marginTop: 16 }}>Une seule discipline.<br/><em style={{ fontStyle: "italic", color: "var(--crimson)" }}>La précision.</em></h2>
          </div>
          <div className="aside">
            On répare aussi vite que possible, aussi proprement que nécessaire. Pas de raccourcis, pas de pièces compatibles douteuses.
          </div>
        </div>

        <div className="services-grid">
          {items.map((s) => (
            <button className="service-card" key={s.num} onClick={() => navigate("diagnostic")}>
              <div>
                <div className="icon">{s.icon}</div>
                <div className="num" style={{ marginTop: 32 }}>{s.num} / 03</div>
                <h3>{s.title}</h3>
                <p className="desc">{s.desc}</p>
              </div>
              <div className="arrow">
                <span>{s.cta}</span>
                <IconArrowRight />
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
};

// Inline diagnostic preview on home
const DiagnosticTeaser = ({ navigate }) => {
  return (
    <section className="diagnostic paper" id="diagnostic">
      <span className="diag-kanji">診</span>
      <div className="container">
        <div className="diag-wrap">
          <div>
            <span className="eyebrow-jp" style={{ color: "var(--crimson)" }}>診断</span>
            <h2 style={{ marginTop: 16 }}>Diagnostic en <em style={{ fontStyle: "italic", color: "var(--crimson)" }}>60 secondes.</em></h2>
            <p style={{ color: "var(--muted-2)", maxWidth: 480, marginTop: 24, fontSize: 17, lineHeight: 1.5 }}>
              Trois questions. Un devis instantané basé sur nos tarifs réels. Aucune information personnelle requise pour démarrer.
            </p>
            <div style={{ marginTop: 40, display: "grid", gap: 12, maxWidth: 360 }}>
              <div style={{ display: "flex", gap: 12, alignItems: "center", color: "var(--cream)", fontSize: 14 }}>
                <IconCheck size={14} /> Devis instantané, prix final
              </div>
              <div style={{ display: "flex", gap: 12, alignItems: "center", color: "var(--cream)", fontSize: 14 }}>
                <IconCheck size={14} /> Tarifs identiques en ligne et en boutique
              </div>
              <div style={{ display: "flex", gap: 12, alignItems: "center", color: "var(--cream)", fontSize: 14 }}>
                <IconCheck size={14} /> Réservation directe d'un créneau express
              </div>
            </div>
            <div style={{ marginTop: 40, display: "flex", gap: 12 }}>
              <button className="btn btn--primary" onClick={() => navigate("diagnostic")}>
                <span>Démarrer le diagnostic</span><IconArrowRight />
              </button>
            </div>
          </div>
          <DiagnosticEmbed navigate={navigate} />
        </div>
      </div>
    </section>
  );
};

// re-uses the Diagnostic component logic in compact mode
const DiagnosticEmbed = ({ navigate }) => {
  const Diagnostic = window.Diagnostic;
  return <Diagnostic compact navigate={navigate} />;
};

const Reviews = () => {
  const reviews = window.RN_DATA.reviews;
  const track = [...reviews, ...reviews];
  return (
    <section className="section section--cream paper" id="reviews">
      <div className="container">
        <div className="sec-head">
          <div>
            <span className="kicker">★ AVIS CLIENTS</span>
            <h2 style={{ marginTop: 16 }}>4.9/5 sur Google.<br/><em style={{ fontStyle: "italic", color: "var(--crimson)" }}>Mérité.</em></h2>
          </div>
          <div className="aside">
            Plus de 1 800 avis depuis l'ouverture. Voici ce que nos clients disent — sans filtre.
          </div>
        </div>
      </div>
      <div className="reviews-marquee">
        <div className="reviews-track">
          {track.map((r, i) => (
            <div className="review" key={i}>
              <div className="stars">
                {Array.from({ length: r.stars }).map((_, j) => <IconStar key={j} size={14} />)}
              </div>
              <div className="text">« {r.text} »</div>
              <div className="author">
                <div className="ava">{r.author[0]}</div>
                <div>
                  <div className="name">{r.author}</div>
                  <div className="meta">{r.meta}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section section--dark paper" id="faq">
      <div className="container">
        <div className="sec-head">
          <div>
            <span className="kicker">? FOIRE AUX QUESTIONS</span>
            <h2 style={{ marginTop: 16, color: "var(--cream)" }}>Tout ce que vous vouliez<br/>savoir.</h2>
          </div>
          <div className="aside" style={{ color: "var(--muted-2)" }}>
            Une question qui n'apparaît pas ? Écrivez-nous, on répond sous 4h en moyenne.
          </div>
        </div>
        <div className="faq-list">
          {window.RN_DATA.faq.map((f, i) => (
            <div key={i} className={"faq-item" + (open === i ? " open" : "")}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="plus">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 5v14M5 12h14"/></svg>
                </span>
              </button>
              <div className="faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const About = () => {
  return (
    <section className="section section--cream paper" id="about">
      <div className="container">
        <div className="about-grid">
          <div className="about-img">
            <div className="ph">[ Photo équipe / atelier ]</div>
            <div className="stamp">
              <div className="hanko">忍</div>
            </div>
          </div>
          <div>
            <span className="kicker">DEPUIS 2019</span>
            <h2 style={{ marginTop: 16 }}>L'art de la <em style={{ fontStyle: "italic", color: "var(--crimson)" }}>réparation invisible.</em></h2>
            <p className="lead" style={{ marginTop: 24 }}>
              Trois techniciens certifiés, un atelier ouvert sur la rue, et une obsession : que votre appareil ressorte exactement comme il est entré — sauf qu'il refonctionne.
            </p>
            <div className="about-features">
              <div className="about-feature">
                <div className="icon"><IconShield size={18} /></div>
                <div>
                  <h4>Pièces certifiées</h4>
                  <p>Écrans Premium OEM, batteries neuves cycle 0. Pas de seconde main, pas de surprise.</p>
                </div>
              </div>
              <div className="about-feature">
                <div className="icon"><IconClock size={18} /></div>
                <div>
                  <h4>Express &lt; 30 min</h4>
                  <p>Écran et batterie en stock immédiat sur 95% des modèles iPhone et Samsung courants.</p>
                </div>
              </div>
              <div className="about-feature">
                <div className="icon"><IconSparkle size={18} /></div>
                <div>
                  <h4>Garantie 6 mois</h4>
                  <p>Sur la pièce ET la main-d'œuvre. Si le défaut revient, on le reprend gratuitement.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Contact = () => {
  const [sent, setSent] = React.useState(false);
  const info = window.RN_INFO;
  return (
    <section className="section section--cream paper" id="contact">
      <div className="container">
        <div className="sec-head">
          <div>
            <span className="kicker">店舗 · BOUTIQUE BASTILLE</span>
            <h2 style={{ marginTop: 16 }}>Venez nous voir.<br/><em style={{ fontStyle: "italic", color: "var(--crimson)" }}>Ou écrivez-nous.</em></h2>
          </div>
          <div className="aside">Le diagnostic en boutique reste toujours gratuit, avec ou sans rendez-vous.</div>
        </div>
        <div className="contact-grid">
          <div className="contact-info">
            <div className="contact-block">
              <div className="l">Adresse</div>
              <div className="v">{info.address}<br/>{info.city}</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--muted)", marginTop: 8, letterSpacing: 0.05 }}>{info.metroDetail}</div>
            </div>
            <div className="contact-block">
              <div className="l">Horaires</div>
              <div className="v" style={{ fontSize: 18 }}>
                {info.hours.map((h, i) => (
                  <div key={i} style={{ display: "flex", justifyContent: "space-between", gap: 16, padding: "4px 0", borderBottom: i < info.hours.length - 1 ? "1px solid rgba(10,9,8,0.08)" : "0" }}>
                    <span>{h.days}</span>
                    <strong style={{ color: h.time === "Fermé" ? "var(--muted)" : "var(--ink)", fontWeight: 500 }}>{h.time}</strong>
                  </div>
                ))}
              </div>
            </div>
            <div className="contact-block">
              <div className="l">Téléphone</div>
              <div className="v"><a href={"tel:" + info.phoneRaw} style={{ color: "inherit" }}>{info.phone}</a></div>
            </div>
            <div className="contact-block">
              <div className="l">Email</div>
              <div className="v"><a href={"mailto:" + info.email} style={{ color: "inherit" }}>{info.email}</a></div>
            </div>
          </div>
          <form className="contact-form" onSubmit={(e) => { e.preventDefault(); setSent(true); setTimeout(() => setSent(false), 3000); }}>
            <div className="field">
              <label>Nom complet</label>
              <input type="text" required placeholder="Hattori Hanzo" />
            </div>
            <div className="field">
              <label>Email</label>
              <input type="email" required placeholder="vous@domaine.fr" />
            </div>
            <div className="field">
              <label>Sujet</label>
              <select required>
                <option>Demande de devis</option>
                <option>Question sur une réparation</option>
                <option>Service coursier à domicile</option>
                <option>Suivi de commande</option>
                <option>Autre</option>
              </select>
            </div>
            <div className="field">
              <label>Message</label>
              <textarea required placeholder="Dites-nous tout..." />
            </div>
            <button className="btn btn--primary" type="submit" style={{ marginTop: 8, width: "100%", justifyContent: "center" }}>
              <span>{sent ? "Message envoyé ✓" : "Envoyer le message"}</span>
              {!sent && <IconArrowRight />}
            </button>
          </form>
        </div>
      </div>
    </section>
  );
};

const Footer = ({ navigate }) => {
  const info = window.RN_INFO;
  return (
    <footer className="footer paper">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col footer-brand">
            <img src="assets/logo.png" alt="Repair Ninja" style={{ width: 160, height: "auto", display: "block" }} />
            <p>L'art japonais de la réparation appliqué à vos appareils, depuis notre atelier <strong style={{ color: "var(--cream)" }}>Paris Bastille</strong>. Précision, silence, garantie 6 mois.</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 20, fontSize: 13, color: "var(--muted-2)" }}>
              <a href={"tel:" + info.phoneRaw} style={{ color: "var(--cream)", opacity: 1, padding: 0, display: "flex", alignItems: "center", gap: 8 }}>
                <IconPin size={14} /> {info.fullAddress}
              </a>
              <a href={"tel:" + info.phoneRaw} style={{ color: "var(--cream)", opacity: 1, padding: 0, display: "flex", alignItems: "center", gap: 8 }}>
                <IconClock size={14} /> {info.phone}
              </a>
            </div>
            <div style={{ display: "flex", gap: 12, marginTop: 24 }}>
              <div className="hanko">忍</div>
              <div className="hanko" style={{ background: "var(--ink-3)", color: "var(--cream)", boxShadow: "inset 0 0 0 2px var(--ink-2), inset 0 0 0 3px var(--ink-3)", transform: "rotate(3deg)" }}>修</div>
            </div>
          </div>
          <div className="footer-col">
            <h5>Services</h5>
            <a href="services.html">Réparation Téléphone</a>
            <a href="services.html#mac">Réparation Mac / PC</a>
            <a href="services.html#tablet">Réparation Tablette</a>
            <a href="services.html#console">Réparation Console</a>
            <a href="coursier.html">Service Coursier</a>
            <a href="diagnostic.html">Diagnostic en ligne</a>
            <a href="suivi.html">Suivi de réparation</a>
          </div>
          <div className="footer-col">
            <h5>Boutique</h5>
            <a href="boutique.html?cat=Protection">Hydrogels</a>
            <a href="boutique.html?cat=Protection">Verres Trempés</a>
            <a href="boutique.html?cat=Coques">Coques</a>
            <a href="boutique.html?cat=Charge">Chargeurs</a>
            <a href="boutique.html?cat=Audio">Audio</a>
            <a href="boutique.html">Tout voir</a>
          </div>
          <div className="footer-col">
            <h5>Compte & Aide</h5>
            <a href="compte.html">Espace client</a>
            <a href="compte.html#points">Shuriken Points</a>
            <a href="suivi.html">Suivre ma réparation</a>
            <a href="a-propos.html">À propos</a>
            <a href="contact.html">Contact</a>
            <a href="index.html#faq">FAQ</a>
            <a href="mentions.html">Mentions légales</a>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 REPAIR NINJA · SIRET {info.siret} · TVA {info.tva}</div>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="mentions.html" style={{ opacity: 0.7 }}>Mentions légales</a>
            <a href="mentions.html#cgv" style={{ opacity: 0.7 }}>CGV</a>
            <a href="mentions.html#privacy" style={{ opacity: 0.7 }}>Confidentialité</a>
          </div>
        </div>
      </div>
    </footer>
  );
};

// CoursierTeaser — promo for Repair Ninja Home (delivery service)
const CoursierTeaser = ({ navigate }) => {
  const steps = [
    { n: "01", t: "Vous nous appelez", d: "Téléphone, formulaire ou WhatsApp. On planifie un retrait à l'heure qui vous arrange." },
    { n: "02", t: "Notre coursier passe", d: "À vélo, à domicile ou au bureau. Partout dans Paris intra-muros." },
    { n: "03", t: "Réparation à l'atelier", d: "Mêmes pièces, même garantie 6 mois qu'en boutique. Diagnostic photo en temps réel." },
    { n: "04", t: "Retour livré", d: "On vous ramène votre appareil. Paiement après vérification, par virement ou en ligne." },
  ];
  return (
    <section className="section section--cream paper" style={{ position: "relative", overflow: "hidden" }}>
      <span style={{ position: "absolute", top: "10%", left: "-3%", fontFamily: "var(--font-jp)", fontSize: "clamp(180px, 22vw, 320px)", color: "rgba(200, 16, 46, 0.04)", pointerEvents: "none", lineHeight: 1 }}>家</span>
      <div className="container" style={{ position: "relative" }}>
        <div className="sec-head">
          <div>
            <span className="kicker">家 · REPAIR NINJA HOME</span>
            <h2 style={{ marginTop: 16 }}>Le ninja vient<br/><em style={{ fontStyle: "italic", color: "var(--crimson)" }}>jusqu'à vous.</em></h2>
          </div>
          <div className="aside">
            Service coursier à vélo dans tout Paris. Mêmes prix, même garantie, livré devant votre porte.
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, marginTop: 64, border: "1px solid var(--ink)" }} className="coursier-steps">
          {steps.map((s, i) => (
            <div key={s.n} style={{ padding: "40px 32px", borderRight: i < 3 ? "1px solid var(--ink)" : "0", display: "flex", flexDirection: "column", gap: 12 }} className="coursier-step">
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--crimson)", letterSpacing: 0.2 }}>{s.n}</span>
              <h4 style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 400, marginTop: 4 }}>{s.t}</h4>
              <p style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.5 }}>{s.d}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
          <a className="btn btn--primary" href="coursier.html">
            <span>Demander un retrait</span><IconArrowRight />
          </a>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--muted)", letterSpacing: 0.1, textTransform: "uppercase", marginLeft: 8 }}>
            <Shuriken size={12} style={{ color: "var(--crimson)", verticalAlign: "middle", marginRight: 8 }} />
            Service éco · livraison à vélo
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, {
  Hero, Ticker, Services, DiagnosticTeaser, CoursierTeaser, Reviews, FAQ, About, Contact, Footer,
});