// Réparation — onglets marques, liste de services, engagements, FAQ
const { Eyebrow, Badge, Card, Chip, ServiceRow, WaButton } = window.ZedPhoneDesignSystem_1174ff;

const REPAIR_SERVICES = {
  iPhone: [
    { name: "Remplacement Écran OLED", duration: "1-2h", warranty: "6 mois" },
    { name: "Nouvelle Batterie", duration: "30 min", warranty: "12 mois" },
    { name: "Réparation Connecteur Lightning / USB-C", duration: "1-2h", warranty: "6 mois" },
    { name: "Micro-soudure Carte Mère", duration: "24-48h", warranty: "3 mois" },
    { name: "Récupération de Données", duration: "Variable", warranty: "" },
  ],
  Samsung: [
    { name: "Remplacement Écran AMOLED", duration: "2-3h", warranty: "6 mois" },
    { name: "Remplacement Batterie", duration: "1h", warranty: "12 mois" },
    { name: "Réparation Connecteur USB-C", duration: "1-2h", warranty: "6 mois" },
    { name: "Flash / Mise à jour logiciel", duration: "1h", warranty: "" },
  ],
  Xiaomi: [
    { name: "Remplacement Écran", duration: "1-2h", warranty: "6 mois" },
    { name: "Remplacement Batterie", duration: "30 min", warranty: "12 mois" },
    { name: "Flash MIUI / ROM", duration: "1h", warranty: "" },
  ],
  Laptops: [
    { name: "Remplacement Écran / Dalle", duration: "1-3h", warranty: "6 mois" },
    { name: "Remplacement Clavier", duration: "1-2h", warranty: "6 mois" },
    { name: "Upgrade SSD / RAM", duration: "1h", warranty: "12 mois" },
    { name: "Nettoyage + Pâte Thermique", duration: "1h", warranty: "3 mois" },
    { name: "Réinstallation Système", duration: "1-2h", warranty: "" },
  ],
};

const FAQS = [
  { q: "Combien coûte le diagnostic ?", a: "Le diagnostic est entièrement gratuit et sans engagement. On identifie le problème, on te donne un devis clair, et tu décides." },
  { q: "Combien de temps prend une réparation ?", a: "La majorité des réparations courantes (écran, batterie, connecteur) sont faites en 1 à 3 heures. Micro-soudures et commandes de pièces : 24 à 72 heures." },
  { q: "Vous utilisez des pièces d'origine ?", a: "Oui, uniquement des pièces d'origine ou de qualité équivalente constructeur. Chaque pièce est vérifiée avant installation." },
  { q: "Je peux récupérer mes données si mon appareil est cassé ?", a: "Dans la plupart des cas, oui. Même écran cassé ou appareil qui ne s'allume plus, on peut souvent récupérer photos, contacts et données." },
];

function RepairScreen() {
  const [brand, setBrand] = React.useState("iPhone");
  const [openFaq, setOpenFaq] = React.useState(-1);
  const brandIcons = { iPhone: "phone_iphone", Samsung: "smartphone", Xiaomi: "smartphone", Laptops: "laptop_mac" };

  return (
    <div>
      <section className="zps-container zps-section-sm">
        <Eyebrow>Zed Phone</Eyebrow>
        <h1 className="zps-h1">Réparation Toutes Marques</h1>
        <p style={{ color: "var(--text-2)", maxWidth: 540, margin: "8px 0 0" }}>
          Diagnostic gratuit, pièces d'origine, garantie incluse. On répare ce que les autres refusent — téléphones et laptops.
        </p>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 18 }}>
          <Badge>Diagnostic Gratuit</Badge>
          <Badge>Pièces d'Origine</Badge>
          <Badge>Garantie Incluse</Badge>
          <Badge>Devis Sans Engagement</Badge>
        </div>
      </section>

      <section className="zps-container" style={{ paddingBottom: 8 }}>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          {Object.keys(REPAIR_SERVICES).map((b) => (
            <Chip key={b} active={b === brand} onClick={() => setBrand(b)}>{b}</Chip>
          ))}
        </div>
      </section>

      <section className="zps-container zps-section-sm">
        <Card hover={false} style={{ paddingTop: 8, paddingBottom: 8 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 0", borderBottom: "1px solid var(--border-subtle)" }}>
            <div>
              <p style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 17 }}>{brand}</p>
              <p style={{ margin: "2px 0 0", fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-3)" }}>
                {brand === "Laptops" ? "Toutes marques : HP, Dell, Lenovo, Asus, Apple…" : "Tous modèles, récents et anciens"}
              </p>
            </div>
            <span className="material-symbols-outlined" style={{ fontSize: 28, color: "var(--accent)" }}>{brandIcons[brand]}</span>
          </div>
          {REPAIR_SERVICES[brand].map((s, i) => (
            <ServiceRow
              key={s.name}
              name={s.name}
              duration={s.duration}
              warranty={s.warranty}
              style={i === REPAIR_SERVICES[brand].length - 1 ? { borderBottom: "none" } : undefined}
            />
          ))}
        </Card>

        <Card elevated hover={false} style={{ marginTop: 20, display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
          <div style={{ minWidth: 220, flex: 1 }}>
            <p style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 600 }}>Tu ne trouves pas ta panne ?</p>
            <p style={{ margin: "4px 0 0", fontSize: 13.5, color: "var(--text-2)" }}>Envoie-nous une photo ou décris le problème. On te répond en moins de 15 minutes.</p>
          </div>
          <WaButton message="Bonjour Zed Phone 🔧, je voudrais un devis pour une réparation">Demander un devis</WaButton>
        </Card>
      </section>

      <section className="zps-container zps-section-sm">
        <Eyebrow>Questions fréquentes</Eyebrow>
        <div style={{ display: "flex", flexDirection: "column", gap: 8, maxWidth: 680 }}>
          {FAQS.map((f, i) => (
            <div key={i} style={{ border: "1px solid var(--border-subtle)", borderRadius: 12, overflow: "hidden" }}>
              <button
                onClick={() => setOpenFaq(openFaq === i ? -1 : i)}
                style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, padding: "14px 16px", background: "transparent", border: "none", cursor: "pointer", textAlign: "left", color: "var(--text-1)" }}
              >
                <span style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 14.5 }}>{f.q}</span>
                <span className="material-symbols-outlined" style={{ fontSize: 20, color: "var(--text-3)", transform: openFaq === i ? "rotate(180deg)" : "none", transition: "transform .3s var(--ease-smooth)" }}>expand_more</span>
              </button>
              <div style={{ maxHeight: openFaq === i ? 200 : 0, overflow: "hidden", transition: "max-height .35s var(--ease-smooth)" }}>
                <p style={{ margin: 0, padding: "0 16px 14px", fontSize: 13.5, color: "var(--text-2)", lineHeight: 1.65 }}>{f.a}</p>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

window.RepairScreen = RepairScreen;