家

REPAIR NINJA HOME · 家

Le ninja vient
jusqu'à vous.

Coursier à vélo dans tout Paris pour récupérer votre appareil, le réparer dans notre atelier Bastille et vous le rapporter. Mêmes prix qu'en boutique, même garantie 6 mois.

20 € aller-retour · 15 € un seul déplacement

Mêmes prix qu'en magasin

Vélo · zéro émission

手順 · COMMENT ÇA MARCHE

Quatre étapes,
zéro déplacement.

De votre canapé à votre appareil réparé — sans bouger de chez vous.

{steps.map((s, i) => (

{s.n} {s.jp}

{s.icon}

{s.t}

{s.d}

))}

料金 · TARIFS COURSIER

Frais de coursier
transparents.

Service disponible uniquement dans Paris intra-muros (75001 – 75020). Le coût de la réparation reste identique à celui pratiqué en boutique. Paiement requis avant la livraison pour toute restitution à domicile.

{tarifs.map((t, i) => (

{t.zone}

{t.price}

{t.note}

))}

Paiement avant livraison obligatoire. Si vous souhaitez que votre appareil soit rapporté à domicile, le règlement de la réparation (+ frais coursier) doit être effectué avant le retour du coursier — par CB en ligne ou virement. Sans règlement préalable, vous devrez récupérer l'appareil en boutique.

予約 · DEMANDE

Réservez un
retrait.

On vous rappelle sous 30 min en heures ouvrées pour confirmer le créneau. Précisez votre adresse, votre appareil et la panne.

Hotline coursier

{info.phone}

Email coursier

{info.email}

{ e.preventDefault(); const fd = new FormData(e.target); try { const db = window.SUPABASE; const { data: { session } } = await db.auth.getSession(); await db.from("client_requests").insert({ type: "coursier", auth_uid: session?.user?.id || null, email: session?.user?.email || null, name: fd.get("name"), phone: fd.get("phone"), pickup_address: fd.get("address"), issue_desc: fd.get("device"), preferred_slot: fd.get("slot"), }); } catch (err) { console.error("[RN] coursier request:", err); } setSent(true); setTimeout(() => setSent(false), 3000); }}>

Votre nom

Téléphone

Adresse de retrait

Appareil & panne

</div>
              <div className="field">
                <label>Créneau préféré</label>
                <select name="slot" required>
                  <option value="asap">Dès que possible</option>
                  <option value="matin">Matin (10h — 13h)</option>
                  <option value="après-midi">Après-midi (14h — 18h)</option>
                  <option value="soirée">Soirée (18h — 21h)</option>
                </select>
              </div>
              <button className="btn btn--primary" type="submit" style={{ marginTop: 8, width: "100%", justifyContent: "center" }}>
                <span>{sent ? "Demande envoyée ✓" : "Demander le coursier"}</span>
                {!sent && <IconArrowRight />}
              </button>
            </form>
          </div>
        </div>
      </section>
    </div>
  );
};

