const ContactPage = ({ lang }) => {
  const t = (en, id) => lang === "id" ? id : en;
  const [form,     setForm]     = React.useState({ name:"", email:"", subject:"", message:"" });
  const [status,   setStatus]   = React.useState("idle"); // idle | sending | success | error
  const [errorMsg, setErrorMsg] = React.useState("");
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const submit = async () => {
    setErrorMsg("");
    if (!form.name.trim() || !form.email.trim() || !form.subject.trim() || !form.message.trim()) {
      setErrorMsg(t("All fields are required.", "Semua kolom wajib diisi."));
      setStatus("error"); return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) {
      setErrorMsg(t("Invalid email format.", "Format email tidak valid."));
      setStatus("error"); return;
    }
    if (form.message.trim().length < 10) {
      setErrorMsg(t("Message must be at least 10 characters.", "Pesan minimal 10 karakter."));
      setStatus("error"); return;
    }
    setStatus("sending");
    try {
      const res  = await fetch("api/contact.php", {
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body: JSON.stringify(form)
      });
      const data = await res.json();
      if (data.success) {
        setStatus("success");
        setForm({ name:"", email:"", subject:"", message:"" });
      } else {
        setErrorMsg(data.error || t("Failed to send.", "Gagal mengirim pesan."));
        setStatus("error");
      }
    } catch {
      setErrorMsg(t("Connection failed.", "Gagal terhubung ke server."));
      setStatus("error");
    }
  };

  const inputStyle = {
    width:"100%", padding:"12px 14px", background:"#fff",
    border:"1px solid #e8e6e2", fontFamily:"'DM Sans',sans-serif",
    fontSize:13, color:"#111", outline:"none", boxSizing:"border-box",
    transition:"border-color 0.2s", borderRadius:2
  };
  const labelStyle = {
    fontFamily:"'DM Sans',sans-serif", fontSize:10,
    letterSpacing:"0.14em", textTransform:"uppercase",
    color:"#888", display:"block", marginBottom:8, fontWeight:600
  };
  const eyebrowStyle = {
    fontFamily:"'DM Sans',sans-serif", fontSize:10,
    letterSpacing:"0.22em", textTransform:"uppercase",
    color:"#999", margin:"0 0 16px", fontWeight:600
  };
  const linkUnderline = {
    color:"#111", textDecoration:"none",
    borderBottom:"1px solid transparent", transition:"border-color 0.2s"
  };
  const linkHover = e => e.currentTarget.style.borderBottomColor = "#111";
  const linkLeave = e => e.currentTarget.style.borderBottomColor = "transparent";

  // ── Inline SVG icons (premium monochrome) ─────────────────────
  const iconBase = {
    width:18, height:18, viewBox:"0 0 24 24", fill:"none",
    stroke:"#888", strokeWidth:1.5, strokeLinecap:"round", strokeLinejoin:"round",
    style:{ flexShrink:0, marginTop:2 }
  };
  const IconMail = (
    <svg {...iconBase}>
      <rect x="3" y="5" width="18" height="14" rx="2"/>
      <path d="M3 7l9 6 9-6"/>
    </svg>
  );
  const IconPhone = (
    <svg {...iconBase}>
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.58 2.81.7A2 2 0 0 1 22 16.92z"/>
    </svg>
  );
  const IconMapPin = (
    <svg {...iconBase}>
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
      <circle cx="12" cy="10" r="3"/>
    </svg>
  );
  const IconClock = (
    <svg {...iconBase}>
      <circle cx="12" cy="12" r="10"/>
      <path d="M12 6v6l4 2"/>
    </svg>
  );

  const InfoRow = ({ icon, label, children }) => (
    <div style={{ display:"flex", gap:16, marginBottom:28 }}>
      {icon}
      <div style={{ flex:1 }}>
        <p style={{ fontFamily:"'DM Sans',sans-serif", fontSize:10, letterSpacing:"0.18em", textTransform:"uppercase", color:"#888", margin:"0 0 4px", fontWeight:600 }}>
          {label}
        </p>
        <div style={{ fontFamily:"'DM Sans',sans-serif", fontSize:13, color:"#111", lineHeight:1.7 }}>
          {children}
        </div>
      </div>
    </div>
  );

  const sosmed = [
    { name:"Instagram", url:"https://www.instagram.com/lopobya.id/",                          handle:"@lopobya.id" },
    { name:"Facebook",  url:"https://www.facebook.com/profile.php?id=61563034187537",         handle:"Lopobya"    },
    { name:"Shopee",    url:"https://shopee.co.id/lopobya",                                   handle:"shopee.co.id/lopobya" },
  ];

  return (
    <div style={{ paddingTop: 72, minHeight: "100vh", background: "#f9f8f6" }}>

      {/* ── Hero ─────────────────────────────────────────────── */}
      <div style={{ background:"#111", padding:"80px 32px 64px", textAlign:"center" }}>
        <p style={{ fontFamily:"'DM Sans',sans-serif", fontSize:10, letterSpacing:"0.22em", textTransform:"uppercase", color:"#666", margin:"0 0 12px" }}>
          LOPOBYA
        </p>
        <h1 style={{ fontFamily:"'Cormorant Garant',serif", fontSize:"clamp(40px, 5vw, 64px)", fontWeight:400, color:"#f9f8f6", margin:"0 0 16px" }}>
          {t("Get in Touch", "Hubungi Kami")}
        </h1>
        <p style={{ fontFamily:"'DM Sans',sans-serif", fontSize:14, color:"#aaa", maxWidth:540, margin:"0 auto", lineHeight:1.7, fontWeight:300 }}>
          {t(
            "We'd love to hear from you. Send us a message and our team will reply within 1×24 hours on business days.",
            "Tim kami siap membantu menjawab pertanyaan, masukan, atau kebutuhan kustomisasi. Kami balas dalam 1×24 jam pada hari kerja."
          )}
        </p>
      </div>

      {/* ── Main: Info + Form ────────────────────────────────── */}
      <div style={{ maxWidth:1200, margin:"0 auto", padding:"80px 32px" }}>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit, minmax(320px, 1fr))", gap:64, alignItems:"start" }}>

          {/* LEFT — Contact info */}
          <div>
            <p style={eyebrowStyle}>{t("Reach Us", "Hubungi Kami")}</p>
            <h2 style={{ fontFamily:"'Cormorant Garant',serif", fontSize:36, fontWeight:400, color:"#111", margin:"0 0 40px", lineHeight:1.2 }}>
              {t("Our details", "Informasi Kontak")}
            </h2>

            <InfoRow icon={IconMail} label={t("Email", "Email")}>
              <a href="mailto:lopobya@gmail.com" style={linkUnderline}
                 onMouseEnter={linkHover} onMouseLeave={linkLeave}>
                lopobya@gmail.com
              </a>
            </InfoRow>

            <InfoRow icon={IconPhone} label="WhatsApp">
              <a href="https://wa.me/6289512645973" target="_blank" rel="noopener noreferrer"
                 style={linkUnderline} onMouseEnter={linkHover} onMouseLeave={linkLeave}>
                +62 895-1264-5973
              </a>
              <p style={{ fontSize:11, color:"#888", margin:"4px 0 0" }}>
                {t("Tap to chat directly", "Tekan untuk chat langsung")}
              </p>
            </InfoRow>

            <InfoRow icon={IconMapPin} label={t("Studio", "Alamat Usaha")}>
              <p style={{ margin:0 }}>
                Jl. Raya Petir, Gang Pasundan<br/>
                RT 01 / RW 02, Kel. Petir, Kec. Dramaga<br/>
                Kab. Bogor, Jawa Barat 16680
              </p>
            </InfoRow>

            <InfoRow icon={IconClock} label={t("Operating Hours", "Jam Operasional")}>
              <p style={{ margin:0 }}>
                {t("Monday – Saturday", "Senin – Sabtu")} · 09:00 – 18:00 WIB<br/>
                <span style={{ color:"#888" }}>{t("Sunday closed", "Minggu libur")}</span>
              </p>
            </InfoRow>

            {/* Sosmed list */}
            <div style={{ marginTop:48, paddingTop:32, borderTop:"1px solid #e8e6e2" }}>
              <p style={{ fontFamily:"'DM Sans',sans-serif", fontSize:10, letterSpacing:"0.18em", textTransform:"uppercase", color:"#888", margin:"0 0 16px", fontWeight:600 }}>
                {t("Follow Us", "Ikuti Kami")}
              </p>
              <div style={{ display:"flex", flexDirection:"column", gap:10 }}>
                {sosmed.map(s => (
                  <a key={s.name} href={s.url} target="_blank" rel="noopener noreferrer"
                     style={{ display:"flex", justifyContent:"space-between", alignItems:"center", textDecoration:"none", padding:"14px 18px", border:"1px solid #e8e6e2", borderRadius:2, transition:"all 0.15s", background:"#fff" }}
                     onMouseEnter={e => { e.currentTarget.style.borderColor="#111"; e.currentTarget.style.background="#fafaf8"; }}
                     onMouseLeave={e => { e.currentTarget.style.borderColor="#e8e6e2"; e.currentTarget.style.background="#fff"; }}>
                    <span style={{ fontFamily:"'DM Sans',sans-serif", fontSize:12, color:"#111", fontWeight:500, letterSpacing:"0.04em" }}>{s.name}</span>
                    <span style={{ fontFamily:"'DM Sans',sans-serif", fontSize:11, color:"#888" }}>{s.handle}</span>
                  </a>
                ))}
              </div>
            </div>
          </div>

          {/* RIGHT — Form */}
          <div style={{ background:"#fff", border:"1px solid #e8e6e2", padding:"40px", borderRadius:2 }}>
            <p style={eyebrowStyle}>{t("Send Message", "Kirim Pesan")}</p>
            <h2 style={{ fontFamily:"'Cormorant Garant',serif", fontSize:32, fontWeight:400, color:"#111", margin:"0 0 32px", lineHeight:1.2 }}>
              {t("Have a question?", "Ada pertanyaan?")}
            </h2>

            {status === "success" ? (
              <div style={{ padding:"40px 24px", background:"#f9f8f6", border:"1px solid #e8e6e2", textAlign:"center", borderRadius:2 }}>
                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#111" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" style={{ margin:"0 auto 12px", display:"block" }}>
                  <circle cx="12" cy="12" r="10"/>
                  <path d="M9 12l2 2 4-4"/>
                </svg>
                <p style={{ fontFamily:"'Cormorant Garant',serif", fontSize:28, color:"#111", margin:"0 0 10px" }}>
                  {t("Thank you", "Terima kasih")}
                </p>
                <p style={{ fontFamily:"'DM Sans',sans-serif", fontSize:13, color:"#666", margin:"0 0 24px", lineHeight:1.6 }}>
                  {t(
                    "Your message has been sent. We will reply within 1×24 hours on business days.",
                    "Pesan kamu sudah terkirim. Kami akan balas dalam 1×24 jam pada hari kerja."
                  )}
                </p>
                <button onClick={() => setStatus("idle")}
                  style={{ background:"none", border:"1px solid #111", padding:"10px 24px", fontFamily:"'DM Sans',sans-serif", fontSize:11, letterSpacing:"0.14em", textTransform:"uppercase", color:"#111", cursor:"pointer", borderRadius:2 }}>
                  {t("Send Another", "Kirim Pesan Lain")}
                </button>
              </div>
            ) : (
              <>
                <div style={{ marginBottom:20 }}>
                  <label style={labelStyle}>{t("Full Name", "Nama Lengkap")}</label>
                  <input type="text" value={form.name} onChange={e => set("name", e.target.value)}
                    placeholder={t("Your name", "Nama kamu")} style={inputStyle} maxLength={100}
                    onFocus={e => e.target.style.borderColor="#111"}
                    onBlur ={e => e.target.style.borderColor="#e8e6e2"} />
                </div>

                <div style={{ marginBottom:20 }}>
                  <label style={labelStyle}>{t("Email Address", "Alamat Email")}</label>
                  <input type="email" value={form.email} onChange={e => set("email", e.target.value)}
                    placeholder="email@example.com" style={inputStyle} maxLength={150}
                    onFocus={e => e.target.style.borderColor="#111"}
                    onBlur ={e => e.target.style.borderColor="#e8e6e2"} />
                </div>

                <div style={{ marginBottom:20 }}>
                  <label style={labelStyle}>{t("Subject", "Subjek")}</label>
                  <select value={form.subject} onChange={e => set("subject", e.target.value)}
                    style={{ ...inputStyle, cursor:"pointer", appearance:"none",
                      backgroundImage:"url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/></svg>\")",
                      backgroundRepeat:"no-repeat", backgroundPosition:"right 14px center", paddingRight:36 }}
                    onFocus={e => e.target.style.borderColor="#111"}
                    onBlur ={e => e.target.style.borderColor="#e8e6e2"}>
                    <option value="">{t("— Select —", "— Pilih —")}</option>
                    <option value="Pertanyaan Produk">{t("Product question", "Pertanyaan produk")}</option>
                    <option value="Pesanan & Pengiriman">{t("Order & shipping", "Pesanan & pengiriman")}</option>
                    <option value="Retur / Komplain">{t("Return / complaint", "Retur / komplain")}</option>
                    <option value="Reseller / Wholesale">{t("Reseller / wholesale", "Reseller / wholesale")}</option>
                    <option value="Kerjasama">{t("Partnership", "Kerjasama")}</option>
                    <option value="Lainnya">{t("Other", "Lainnya")}</option>
                  </select>
                </div>

                <div style={{ marginBottom:24 }}>
                  <label style={labelStyle}>{t("Message", "Pesan")}</label>
                  <textarea value={form.message} onChange={e => set("message", e.target.value)}
                    placeholder={t("Tell us what you need...", "Tulis pesan kamu di sini...")}
                    rows={6} maxLength={2000}
                    style={{ ...inputStyle, resize:"vertical", minHeight:140, fontFamily:"'DM Sans',sans-serif", lineHeight:1.6 }}
                    onFocus={e => e.target.style.borderColor="#111"}
                    onBlur ={e => e.target.style.borderColor="#e8e6e2"} />
                  <p style={{ fontFamily:"'DM Sans',sans-serif", fontSize:10, color:"#aaa", margin:"6px 0 0", textAlign:"right" }}>
                    {form.message.length} / 2000
                  </p>
                </div>

                {status === "error" && errorMsg && (
                  <div style={{ padding:"12px 16px", background:"#fef2f2", border:"1px solid #fecaca", marginBottom:16, borderRadius:2 }}>
                    <p style={{ fontFamily:"'DM Sans',sans-serif", fontSize:12, color:"#b91c1c", margin:0 }}>{errorMsg}</p>
                  </div>
                )}

                <button onClick={submit} disabled={status === "sending"}
                  style={{
                    width:"100%", padding:"16px",
                    background: status === "sending" ? "#666" : "#111",
                    border:"none", cursor: status === "sending" ? "wait" : "pointer",
                    fontFamily:"'DM Sans',sans-serif", fontSize:11,
                    letterSpacing:"0.18em", textTransform:"uppercase",
                    color:"#f9f8f6", fontWeight:600, borderRadius:2,
                    transition:"background 0.2s"
                  }}>
                  {status === "sending" ? t("Sending...", "Mengirim...") : t("Send Message", "Kirim Pesan")}
                </button>

                <p style={{ fontFamily:"'DM Sans',sans-serif", fontSize:10, color:"#aaa", margin:"16px 0 0", textAlign:"center", lineHeight:1.6 }}>
                  {t(
                    "By sending this form, you agree to our privacy policy.",
                    "Dengan mengirim form ini, kamu menyetujui kebijakan privasi kami."
                  )}
                </p>
              </>
            )}
          </div>

        </div>
      </div>

      {/* ── Map ──────────────────────────────────────────────── */}
      <div style={{ maxWidth:1200, margin:"0 auto", padding:"0 32px 100px" }}>
        <p style={{ ...eyebrowStyle, textAlign:"center" }}>{t("Find Us", "Temukan Kami")}</p>
        <h2 style={{ fontFamily:"'Cormorant Garant',serif", fontSize:36, fontWeight:400, color:"#111", margin:"0 0 40px", lineHeight:1.2, textAlign:"center" }}>
          {t("Visit our studio", "Lokasi Workshop")}
        </h2>
        <div style={{ background:"#e8e6e2", overflow:"hidden", borderRadius:2, border:"1px solid #e8e6e2" }}>
          <iframe
            src="https://maps.google.com/maps?q=Jl.+Raya+Petir+Dramaga+Bogor+16680&t=&z=15&ie=UTF8&iwloc=&output=embed"
            width="100%" height="400" style={{ border:0, display:"block" }}
            loading="lazy" referrerPolicy="no-referrer-when-downgrade"
            title="Lopobya Workshop Location" />
        </div>
      </div>

    </div>
  );
};

Object.assign(window, { ContactPage });