// Contact — carte WA, adresse + horaires, formulaire → WhatsApp, réseaux sociaux
const { Eyebrow, Card, Chip, Field, Button, WaButton, WaIcon, OpenBadge, ZP_HOURS, SocialLinks } = window.ZedPhoneDesignSystem_1174ff;
const SocialLinksSafe = SocialLinks || (() => null);
const waLink = (msg, number = "213770876120") => `https://wa.me/${number}?text=${encodeURIComponent(msg)}`;

const HOURS_SRC = ZP_HOURS || [
  { day: "Lundi", open: 9, close: 21 }, { day: "Mardi", open: 9, close: 21 }, { day: "Mercredi", open: 9, close: 21 },
  { day: "Jeudi", open: 9, close: 21 }, { day: "Vendredi", open: 9, close: 17 }, { day: "Samedi", open: 9, close: 21 },
  { day: "Dimanche", open: 9, close: 21 },
];
const OpenBadgeSafe = OpenBadge || (() => null);
const GMAPS_LINK = "https://maps.app.goo.gl/4U4wbMQkDneH44Yz6"; // fiche Google Maps officielle de la boutique
const fmtH = (h) => { const hh = Math.floor(h); const mm = Math.round((h - hh) * 60); return mm ? `${hh}h${String(mm).padStart(2, "0")}` : `${hh}h`; };
const HOURS = HOURS_SRC.map((d) => ({ day: d.day, h: d.open === null ? "Fermé" : `${fmtH(d.open)} – ${fmtH(d.close)}` }));