// ============================================
// ABOUT PAGE
// ============================================
const AboutPage = ({ navigate }) => {
  const info = window.RN_INFO;

const values = [
    { jp: "信", t: "Confiance", d: "Si on ne peut pas réparer, vous ne payez rien. Si on peut, le prix annoncé est le prix final." },
    { jp: "速", t: "Rapidité", d: "90% des réparations sont faites en moins de 20 minutes. Stock immédiat sur les pièces courantes." },
    { jp: "質", t: "Qualité", d: "Pièces certifiées OEM ou supérieures uniquement. Pas d'écrans bas de gamme aftermarket." },
    { jp: "保", t: "Garantie", d: "6 mois sur toutes les interventions, pièce ET main-d'œuvre. Si le défaut revient, on le reprend." },
  ];

const milestones = [
    { y: "2019", t: "Ouverture de l'atelier", d: "Repair Ninja s'installe à Bastille, dans une petite boutique au 7 Rue de la Cerisaie." },
    { y: "2021", t: "Lancement service coursier", d: "Repair Ninja Home démarre — récupération à vélo dans tout Paris intra-muros." },
    { y: "2023", t: "+170 avis 5/5", d: "La note Google atteint 5/5 — la communauté de fidèles dépasse 1500 clients." },
    { y: "2025", t: "Programme Shuriken Points", d: "Lancement de la fidélité : 1€ dépensé = 1 Shuriken Point = 5 centimes en cagnotte." },
    { y: "2026", t: "Repair Ninja Online", d: "Le site marchand ouvre — devis instantanés, suivi en temps réel, espace client." },
  ];

return (
    <div className="paper">
      <div className="page-hero">
        <span className="kanji">忍</span>
        <div className="container">
          <span className="kicker" style={{ color: "var(--crimson)" }}>QUI SOMMES-NOUS</span>
          <h1>Une famille,<br/>un atelier,<br/><em style={{ fontStyle: "italic", color: "var(--crimson)" }}>un métier.</em></h1>
          <p>Repair Ninja est une entreprise familiale indépendante installée à Bastille depuis 2019. On répare iPhone, MacBook, iPad et consoles — vite, bien, sans bullshit.</p>
        </div>
      </div>

<section className="section section--cream">
        <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">私たち · NOTRE HISTOIRE</span>
              <h2 style={{ marginTop: 16 }}>Une obsession : <em style={{ fontStyle: "italic", color: "var(--crimson)" }}>la réparation invisible.</em></h2>
              <p className="lead" style={{ marginTop: 24 }}>
                Tout a commencé en 2019, quand nous avons ouvert un petit atelier rue de la Cerisaie. L'idée ? Casser les codes du secteur : des prix justes affichés, un diagnostic toujours gratuit, et une qualité de réparation qui rivalise avec les SAV officiels.
              </p>
              <p style={{ marginTop: 16, color: "var(--muted)", lineHeight: 1.6 }}>
                Aujourd'hui, plus de 12 000 réparations plus tard et avec une note Google de {info.rating.score}/5 sur {info.rating.count}+ avis, nous restons fidèles à cette vision : la confiance ne se décrète pas, elle se gagne — un appareil à la fois.
              </p>
              <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="about-stats">
                <div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 40, color: "var(--crimson)" }}>12k<em style={{ fontSize: 16, fontStyle: "normal" }}>+</em></div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted)", textTransform: "uppercase", letterSpacing: 0.15 }}>Réparations</div>
                </div>
                <div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 40, color: "var(--crimson)" }}>{info.rating.score}<em style={{ fontSize: 16, fontStyle: "normal" }}>/5</em></div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted)", textTransform: "uppercase", letterSpacing: 0.15 }}>{info.rating.count}+ avis Google</div>
                </div>
                <div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 40, color: "var(--crimson)" }}>7<em style={{ fontSize: 16, fontStyle: "normal" }}> ans</em></div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted)", textTransform: "uppercase", letterSpacing: 0.15 }}>D'expérience</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

