// ============================================================================
// geneltec-contact-page.jsx — Contact page
// ============================================================================
const { useState, useEffect } = React;
const { InnerNav, PageHero, Footer, SectionTag, ArrowUpRight, Mail, MapPin, Globe, Phone } = window;

const MessageSquare = (p) => (
  <window.Icon {...p}>
    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
  </window.Icon>
);
const Send = (p) => (
  <window.Icon {...p}>
    <path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/>
  </window.Icon>
);
const Instagram = (p) => (
  <window.Icon {...p}>
    <rect width="20" height="20" x="2" y="2" rx="5" ry="5"/>
    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
    <line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/>
  </window.Icon>
);
const Facebook = (p) => (
  <window.Icon {...p}>
    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
  </window.Icon>
);
const Linkedin = (p) => (
  <window.Icon {...p}>
    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/>
    <rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/>
  </window.Icon>
);

const WhatsApp = (p) => (
  <window.Icon {...p}>
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z"/>
  </window.Icon>
);

const CONTACT_INFO = [
  {
    Icon: Phone,
    label: "Téléphone",
    value: "+212 662 12 90 67",
    sub: "Lun–Sam · 8h–19h",
    href: "tel:+212662129067",
    color: "#1AB6E0",
  },
  {
    Icon: WhatsApp,
    label: "WhatsApp",
    value: "+212 662 12 90 67",
    sub: "Réponse rapide garantie",
    href: "https://wa.me/212662129067",
    color: "#25D366",
  },
  {
    Icon: Mail,
    label: "Email",
    value: "geneltec.ouhallab@gmail.com",
    sub: "Réponse sous 24h",
    href: "mailto:geneltec.ouhallab@gmail.com",
    color: "#8B5CF6",
  },
  {
    Icon: MapPin,
    label: "Localisation",
    value: "Mohammedia, Maroc",
    sub: "Intervention nationale",
    href: "https://maps.google.com/?q=Mohammedia+Maroc",
    color: "#EF4444",
  },
];

const SOCIALS = [
  { Icon: Instagram, label: "Instagram", href: "#", color: "#E1306C" },
  { Icon: Facebook, label: "Facebook", href: "#", color: "#1877F2" },
  { Icon: Linkedin, label: "LinkedIn", href: "#", color: "#0A66C2" },
];

const SERVICES_OPTIONS = [
  "Électricité résidentielle",
  "Électricité industrielle",
  "Énergie solaire",
  "Domotique / Smart Home",
  "Sécurité & surveillance",
  "Automatisation / HVAC",
  "Autre",
];