function ContactScreen() {
  const [name, setName] = React.useState("");
  const [device, setDevice] = React.useState("");
  const [type, setType] = React.useState("Réparation");
  const [msg, setMsg] = React.useState("");
  const todayIdx = (new Date().getDay() + 6) % 7;

  const submit = (e) => {
    e.preventDefault();
    const text = `Bonjour Zed Phone 👋\nJe suis ${name || "—"}\nAppareil : ${device || "—"}\nDemande : ${type}\n${msg}`;
    window.open(waLink(text), "_blank");
  };

  return (
    <div>
      <section className="zps-container zps-section-sm">
        <Eyebrow>Contact</Eyebrow>
        <h1 className="zps-h1">On t'écoute</h1>
        <p style={{ color: "var(--text-2)", maxWidth: 500, margin: "8px 0 0" }}>
          Le plus rapide : WhatsApp. Sinon passe nous voir à la boutique — en face de la poste, El Kseur.
        </p>
      </section>

      <section className="zps-container zps-section-sm" style={{ paddingTop: 8 }}>
        <div className="zps-contact-grid">
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {/* WA direct */}
            <a href={waLink("Bonjour Zed Phone 👋")} target="_blank" rel="noopener" style={{ textDecoration: "none" }}>
              <Card elevated style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <span style={{ width: 48, height: 48, borderRadius: "50%", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", background: "var(--accent-soft)", border: "1px solid var(--accent-border)", color: "var(--accent)" }}>
                  <WaIcon size={22} />
                </span>
                <span style={{ flex: 1 }}>
                  <span style={{ display: "block", fontFamily: "var(--font-display)", fontWeight: 600, color: "var(--text-1)" }}>WhatsApp Zed Phone</span>
                  <span style={{ display: "block", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-3)", marginTop: 2 }}>Réponse en moins de 15 minutes</span>
                </span>
                <span className="material-symbols-outlined" style={{ color: "var(--accent)" }}>arrow_forward</span>
              </Card>
            </a>

            {/* Adresse */}
            <Card hover={false}>
              <Eyebrow style={{ letterSpacing: "0.15em" }}>Notre adresse</Eyebrow>
              <div className="zps-map" style={{ borderRadius: 12, overflow: "hidden", aspectRatio: "16 / 10", position: "relative", background: "var(--bg-section)" }}>
                <iframe
                  src="https://www.google.com/maps?q=36.6817307,4.8514402&z=17&output=embed"
                  style={{ border: 0, position: "absolute", inset: 0, width: "100%", height: "100%" }}
                  loading="lazy"
                  allowFullScreen
                  referrerPolicy="no-referrer-when-downgrade"
                  title="Localisation Zed Phone El Kseur"
                ></iframe>
                <span style={{ position: "absolute", bottom: 10, left: 10, display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-mono)", fontSize: 10, color: "#E4E2E2", background: "rgba(0,9,18,.75)", backdropFilter: "blur(8px)", padding: "5px 12px", borderRadius: 999, pointerEvents: "none" }}>
                  <span className="material-symbols-outlined" style={{ fontSize: 14, color: "var(--gold-500)" }}>location_on</span>
                  El Kseur, Béjaïa — en face de la poste
                </span>
              </div>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, marginTop: 14 }}>
                <p style={{ margin: 0, fontSize: 13, color: "var(--text-2)" }}>En face de la poste, El Kseur</p>
                <a
                  href={GMAPS_LINK}
                  target="_blank"
                  rel="noopener"
                  style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em", color: "var(--accent)", textDecoration: "none", background: "var(--accent-soft)", border: "1px solid var(--accent-border)", borderRadius: 999, padding: "8px 14px", whiteSpace: "nowrap" }}
                >
                  <span className="material-symbols-outlined" style={{ fontSize: 15 }}>near_me</span>
                  Itinéraire
                </a>
              </div>
            </Card>
            <Card hover={false}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
                <Eyebrow style={{ letterSpacing: "0.15em", margin: 0 }}>Horaires d'ouverture</Eyebrow>
                <OpenBadgeSafe compact />
              </div>
              <div>
                {HOURS.map((r, i) => (
                  <div key={r.day} style={{ display: "flex", justifyContent: "space-between", padding: "7px 0", borderBottom: i < HOURS.length - 1 ? "1px solid var(--border-subtle)" : "none" }}>
                    <span style={{ fontSize: 13.5, color: i === todayIdx ? "var(--accent)" : "var(--text-2)", fontWeight: i === todayIdx ? 600 : 400 }}>{r.day}</span>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: r.h === "Fermé" ? "var(--text-3)" : i === todayIdx ? "var(--accent)" : "var(--text-1)" }}>{r.h}</span>
                  </div>
                ))}
              </div>
            </Card>

            {/* Réseaux */}
            <Card hover={false}>
              <Eyebrow style={{ letterSpacing: "0.15em" }}>Suis-nous</Eyebrow>
              <SocialLinksSafe variant="detailed" />
            </Card>
          </div>

          {/* Formulaire */}
          <Card hover={false} style={{ alignSelf: "start" }}>
            <Eyebrow style={{ letterSpacing: "0.15em" }}>Message</Eyebrow>
            <h2 className="zps-h3" style={{ margin: "0 0 6px" }}>Envoie-nous un message</h2>
            <p style={{ margin: "0 0 18px", fontSize: 13, color: "var(--text-2)" }}>
              Remplis ce formulaire : ton message s'enverra automatiquement sur notre WhatsApp. Aucune donnée n'est stockée.
            </p>
            <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <Field label="Ton prénom" placeholder="Ahmed" value={name} onChange={(e) => setName(e.target.value)} />
              <Field label="Ton appareil" placeholder="ex: iPhone 13, HP Pavilion…" value={device} onChange={(e) => setDevice(e.target.value)} />
              <div>
                <p style={{ margin: "0 0 8px", fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--text-3)" }}>Type de demande</p>
                <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                  {["Réparation", "Achat", "Échange", "Autre"].map((t) => (
                    <Chip key={t} active={type === t} onClick={() => setType(t)}>{t}</Chip>
                  ))}
                </div>
              </div>
              <Field label="Décris ta demande" textarea placeholder="Décris le problème ou ta demande en détail…" value={msg} onChange={(e) => setMsg(e.target.value)} />
              <Button type="submit" icon="send" style={{ width: "100%" }}>Envoyer sur WhatsApp</Button>
            </form>
          </Card>
        </div>
      </section>
    </div>
  );
}

window.ContactScreen = ContactScreen;