<section className="section section--dark">
        <div className="container">
          <div className="sec-head">
            <div>
              <span className="kicker" style={{ color: "var(--crimson)" }}>価値 · VALEURS</span>
              <h2 style={{ marginTop: 16, color: "var(--cream)" }}>Quatre piliers,<br/>zéro compromis.</h2>
            </div>
            <div className="aside" style={{ color: "var(--muted-2)" }}>Ce sur quoi on ne transige pas, jamais.</div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, marginTop: 64, border: "1px solid var(--ink-line)" }} className="coursier-steps">
            {values.map((v, i) => (
              <div key={v.t} style={{ padding: 40, borderRight: i < 3 ? "1px solid var(--ink-line)" : "0", background: "var(--ink-2)" }} className="coursier-step">
                <div style={{ fontFamily: "var(--font-jp)", fontSize: 56, color: "var(--crimson)", marginBottom: 16, lineHeight: 1 }}>{v.jp}</div>
                <h4 style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 400, color: "var(--cream)" }}>{v.t}</h4>
                <p style={{ color: "var(--muted-2)", fontSize: 14, lineHeight: 1.5, marginTop: 12 }}>{v.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

<section className="section section--cream">
        <div className="container">
          <div className="sec-head">
            <div>
              <span className="kicker">歴史 · CHRONOLOGIE</span>
              <h2 style={{ marginTop: 16 }}>De 2019 à<br/><em style={{ fontStyle: "italic", color: "var(--crimson)" }}>aujourd'hui.</em></h2>
            </div>
            <div className="aside">Quelques jalons clés de l'histoire de Repair Ninja Bastille.</div>
          </div>
          <div style={{ marginTop: 64, position: "relative" }}>
            <div style={{ position: "absolute", left: 89, top: 0, bottom: 0, width: 2, background: "rgba(10,9,8,0.08)" }} className="tl-line" />
            {milestones.map((m, i) => (
              <div key={m.y} style={{ display: "grid", gridTemplateColumns: "80px 40px 1fr", gap: 16, alignItems: "start", paddingBottom: 40, position: "relative" }} className="tl-item">
                <div style={{ fontFamily: "var(--font-display)", fontSize: 32, color: "var(--crimson)", lineHeight: 1 }}>{m.y}</div>
                <div style={{ position: "relative", display: "flex", justifyContent: "center", paddingTop: 6 }}>
                  <div style={{ width: 14, height: 14, borderRadius: "50%", background: "var(--crimson)", boxShadow: "0 0 0 4px var(--cream)" }} />
                </div>
                <div style={{ paddingTop: 2 }}>
                  <h4 style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 400, marginBottom: 6 }}>{m.t}</h4>
                  <p style={{ color: "var(--muted)", fontSize: 14, lineHeight: 1.5, maxWidth: 600 }}>{m.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

<section className="section section--dark" style={{ paddingTop: 80 }}>
        <div className="container" style={{ textAlign: "center", maxWidth: 720 }}>
          <span className="kicker" style={{ color: "var(--crimson)" }}>店舗 · BOUTIQUE</span>
          <h2 style={{ marginTop: 16, color: "var(--cream)" }}>Venez nous rencontrer.</h2>
          <p style={{ marginTop: 24, color: "var(--muted-2)", fontSize: 17, lineHeight: 1.5 }}>
            Le diagnostic est gratuit, avec ou sans rendez-vous. Un café offert pendant que vous attendez.
          </p>
          <div style={{ marginTop: 40, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <a className="btn btn--primary" href="contact.html"><span>Plan d'accès</span><IconArrowRight /></a>
            <a className="btn btn--ghost" href={"tel:" + info.phoneRaw} style={{ color: "var(--cream)" }}>
              <span>{info.phone}</span>
            </a>
          </div>
        </div>
      </section>
    </div>
  );
};

// ============================================
// CONTACT PAGE — detailed with map
// ============================================
const ContactPage = ({ navigate }) => {
  const info = window.RN_INFO;
  const [sent, setSent] = React.useState(false);

return (
    <div className="paper">
      <div className="page-hero">
        <span className="kanji">店</span>
        <div className="container">
          <span className="kicker" style={{ color: "var(--crimson)" }}>NOUS TROUVER · 店</span>
          <h1>Boutique<br/><em style={{ fontStyle: "italic", color: "var(--crimson)" }}>Paris Bastille.</em></h1>
          <p>{info.fullAddress} · {info.metro} · ouvert {info.hours[0].time.split(" ")[0]} à {info.hours[0].time.split(" ").pop()} du lundi au vendredi, {info.hours[1].time.split(" ").pop()} samedi.</p>
        </div>
      </div>

<section className="section section--cream" style={{ paddingTop: 60 }}>
        <div className="container">
          {/* big address block */}
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "stretch", marginBottom: 64 }} className="contact-grid">
            <div style={{ background: "var(--ink)", color: "var(--cream)", padding: 48, borderRadius: 12, position: "relative", overflow: "hidden" }}>
              <span style={{ position: "absolute", right: -40, bottom: -40, fontFamily: "var(--font-jp)", fontSize: 280, color: "rgba(200,16,46,0.08)", lineHeight: 1 }}>店</span>
              <span className="kicker" style={{ color: "var(--crimson)" }}>修理忍者 · BASTILLE</span>
              <h2 style={{ color: "var(--cream)", marginTop: 16, fontSize: "clamp(36px, 4vw, 56px)" }}>{info.address}<br/>{info.city}</h2>
              <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 24, position: "relative", zIndex: 1 }}>
                <a href={"tel:" + info.phoneRaw} style={{ color: "var(--cream)", display: "flex", alignItems: "center", gap: 16, padding: 16, border: "1px solid var(--ink-line)", borderRadius: 8, transition: "all 0.3s" }} className="contact-link">
                  <div style={{ width: 40, height: 40, background: "var(--crimson)", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.37 1.9.72 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.35 1.85.59 2.81.72a2 2 0 011.72 2z"/></svg>
                  </div>
                  <div>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted-2)", letterSpacing: 0.15, textTransform: "uppercase" }}>Téléphone</div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 26, marginTop: 4 }}>{info.phone}</div>
                  </div>
                </a>
                <a href={"mailto:" + info.email} style={{ color: "var(--cream)", display: "flex", alignItems: "center", gap: 16, padding: 16, border: "1px solid var(--ink-line)", borderRadius: 8, transition: "all 0.3s" }} className="contact-link">
                  <div style={{ width: 40, height: 40, background: "var(--crimson)", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 7L12 13L2 7"/></svg>
                  </div>
                  <div>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted-2)", letterSpacing: 0.15, textTransform: "uppercase" }}>Email</div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 22, marginTop: 4 }}>{info.email}</div>
                  </div>
                </a>
                <div style={{ color: "var(--cream)", display: "flex", alignItems: "center", gap: 16, padding: 16, border: "1px solid var(--ink-line)", borderRadius: 8 }}>
                  <div style={{ width: 40, height: 40, background: "var(--crimson)", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                    <IconPin />
                  </div>
                  <div>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted-2)", letterSpacing: 0.15, textTransform: "uppercase" }}>Métro</div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 18, marginTop: 4 }}>{info.metroDetail}</div>
                  </div>
                </div>
              </div>
            </div>

<div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
              <div style={{ background: "var(--cream)", border: "1px solid rgba(10,9,8,0.1)", borderRadius: 12, padding: 32 }}>
                <span className="kicker">時間 · HORAIRES</span>
                <div style={{ marginTop: 20 }}>
                  {info.hours.map((h, i) => (
                    <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "16px 0", borderBottom: i < info.hours.length - 1 ? "1px solid rgba(10,9,8,0.08)" : "0", alignItems: "center" }}>
                      <span style={{ fontWeight: 500, fontSize: 15 }}>{h.days}</span>
                      <strong style={{ fontFamily: "var(--font-display)", fontSize: 22, color: h.time === "Fermé" ? "var(--muted)" : "var(--ink)", fontWeight: 400 }}>{h.time}</strong>
                    </div>
                  ))}
                </div>
                <div style={{ marginTop: 16, padding: 12, background: "var(--cream-2)", borderRadius: 8, fontSize: 12, color: "var(--muted)", display: "flex", alignItems: "center", gap: 8 }}>
                  <Shuriken size={14} style={{ color: "var(--crimson)" }} />
                  <span>Service continu, sans rendez-vous</span>
                </div>
              </div>

<div style={{ background: "var(--crimson)", color: "var(--cream)", borderRadius: 12, padding: 32, position: "relative", overflow: "hidden" }}>
                <Shuriken size={180} className="shuriken-rotate" style={{ position: "absolute", right: -40, bottom: -40, color: "rgba(255,255,255,0.1)" }} />
                <span style={{ fontFamily: "var(--font-jp)", fontSize: 14, letterSpacing: 0.3, color: "rgba(255,255,255,0.7)" }}>緊急 · URGENCE</span>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 400, marginTop: 8, position: "relative", zIndex: 1 }}>Vous êtes pressé ?</h3>
                <p style={{ fontSize: 14, marginTop: 8, opacity: 0.9, position: "relative", zIndex: 1 }}>Appelez-nous, on tient un créneau express pour vous.</p>
                <a href={"tel:" + info.phoneRaw} style={{ marginTop: 16, display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--font-display)", fontSize: 22, color: "var(--cream)", position: "relative", zIndex: 1 }}>
                  {info.phone} <IconArrowRight />
                </a>
              </div>
            </div>
          </div>

{/* map */}
          <div style={{ background: "var(--ink)", borderRadius: 12, overflow: "hidden", border: "1px solid var(--ink-line)" }}>
            <iframe
              src={"https://www.openstreetmap.org/export/embed.html?bbox=" + info.bbox + "&layer=mapnik&marker=" + info.geo.lat + "," + info.geo.lng}
              style={{ width: "100%", height: 480, border: 0, display: "block", filter: "grayscale(0.4)" }}
              loading="lazy"
              title="Plan d'accès Repair Ninja Bastille"
            />
            <div style={{ padding: 24, background: "var(--ink-2)", color: "var(--cream)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
              <div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted-2)", letterSpacing: 0.15, textTransform: "uppercase" }}>Coordonnées GPS</div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 14, marginTop: 4 }}>{info.geo.lat}, {info.geo.lng}</div>
              </div>
              <a className="btn btn--primary btn--small" href={"https://www.google.com/maps/dir/?api=1&destination=" + encodeURIComponent(info.fullAddress)} target="_blank" rel="noopener">
                <span>Itinéraire Google Maps</span><IconArrowRight />
              </a>
            </div>
          </div>

{/* form */}
          <div style={{ marginTop: 80 }}>
            <div className="sec-head">
              <div>
                <span className="kicker">手紙 · ÉCRIRE</span>
                <h2 style={{ marginTop: 16 }}>Ou écrivez-nous.</h2>
              </div>
              <div className="aside">Réponse sous 4h en moyenne aux heures ouvrées. Le formulaire arrive directement dans la boîte mail de l'atelier.</div>
            </div>
            <form className="contact-form" style={{ marginTop: 48, maxWidth: 720 }} onSubmit={async (e) => {
              e.preventDefault();
              const fd = new FormData(e.target);
              try {
                const db = window.SUPABASE;
                const { data: { session } } = await db.auth.getSession();
                await db.from("client_requests").insert({
                  type:      "contact",
                  auth_uid:  session?.user?.id || null,
                  name:      fd.get("name"),
                  email:     fd.get("email") || session?.user?.email || null,
                  phone:     fd.get("phone") || null,
                  notes:     `[${fd.get("subject")}] ${fd.get("message")}`,
                });
              } catch (err) { console.error("[RN] contact request:", err); }
              setSent(true);
              setTimeout(() => setSent(false), 3000);
            }}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }} className="form-2col">
                <div className="field">
                  <label>Nom complet</label>
                  <input name="name" type="text" required />
                </div>
                <div className="field">
                  <label>Email</label>
                  <input name="email" type="email" required />
                </div>
                <div className="field">
                  <label>Téléphone</label>
                  <input name="phone" type="tel" placeholder="optionnel" />
                </div>
                <div className="field">
                  <label>Sujet</label>
                  <select name="subject" required>
                    <option>Demande de devis</option>
                    <option>Question sur une réparation</option>
                    <option>Service coursier à domicile</option>
                    <option>Suivi de réparation</option>
                    <option>Partenariat / pro</option>
                    <option>Autre</option>
                  </select>
                </div>
              </div>
              <div className="field" style={{ marginTop: 0 }}>
                <label>Message</label>
                <textarea name="message" required style={{ minHeight: 140 }} placeholder="Décrivez votre problème, votre appareil, et tout ce qu'on doit savoir..." />
              </div>
              <button className="btn btn--primary" type="submit" style={{ marginTop: 8, width: "100%", justifyContent: "center" }}>
                <span>{sent ? "Message envoyé ✓" : "Envoyer"}</span>
                {!sent && <IconArrowRight />}
              </button>
            </form>
          </div>
        </div>
      </section>
    </div>
  );
};