function ContactForm() {
  const [form, setForm] = useState({ name: "", phone: "", email: "", service: "", message: "", budget: "" });
  const [sent, setSent] = useState(false);

  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const handleSubmit = (e) => {
    e.preventDefault();
    const subject = encodeURIComponent("Demande de devis — " + (form.service || "Général"));
    const body = encodeURIComponent(
      `Nom: ${form.name}\nTéléphone: ${form.phone}\nEmail: ${form.email}\nService: ${form.service}\nBudget: ${form.budget}\n\n${form.message}`
    );
    window.location.href = `mailto:geneltec.ouhallab@gmail.com?subject=${subject}&body=${body}`;
    setSent(true);
  };

  const inputStyle = {
    background: "#fff",
    border: "1px solid var(--border)",
    color: "var(--ink-900)",
    borderRadius: "0.75rem",
    padding: "0.75rem 1rem",
    fontSize: "14px",
    width: "100%",
    outline: "none",
    transition: "border-color 0.2s",
  };

  const labelStyle = {
    display: "block",
    fontSize: "11px",
    fontFamily: "var(--font-mono)",
    textTransform: "uppercase",
    letterSpacing: "0.12em",
    color: "var(--neutral-500)",
    marginBottom: "6px",
  };

  if (sent) {
    return (
      <div className="flex flex-col items-center justify-center gap-4 py-16 text-center">
        <div className="w-14 h-14 rounded-full flex items-center justify-center" style={{ background: "var(--brand-50)" }}>
          <Send className="w-6 h-6" style={{ color: "var(--brand-600)" }} strokeWidth={2} />
        </div>
        <h3 className="text-[1.2rem] font-semibold" style={{ color: "var(--ink-900)" }}>Message envoyé !</h3>
        <p className="text-[14px]" style={{ color: "var(--neutral-500)" }}>Nous vous répondrons dans les 24h.</p>
        <button onClick={() => setSent(false)} className="text-[13px] mt-2" style={{ color: "var(--brand-400)" }}>
          Envoyer un autre message
        </button>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-5">
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <label style={labelStyle}>Nom complet *</label>
          <input required style={inputStyle} value={form.name} onChange={set("name")} placeholder="Votre nom" />
        </div>
        <div>
          <label style={labelStyle}>Téléphone *</label>
          <input required style={inputStyle} type="tel" value={form.phone} onChange={set("phone")} placeholder="+212 6XX XX XX XX" />
        </div>
      </div>

      <div>
        <label style={labelStyle}>Email</label>
        <input style={inputStyle} type="email" value={form.email} onChange={set("email")} placeholder="votre@email.com" />
      </div>

      <div>
        <label style={labelStyle}>Service souhaité</label>
        <select style={{ ...inputStyle, cursor: "pointer" }} value={form.service} onChange={set("service")}>
          <option value="">Sélectionnez un service...</option>
          {SERVICES_OPTIONS.map((s) => <option key={s} value={s}>{s}</option>)}
        </select>
      </div>

      <div>
        <label style={labelStyle}>Budget indicatif</label>
        <select style={{ ...inputStyle, cursor: "pointer" }} value={form.budget} onChange={set("budget")}>
          <option value="">Budget approximatif (optionnel)</option>
          <option value="< 10 000 DH">Moins de 10 000 DH</option>
          <option value="10 000 – 50 000 DH">10 000 – 50 000 DH</option>
          <option value="50 000 – 150 000 DH">50 000 – 150 000 DH</option>
          <option value="> 150 000 DH">Plus de 150 000 DH</option>
        </select>
      </div>

      <div>
        <label style={labelStyle}>Décrivez votre projet *</label>
        <textarea
          required
          rows={5}
          style={{ ...inputStyle, resize: "vertical" }}
          value={form.message}
          onChange={set("message")}
          placeholder="Type de bâtiment, surface, travaux à réaliser, contraintes particulières..."
        />
      </div>

      <button
        type="submit"
        className="gl-cta flex items-center justify-center gap-2 rounded-full py-3.5 px-6 font-semibold text-[14px] w-full mt-2"
      >
        Envoyer ma demande
        <ArrowUpRight className="w-4 h-4 text-white" strokeWidth={2} />
      </button>

      <p className="text-[11px] text-center font-mono" style={{ color: "rgba(255,255,255,0.3)" }}>
        Étude gratuite · Réponse sous 24h · Aucun engagement
      </p>
    </form>
  );
}

function App() {
  useEffect(() => {
    const obs = new IntersectionObserver(
      (entries) => entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add("is-in"); }),
      { threshold: 0.1, rootMargin: "0px 0px -60px 0px" }
    );
    document.querySelectorAll(".gl-fade-up").forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  return (
    <div className="min-h-screen flex flex-col" style={{ background: "#f0f0f0" }}>
      <InnerNav />

      {/* Hero: compact banner with direct phone + WhatsApp CTAs */}
      <div className="relative overflow-hidden" style={{ background: "var(--ink-900)", borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
        <div className="absolute pointer-events-none" style={{ right: "-10%", top: "-50%", width: "50%", height: "200%", background: "radial-gradient(closest-side,rgba(26,182,224,0.18),transparent 70%)", filter: "blur(24px)" }} />
        <div className="relative max-w-[1280px] mx-auto px-5 md:px-8 lg:px-12 py-12 md:py-16">
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-8">
            <div>
              <div className="inline-flex items-center gap-2 mb-4">
                <span className="w-6 h-px" style={{ background: "var(--brand-400)" }} />
                <span style={{ color: "var(--brand-400)", fontSize: 11, fontFamily: "monospace", textTransform: "uppercase", letterSpacing: "0.20em", fontWeight: 600 }}>Contactez-nous</span>
              </div>
              <h1 className="font-semibold text-white" style={{ fontSize: "clamp(2rem,4.5vw,3.8rem)", letterSpacing: "-0.03em", lineHeight: 1 }}>
                Parlons de<br /><span style={{ color: "var(--brand-400)", fontStyle: "italic", fontWeight: 500 }}>votre projet</span>
              </h1>
            </div>
            <div className="flex flex-col sm:flex-row gap-3 shrink-0">
              <a href="tel:+212662129067" className="flex items-center gap-3 px-5 py-3.5 rounded-full transition-all hover:bg-white/10" style={{ background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.12)", color: "#fff" }}>
                <div className="w-8 h-8 rounded-full flex items-center justify-center shrink-0" style={{ background: "rgba(26,182,224,0.2)" }}>
                  <Phone className="w-4 h-4" style={{ color: "var(--brand-400)" }} strokeWidth={2} />
                </div>
                <div>
                  <div style={{ fontSize: 10, color: "rgba(255,255,255,0.45)", fontFamily: "monospace", textTransform: "uppercase", letterSpacing: "0.12em" }}>Appel direct</div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>+212 662 12 90 67</div>
                </div>
              </a>
              <a href="https://wa.me/212662129067" target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 px-5 py-3.5 rounded-full" style={{ background: "#25D366", color: "#fff" }}>
                <WhatsApp className="w-5 h-5 shrink-0" strokeWidth={1.75} />
                <div>
                  <div style={{ fontSize: 10, opacity: 0.8, fontFamily: "monospace", textTransform: "uppercase", letterSpacing: "0.12em" }}>Réponse rapide</div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>WhatsApp direct</div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>

      <main className="flex-1 px-3 md:px-5 mt-3 mb-3">
        <div className="rounded-[1.5rem] md:rounded-[2.4rem] p-6 md:p-10 lg:p-12" style={{ background: "#fff" }}>
        <div className="grid grid-cols-1 lg:grid-cols-[1fr_480px] gap-10 xl:gap-16 max-w-[1280px] mx-auto">

          {/* Left: Info */}
          <div className="flex flex-col gap-10">
            {/* Contact cards */}
            <div className="gl-fade-up">
              <SectionTag num="01" label="Coordonnées" />
              <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
                {CONTACT_INFO.map((c) => (
                  <a
                    key={c.label}
                    href={c.href}
                    target={c.href.startsWith("http") ? "_blank" : undefined}
                    rel="noopener noreferrer"
                    className="flex items-center gap-4 p-4 rounded-[1rem] transition-all group hover:border-[var(--brand-200)]"
                    style={{ background: "var(--neutral-50)", border: "1px solid var(--border)" }}
                  >
                    <div className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style={{ background: c.color + "15" }}>
                      <c.Icon className="w-5 h-5" style={{ color: c.color }} strokeWidth={1.75} />
                    </div>
                    <div>
                      <div className="text-[10px] font-mono uppercase tracking-wider mb-0.5" style={{ color: "var(--neutral-400)" }}>{c.label}</div>
                      <div className="text-[13px] font-medium break-all" style={{ color: "var(--ink-900)" }}>{c.value}</div>
                      <div className="text-[11px] mt-0.5" style={{ color: "var(--neutral-500)" }}>{c.sub}</div>
                    </div>
                  </a>
                ))}
              </div>
            </div>

            {/* Zone d'intervention */}
            <div className="gl-fade-up">
              <SectionTag num="02" label="Zone d'intervention" />
              <div className="mt-6 rounded-[1.25rem] p-6" style={{ background: "var(--neutral-50)", border: "1px solid var(--border)" }}>
                <p className="text-[14px] leading-relaxed mb-4" style={{ color: "var(--neutral-600)" }}>
                  Basés à Mohammedia, nous intervenons sur l'ensemble du territoire marocain pour tout type de projet électrique.
                </p>
                <div className="flex flex-wrap gap-2">
                  {["Casablanca", "Rabat", "Marrakech", "Agadir", "Tanger", "Fès", "Meknès", "Oujda", "Mohammedia"].map((city) => (
                    <span key={city} className="px-3 py-1 rounded-full text-[12px] font-mono" style={{ background: "var(--brand-50)", color: "var(--brand-700)" }}>
                      {city}
                    </span>
                  ))}
                </div>
              </div>
            </div>

            {/* Réseaux sociaux */}
            <div className="gl-fade-up">
              <SectionTag num="03" label="Réseaux sociaux" />
              <div className="mt-6 flex items-center gap-3">
                {SOCIALS.map((s) => (
                  <a
                    key={s.label}
                    href={s.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label={s.label}
                    className="w-11 h-11 rounded-xl flex items-center justify-center transition-all"
                    style={{ background: s.color + "18", border: "1px solid " + s.color + "33" }}
                  >
                    <s.Icon className="w-5 h-5" style={{ color: s.color }} strokeWidth={1.75} />
                  </a>
                ))}
                <a
                  href="https://wa.me/212662129067"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-2 px-4 py-2 rounded-full text-[13px] font-semibold transition-all"
                  style={{ background: "#25D366", color: "#fff" }}
                >
                  <WhatsApp className="w-4 h-4" strokeWidth={1.75} />
                  WhatsApp direct
                </a>
              </div>
            </div>
          </div>

          {/* Right: Form */}
          <div className="gl-fade-up">
            <div className="sticky top-6 rounded-[1.5rem] p-6 md:p-8" style={{ background: "var(--neutral-50)", border: "1px solid var(--border)" }}>
              <SectionTag num="04" label="Formulaire de contact" />
              <h2 className="text-[1.3rem] font-semibold mt-4 mb-6" style={{ color: "var(--ink-900)" }}>Demandez votre devis gratuit</h2>
              <ContactForm />
            </div>
          </div>
        </div>
        </div>
      </main>

      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);