// Furnishfy — Contact page
function Contact({ lang, go }) {
  useReveal();
  const [sent, setSent] = useState(false);
  const [topic, setTopic] = useState("general");

  const topics = [
    { id: "general", en: "General enquiry", ar: "استفسار عام" },
    { id: "order",   en: "An existing order", ar: "طلب قائم" },
    { id: "trade",   en: "Trade & interior design", ar: "تصميم داخلي وتجارة" },
    { id: "bespoke", en: "A bespoke commission", ar: "قطعة مخصّصة" },
  ];

  const channels = [
    { icon: "bag", en: "Showroom", ar: "المعرض",
      l1: lang === "ar" ? "شارع الزمالك ٢٤، القاهرة" : "24 Atelier Row, Maison District",
      l2: lang === "ar" ? "يومياً ١٠ص – ٨م" : "Open daily · 10am – 8pm" },
    { icon: "globe", en: "Write to us", ar: "راسلنا",
      l1: "hello@furnishfy.com",
      l2: lang === "ar" ? "نردّ خلال ٢٤ ساعة" : "We reply within 24 hours" },
    { icon: "truck", en: "Concierge", ar: "خدمة العملاء",
      l1: "+20 2 1234 5678",
      l2: lang === "ar" ? "السبت – الخميس ٩ص – ٦م" : "Sat – Thu · 9am – 6pm" },
  ];

  return (
    <main className="page-fade" style={{ paddingTop: 92 }}>
      {/* heading */}
      <section className="wrap" style={{ padding: "72px 40px 0" }}>
        <div className="reveal in" style={{ maxWidth: 720 }}>
          <div className="eyebrow">{lang === "ar" ? "تواصل معنا" : "Get in touch"}</div>
          <h1 style={{ fontSize: "clamp(40px,7vw,88px)", marginTop: 20, letterSpacing: "-0.01em" }}>
            {lang === "ar" ? <>دعنا نصمّم<br /><span style={{ fontStyle: "italic", color: "var(--gold)" }}>بيتك معاً.</span></>
                           : <>Let's design<br /><span style={{ fontStyle: "italic", color: "var(--gold)" }}>your home together.</span></>}
          </h1>
          <p style={{ color: "var(--muted)", fontSize: "clamp(15px,1.5vw,18px)", maxWidth: 500, marginTop: 24, lineHeight: 1.75 }}>
            {lang === "ar" ? "سواء كان سؤالاً سريعاً أو مشروعاً كاملاً — فريقنا هنا ليرافقك من أول فكرة حتى التركيب." 
                           : "Whether it's a quick question or a whole project, our team is here to guide you from first idea to final installation."}
          </p>
        </div>
      </section>

      {/* channels */}
      <section className="wrap" style={{ padding: "56px 40px 20px" }}>
        <div className="grid-3">
          {channels.map((c, i) => (
            <div key={i} className="reveal" style={{ transitionDelay: i * 80 + "ms", border: "1px solid var(--line)", borderRadius: "var(--radius)", padding: "30px 28px", background: "var(--surface)" }}>
              <Icon name={c.icon} size={28} style={{ color: "var(--gold)" }} stroke={1.2} />
              <div style={{ fontFamily: "var(--font-display)", fontSize: 24, marginTop: 18 }}>{c[lang]}</div>
              <div style={{ color: "var(--ink)", fontSize: 15, marginTop: 8 }}>{c.l1}</div>
              <div style={{ color: "var(--faint)", fontSize: 13, marginTop: 4 }}>{c.l2}</div>
            </div>
          ))}
        </div>
      </section>

      {/* form + sidebar */}
      <section className="wrap contact-grid" style={{ padding: "60px 40px 110px", display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 64, alignItems: "start" }}>
        {/* form */}
        <div className="reveal">
          <h2 style={{ fontSize: "clamp(28px,3.5vw,42px)", marginBottom: 8 }}>{lang === "ar" ? "أرسل رسالة" : "Send a message"}</h2>
          <p style={{ color: "var(--muted)", fontSize: 14.5, marginBottom: 32 }}>{lang === "ar" ? "كل الحقول المعلّمة بـ * مطلوبة." : "Fields marked * are required."}</p>

          {sent ? (
            <div style={{ border: "1px solid var(--gold)", borderRadius: "var(--radius)", padding: "44px 36px", background: "var(--surface)", textAlign: "center" }}>
              <div style={{ width: 56, height: 56, borderRadius: "50%", border: "1px solid var(--gold)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 18px", color: "var(--gold)" }}>
                <Icon name="check" size={28} />
              </div>
              <h3 style={{ fontSize: 28 }}>{lang === "ar" ? "وصلتنا رسالتك." : "Your message is on its way."}</h3>
              <p style={{ color: "var(--muted)", fontSize: 15, marginTop: 10, maxWidth: 360, marginInline: "auto" }}>
                {lang === "ar" ? "سيتواصل معك أحد مستشاري Furnishfy خلال يوم عمل واحد." : "A Furnishfy advisor will be in touch within one business day."}
              </p>
              <button className="btn btn--ghost" style={{ marginTop: 26 }} onClick={() => setSent(false)}><span>{lang === "ar" ? "إرسال رسالة أخرى" : "Send another"}</span></button>
            </div>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); window.scrollTo({ top: 160, behavior: "smooth" }); }}>
              <div style={{ marginBottom: 28 }}>
                <label className="flabel">{lang === "ar" ? "ما الذي تودّ التحدث عنه؟" : "What can we help with?"}</label>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 9, marginTop: 12 }}>
                  {topics.map((tp) => (
                    <button type="button" key={tp.id} onClick={() => setTopic(tp.id)} className="chip2" data-on={topic === tp.id}>{tp[lang]}</button>
                  ))}
                </div>
              </div>
              <div className="form-row">
                <div className="field">
                  <label className="flabel">{lang === "ar" ? "الاسم *" : "Full name *"}</label>
                  <input required type="text" className="finput" placeholder={lang === "ar" ? "اسمك الكامل" : "Your name"} />
                </div>
                <div className="field">
                  <label className="flabel">{lang === "ar" ? "البريد الإلكتروني *" : "Email *"}</label>
                  <input required type="email" className="finput" placeholder={lang === "ar" ? "you@email.com" : "you@email.com"} />
                </div>
              </div>
              <div className="form-row">
                <div className="field">
                  <label className="flabel">{lang === "ar" ? "الهاتف" : "Phone"}</label>
                  <input type="tel" className="finput" placeholder={lang === "ar" ? "اختياري" : "Optional"} />
                </div>
                <div className="field">
                  <label className="flabel">{lang === "ar" ? "المدينة" : "City"}</label>
                  <input type="text" className="finput" placeholder={lang === "ar" ? "اختياري" : "Optional"} />
                </div>
              </div>
              <div className="field" style={{ marginTop: 22 }}>
                <label className="flabel">{lang === "ar" ? "رسالتك *" : "Your message *"}</label>
                <textarea required rows="5" className="finput" style={{ resize: "vertical", minHeight: 130 }} placeholder={lang === "ar" ? "أخبرنا عن مساحتك، القطع التي تهمك، أو أي سؤال..." : "Tell us about your space, the pieces you love, or any question..."}></textarea>
              </div>
              <button type="submit" className="btn btn--solid" style={{ marginTop: 28, padding: "16px 40px" }}>
                <span>{lang === "ar" ? "إرسال الرسالة" : "Send message"} <Icon name="arrow" size={16} /></span>
              </button>
            </form>
          )}
        </div>

        {/* sidebar: map + hours */}
        <div className="reveal" style={{ transitionDelay: "120ms" }}>
          <div style={{ position: "relative", borderRadius: "var(--radius)", overflow: "hidden", border: "1px solid var(--line)" }}>
            <Placeholder hue={50} name={lang === "ar" ? "حي المعرض" : "Maison District"} label="showroom map" style={{ aspectRatio: "4/3" }} />
            <div style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)", display: "flex", flexDirection: "column", alignItems: "center", gap: 6, zIndex: 2 }}>
              <span style={{ width: 14, height: 14, borderRadius: "50%", background: "var(--gold)", boxShadow: "0 0 0 6px color-mix(in oklch, var(--gold) 30%, transparent)" }} />
            </div>
          </div>

          <div style={{ marginTop: 26, border: "1px solid var(--line)", borderRadius: "var(--radius)", overflow: "hidden" }}>
            <div style={{ padding: "18px 22px", background: "var(--surface)", borderBottom: "1px solid var(--line)" }}>
              <h4 style={{ fontFamily: "var(--font-ui)", fontSize: 12, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--gold)", fontWeight: 500 }}>
                {lang === "ar" ? "مواعيد العمل" : "Opening hours"}
              </h4>
            </div>
            {[[lang === "ar" ? "السبت – الخميس" : "Sat – Thu", "10:00 – 20:00"],
              [lang === "ar" ? "الجمعة" : "Friday", "13:00 – 20:00"],
              [lang === "ar" ? "استشارة خاصة" : "Private viewing", lang === "ar" ? "بموعد مسبق" : "By appointment"]].map((r, i) => (
              <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "14px 22px", borderBottom: i < 2 ? "1px solid var(--line)" : "none", fontSize: 14.5 }}>
                <span style={{ color: "var(--muted)" }}>{r[0]}</span>
                <span style={{ color: "var(--ink)" }}>{r[1]}</span>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 26, display: "flex", gap: 20 }}>
            {["Instagram", "Pinterest", lang === "ar" ? "واتساب" : "WhatsApp"].map((s) => (
              <a key={s} className="link-underline" style={{ color: "var(--muted)", textTransform: "none", letterSpacing: ".04em", fontSize: 14, cursor: "pointer" }}>{s}</a>
            ))}
          </div>
        </div>
      </section>

      <style>{`
        .flabel { display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:500; }
        :root[lang="ar"] .flabel { letter-spacing:0; font-size:13px; text-transform:none; }
        .form-row { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:22px; }
        .field { display:flex; flex-direction:column; }
        .finput { margin-top:10px; background:var(--surface); border:1px solid var(--line); border-radius:2px; color:var(--ink); padding:14px 15px; font-size:15px; font-family:var(--font-ui); outline:none; transition:border-color .3s, background .3s; }
        .finput::placeholder { color:var(--faint); }
        .finput:focus { border-color:var(--gold); background:var(--surface-2); }
        .chip2 { background:none; border:1px solid var(--line); color:var(--muted); padding:10px 16px; border-radius:2px; font-size:13.5px; cursor:pointer; font-family:var(--font-ui); transition:all .25s; }
        .chip2:hover { color:var(--ink); border-color:var(--muted); }
        .chip2[data-on="true"] { background:var(--gold); color:var(--bg-deep); border-color:var(--gold); }
        @media (max-width: 860px){
          .contact-grid { grid-template-columns:1fr !important; gap:48px !important; }
          .form-row { grid-template-columns:1fr !important; }
        }
      `}</style>
    </main>
  );
}
Object.assign(window, { Contact });