// Accueil — hero cinématique + propositions de valeur + bento services + stats + CTA
const { Wordmark, Button, Badge, Eyebrow, Card, StatBlock, WaButton, SocialLinks } = window.ZedPhoneDesignSystem_1174ff;
const SocialLinksSafe = SocialLinks || (() => null);

const REVIEWS = [
  { text: "Écran d'iPhone 11 changé en moins d'une heure, comme neuf.", name: "Yanis B.", tag: "Réparation écran" },
  { text: "J'ai pris un iPhone 13 testé et garanti — aucun souci depuis.", name: "Lydia M.", tag: "Achat boutique" },
  { text: "Khedma nqiya. Sérieux, rapides, et les prix annoncés sont respectés.", name: "Sofiane A.", tag: "Diagnostic" },
];

function HomeScreen({ onNavigate }) {
  return (
    <div>
      {/* HERO */}
      <section className="zps-hero">
        <img className="zp-kenburns-pan zps-hero-img" src="./assets/images/storefront.png" alt="Boutique Zed Phone de nuit" />
        <div className="zps-hero-scrim"></div>
        <div className="zps-container zps-hero-content">
          <p className="zp-eyebrow" style={{ display: "flex", alignItems: "center", gap: 6, letterSpacing: "0.25em" }}>
            <span className="material-symbols-outlined" style={{ fontSize: 14 }}>location_on</span>
            El Kseur, Béjaïa, Algérie
          </p>
          <Wordmark size="hero" as="h1" style={{ display: "block", margin: "8px 0 10px", color: "#F2EFE9" }} />
          <p className="zps-hero-sub">Vente &amp; Réparation — Téléphones · Laptops · Accessoires</p>
          <p className="zps-hero-ar zp-arabic">نبيعو، نصلحو، ونضمنولك ✨</p>
          <p className="zps-hero-body">
            Ton expert téléphonie et informatique à El Kseur. Pièces d'origine, diagnostic express, garantie assurée.
          </p>
          <div className="zps-hero-ctas">
            <WaButton message="Bonjour Zed Phone, j'ai besoin d'une réparation 📱">Réparer mon appareil</WaButton>
            <Button variant="ghost" onClick={() => onNavigate("boutique")}>Voir la boutique</Button>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 22 }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--gold-300)", whiteSpace: "nowrap" }}>Suis-nous</span>
            <span style={{ width: 24, height: 1, background: "var(--accent-border)" }}></span>
            <SocialLinksSafe size={38} />
          </div>
        </div>
      </section>

      {/* VALUE PROPS */}
      <section className="zps-container zps-section">
        <div className="zps-grid3">
          {[
            { icon: "architecture", title: "Expertise Chirurgicale", body: "Chaque intervention traitée avec la précision d'un horloger de luxe." },
            { icon: "verified", title: "Pièces d'Origine", body: "Uniquement des composants certifiés ou de qualité équivalente constructeur." },
            { icon: "security", title: "Garantie 24 mois", body: "Ta tranquillité d'esprit, c'est notre standard absolu de service." },
          ].map((v) => (
            <Card key={v.title} hover={false} style={{ textAlign: "center" }}>
              <span className="material-symbols-outlined zp-fill" style={{ fontSize: 30, color: "var(--accent)" }}>{v.icon}</span>
              <p style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 17, margin: "10px 0 6px" }}>{v.title}</p>
              <p style={{ margin: 0, fontSize: 13.5, color: "var(--text-2)" }}>{v.body}</p>
            </Card>
          ))}
        </div>
      </section>

      {/* SERVICES BENTO */}
      <section className="zps-container zps-section" style={{ paddingTop: 0 }}>
        <Eyebrow>Nos services</Eyebrow>
        <div className="zps-bento">
          <Card watermark="build_circle" style={{ gridColumn: "span 8", minHeight: 200 }}>
            <Eyebrow style={{ letterSpacing: "0.18em" }}>Restauration</Eyebrow>
            <h2 className="zps-h2">Réparation de Précision</h2>
            <p className="zps-card-body">Écrans, batteries, micro-soudures. On redonne vie à ton téléphone comme à ton laptop.</p>
            <div style={{ marginTop: 18 }}>
              <Button variant="ghost" size="sm" onClick={() => onNavigate("reparation")}>Voir les tarifs</Button>
            </div>
          </Card>
          <Card watermark="laptop_mac" style={{ gridColumn: "span 4", minHeight: 170 }}>
            <Eyebrow style={{ letterSpacing: "0.18em" }}>Informatique</Eyebrow>
            <h3 className="zps-h3">Laptops Testés &amp; Garantis</h3>
            <p className="zps-card-body">Vente et réparation de PC portables, vérifiés selon nos standards stricts.</p>
            <a href="#" onClick={(e) => { e.preventDefault(); onNavigate("boutique"); }} className="zps-link">Voir la boutique →</a>
          </Card>
          <Card watermark="swap_calls" elevated style={{ gridColumn: "span 4", minHeight: 170 }}>
            <Eyebrow style={{ letterSpacing: "0.18em" }}>Reprise</Eyebrow>
            <h3 className="zps-h3">Échange Zed Phone</h3>
            <p className="zps-card-body">Valorise ton ancien téléphone pour une mise à jour immédiate.</p>
            <WaButton variant="soft" message="Bonjour Zed Phone, je voudrais connaître la valeur de reprise de mon téléphone 🔄" style={{ marginTop: 12 }}>Demander une estimation</WaButton>
          </Card>
          <Card watermark="display_settings" style={{ gridColumn: "span 8", minHeight: 170 }}>
            <Eyebrow style={{ letterSpacing: "0.18em" }}>Services</Eyebrow>
            <h2 className="zps-h2">Diagnostic &amp; Software</h2>
            <p className="zps-card-body">Optimisation système, récupération de données, déverrouillage réseau.</p>
            <WaButton variant="soft" message="Bonjour Zed Phone, je souhaite un diagnostic de mon appareil 🔍" style={{ marginTop: 18 }}>Demander un diagnostic</WaButton>
          </Card>
        </div>
      </section>

      {/* STATS */}
      <section className="zps-band">
        <div className="zps-container zps-stats">
          <StatBlock value="12" label="min Diagnostic" />
          <StatBlock value="98" label="% Réparable" />
          <StatBlock value="15k+" label="Interventions" />
          <StatBlock value="24" label="mois Garantie" />
        </div>
      </section>

      {/* AVIS */}
      <section className="zps-container zps-section" style={{ paddingBottom: 8 }}>
        <Eyebrow>Ils nous font confiance</Eyebrow>
        <div className="zps-grid3">
          {REVIEWS.map((r) => (
            <Card key={r.name} hover={false}>
              <div style={{ display: "flex", gap: 2, marginBottom: 10 }}>
                {[0, 1, 2, 3, 4].map((i) => (
                  <span key={i} className="material-symbols-outlined zp-fill" style={{ fontSize: 15, color: "var(--accent)" }}>star</span>
                ))}
              </div>
              <p style={{ margin: "0 0 14px", fontSize: 14.5, color: "var(--text-1)", lineHeight: 1.6 }}>« {r.text} »</p>
              <p style={{ margin: 0, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-3)" }}>
                {r.name} <span style={{ color: "var(--accent)" }}>· {r.tag}</span>
              </p>
            </Card>
          ))}
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="zps-container zps-section" style={{ textAlign: "center" }}>
        <Eyebrow style={{ display: "inline-block" }}>On est là pour toi</Eyebrow>
        <h2 className="zps-h2" style={{ maxWidth: 480, margin: "8px auto 10px" }}>Ton téléphone mérite le meilleur.</h2>
        <p style={{ color: "var(--text-2)", maxWidth: 420, margin: "0 auto 24px" }}>
          Écris-nous directement sur WhatsApp. On te répond en moins de 15 minutes.
        </p>
        <WaButton message="Bonjour Zed Phone 👋">Écrire sur WhatsApp</WaButton>
      </section>
    </div>
  );
}

window.HomeScreen = HomeScreen;