// À propos — l'histoire, les engagements, la spécialité iPhone
const { Eyebrow, Card, Badge, StatBlock, WaButton, Wordmark } = window.ZedPhoneDesignSystem_1174ff;

function AboutScreen() {
  return (
    <div>
      <section className="zps-container zps-section-sm">
        <Eyebrow>À propos</Eyebrow>
        <h1 className="zps-h1">La boutique derrière l'enseigne</h1>
        <p style={{ color: "var(--text-2)", maxWidth: 560, margin: "8px 0 0" }}>
          Zed Phone a ouvert ses portes cette année à El Kseur, en face de la poste — avec une idée simple :
          faire les choses sérieusement. Pas de pièces douteuses, pas de promesses en l'air.
        </p>
      </section>

      <section className="zps-container zps-section-sm" style={{ paddingTop: 8 }}>
        <div className="zps-about-grid">
          <div style={{ borderRadius: "var(--radius-card)", overflow: "hidden", position: "relative", minHeight: 260 }} className="zp-shimmer">
            <img src="./assets/images/zedphone.jpg" alt="La boutique Zed Phone, El Kseur" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,9,18,.65), transparent 55%)" }}></div>
            <div style={{ position: "absolute", bottom: 16, left: 16 }}>
              <Wordmark size="lg" style={{ color: "#F2EFE9" }} />
              <p style={{ margin: "4px 0 0", fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.15em", textTransform: "uppercase", color: "var(--gold-300)" }}>El Kseur · depuis 2026</p>
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <Card hover={false} watermark="phone_iphone">
              <Eyebrow style={{ letterSpacing: "0.15em" }}>Notre spécialité</Eyebrow>
              <h3 className="zps-h3">L'iPhone, c'est notre terrain</h3>
              <p className="zps-card-body">
                De la micro-soudure carte mère au remplacement d'écran OLED, on maîtrise chaque génération d'iPhone.
                Les autres marques aussi — mais l'iPhone, c'est là où on excelle.
              </p>
            </Card>
            <Card hover={false} watermark="verified">
              <Eyebrow style={{ letterSpacing: "0.15em" }}>Nos engagements</Eyebrow>
              <p className="zps-card-body" style={{ marginBottom: 12 }}>
                Chaque appareil vendu est inspecté et testé. Chaque réparation est garantie par écrit.
                Si une pièce n'est pas à la hauteur de nos standards, elle ne rentre pas dans ton téléphone.
              </p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                <Badge>Garantie écrite</Badge>
                <Badge>Pièces certifiées</Badge>
                <Badge>Diagnostic gratuit</Badge>
              </div>
            </Card>
          </div>
        </div>
      </section>

      <section className="zps-band">
        <div className="zps-container zps-stats">
          <StatBlock value="2026" label="Ouverture" animate={false} />
          <StatBlock value="100%" label="Appareils testés" />
          <StatBlock value="24" label="mois Garantie max" />
          <StatBlock value="15" label="min pour te répondre" />
        </div>
      </section>

      <section className="zps-container zps-section" style={{ textAlign: "center" }}>
        <h2 className="zps-h2" style={{ maxWidth: 460, margin: "0 auto 10px" }}>Viens nous voir, ou écris-nous.</h2>
        <p style={{ color: "var(--text-2)", maxWidth: 420, margin: "0 auto 24px" }}>
          En face de la poste, El Kseur. Ou direct sur WhatsApp — on te répond vite.
        </p>
        <WaButton message="Bonjour Zed Phone 👋">Écrire sur WhatsApp</WaButton>
      </section>
    </div>
  );
}

window.AboutScreen = AboutScreen;