// ============================================
// MENTIONS LÉGALES
// ============================================
const MentionsPage = ({ navigate }) => {
  const info = window.RN_INFO;
  const sections = [
    {
      id: "legal",
      jp: "法",
      title: "Mentions légales",
      body: [
        ["Éditeur du site", `${info.name}, ${info.fullAddress}. Téléphone : ${info.phone} · Email : ${info.email}. SIRET : ${info.siret} · TVA intracommunautaire : ${info.tva}.`],
        ["Directeur de la publication", "[À compléter] — Le responsable légal de Repair Ninja."],
        ["Hébergement", "Cloudflare, Inc. — 101 Townsend Street, San Francisco, CA 94107, États-Unis."],
        ["Propriété intellectuelle", "L'ensemble du contenu (textes, images, logo, identité visuelle « Repair Ninja ») est protégé. Toute reproduction sans autorisation écrite préalable est interdite."],
        ["Crédits", "Design & développement : interne · Polices : Noto Serif Display, Inter, JetBrains Mono, Noto Serif JP (Google Fonts). Cartographie : OpenStreetMap contributors."],
      ],
    },
    {
      id: "cgv",
      jp: "売",
      title: "Conditions Générales de Vente",
      body: [
        ["Objet", "Les présentes CGV régissent la vente d'accessoires et de prestations de réparation par Repair Ninja, que ce soit en boutique, par le service coursier ou en ligne."],
        ["Prix", "Les prix affichés sont TTC, en euros, valables à la date de la commande. Les frais éventuels de coursier sont précisés au moment du devis."],
        ["Devis", "Tout diagnostic est gratuit. Le devis est valable 15 jours. Une réparation engagée vaut acceptation du devis."],
        ["Délais de réparation", "Les délais annoncés (20 min, 24h, 2-5 jours selon panne) sont indicatifs. Repair Ninja s'engage à informer le client de tout retard significatif."],
        ["Paiement", "Carte bancaire, espèces, virement, Apple Pay, Google Pay. Pour le service coursier, paiement après vérification de la réparation."],
        ["Garantie", "Toutes les réparations sont garanties 6 mois pièces et main-d'œuvre. La garantie ne couvre pas un nouveau choc, une oxydation postérieure, ni une intervention par un tiers."],
        ["Rétractation", "Pour les ventes à distance d'accessoires, le client dispose de 14 jours pour se rétracter. Les prestations de réparation déjà exécutées ne sont pas rétractables."],
        ["Litiges", "Tout litige relève des tribunaux compétents de Paris. Le client peut également saisir le médiateur de la consommation."],
      ],
    },
    {
      id: "privacy",
      jp: "秘",
      title: "Confidentialité & RGPD",
      body: [
        ["Données collectées", "Nous collectons uniquement les données strictement nécessaires : nom, email, téléphone, adresse (pour le service coursier), informations sur l'appareil à réparer, historique de réparations et achats."],
        ["Finalité", "Gestion du compte client, traçabilité des réparations, suivi des Shuriken Points, communications transactionnelles. Aucune revente de données à des tiers."],
        ["Synchronisation POS", "Si vous créez un compte avec un email déjà connu de notre boutique, votre historique et vos points sont synchronisés automatiquement et de manière sécurisée depuis notre système de caisse."],
        ["Cookies", "Nous n'utilisons que des cookies techniques strictement nécessaires (session, panier, préférences). Aucun cookie publicitaire, aucun pixel de tracking."],
        ["Conservation", "Les données du compte sont conservées tant que le compte est actif. Les données de réparation sont conservées 6 mois après l'expiration de la garantie."],
        ["Vos droits", `Vous disposez d'un droit d'accès, de rectification, de suppression et de portabilité. Pour exercer ces droits : ${info.email}.`],
      ],
    },
  ];

return (
    <div className="paper">
      <div className="page-hero">
        <span className="kanji">法</span>
        <div className="container">
          <span className="kicker" style={{ color: "var(--crimson)" }}>INFORMATIONS LÉGALES</span>
          <h1>Mentions, CGV<br/>& <em style={{ fontStyle: "italic", color: "var(--crimson)" }}>confidentialité.</em></h1>
          <p>Tout ce que vous devez savoir sur Repair Ninja, sa politique commerciale et la gestion de vos données. Lecture rapide, dialecte humain.</p>
          <div style={{ marginTop: 32, display: "flex", gap: 8, flexWrap: "wrap" }}>
            {sections.map((s) => (
              <a key={s.id} href={"#" + s.id} className="shop-filter" style={{ background: "rgba(245,241,232,0.1)", color: "var(--cream)", padding: "10px 18px", borderRadius: 100 }}>
                <span style={{ fontFamily: "var(--font-jp)", color: "var(--crimson)" }}>{s.jp}</span> {s.title}
              </a>
            ))}
          </div>
        </div>
      </div>

<section className="section section--cream">
        <div className="container" style={{ maxWidth: 920 }}>
          {sections.map((sec, si) => (
            <div key={sec.id} id={sec.id} style={{ marginTop: si === 0 ? 0 : 80 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 24, marginBottom: 32 }}>
                <div style={{ fontFamily: "var(--font-jp)", fontSize: 72, color: "var(--crimson)", lineHeight: 1 }}>{sec.jp}</div>
                <div>
                  <span className="kicker">SECTION {String(si + 1).padStart(2, "0")}</span>
                  <h2 style={{ marginTop: 8, fontSize: "clamp(30px, 3.5vw, 48px)" }}>{sec.title}</h2>
                </div>
              </div>
              <div style={{ display: "grid", gap: 24 }}>
                {sec.body.map(([h, p], i) => (
                  <div key={i} style={{ background: "var(--cream)", border: "1px solid rgba(10,9,8,0.08)", borderRadius: 8, padding: 24 }}>
                    <h4 style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 400, marginBottom: 8, color: "var(--crimson)" }}>{h}</h4>
                    <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--ink)" }}>{p}</p>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { ServicesPage, CoursierPage, AboutPage, ContactPage, MentionsPage });

Tout ce que nous
savons réparer.

{g.title}

Diagnostic gratuit,
en boutique ou en ligne.

Le ninja vient
jusqu'à vous.

Quatre étapes,
zéro déplacement.

{s.t}

Frais de coursier
transparents.

Réservez un
retrait.

Tout ce que noussavons réparer.

{g.title}

Diagnostic gratuit,en boutique ou en ligne.

Le ninja vientjusqu'à vous.

Quatre étapes,zéro déplacement.

{s.t}

Frais de coursiertransparents.

Réservez unretrait.

Tout ce que nous
savons réparer.

Diagnostic gratuit,
en boutique ou en ligne.

Le ninja vient
jusqu'à vous.

Quatre étapes,
zéro déplacement.

Frais de coursier
transparents.

Réservez un
retrait.