/* Contact page — real Tamak Mauritius details */
const Contact = ({ go }) => {
  const [topic, setTopic] = React.useState("general");
  const [form, setForm] = React.useState({ name: "", email: "", phone: "", company: "", msg: "" });
  const [sent, setSent] = React.useState(false);
  const upd = (k) => (e) => setForm(p => ({ ...p, [k]: e.target.value }));
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4000);
    setForm({ name: "", email: "", phone: "", company: "", msg: "" });
  };

  const topics = [
    { id: "general", label: "General enquiry" },
    { id: "b2b",     label: "B2B / Procurement" },
    { id: "press",   label: "Press & media" },
    { id: "career",  label: "Careers" },
    { id: "service", label: "Customer service" },
  ];

  return (
    <main className="page-enter">
      <section style={{ paddingTop: 56, paddingBottom: 0 }}>
        <div className="shell-wide">
          <Eyebrow dot color="#CC1B2B">Talk to us</Eyebrow>
          <h1 className="display-hero" style={{ marginTop: 24 }}>
            Hello.<br />
            <span className="serif" style={{ fontStyle: "italic", color: "#CC1B2B" }}>What's on</span><br />
            your mind?
          </h1>
        </div>
      </section>

      <section className="section">
        <div className="shell-wide">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 56 }} className="contact-grid">
            {/* Left: contact details */}
            <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
              <div>
                <Eyebrow>Headquarters</Eyebrow>
                <div style={{ marginTop: 12, fontFamily: "var(--f-display)", fontSize: 24, letterSpacing: "-0.015em", lineHeight: 1.25 }}>
                  Tamak Group<br />
                  2, Royal Road<br />
                  Coromandel, 71625<br />
                  Port Louis, Mauritius
                </div>
              </div>

              {[
                { ic: <Icon.Phone />, l: "Main switchboard", v: "+230 233 0020" },
                { ic: <Icon.Mail />,  l: "General enquiries", v: "tamak@tamak.com" },
                { ic: <Icon.Mail />,  l: "B2B desk",          v: "b2b@tamak.com" },
                { ic: <Icon.Mail />,  l: "Careers",           v: "careers@tamak.com" },
              ].map((c, i) => (
                <div key={i} style={{ display: "flex", gap: 16, alignItems: "start" }}>
                  <div style={{ width: 44, height: 44, borderRadius: 999, background: "#FEE2E2", color: "#CC1B2B", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                    {c.ic}
                  </div>
                  <div>
                    <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--mute)" }}>{c.l}</div>
                    <div style={{ fontSize: 16, marginTop: 4 }}>{c.v}</div>
                  </div>
                </div>
              ))}

              <div style={{ marginTop: 8, padding: 24, background: "#F8FAFC", borderRadius: 20, border: "1px solid var(--line)" }}>
                <Eyebrow dot color="#CC1B2B">Open hours</Eyebrow>
                <div style={{ marginTop: 12, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, fontSize: 14 }}>
                  <div><strong>Mon–Fri</strong></div><div>8:30 – 17:00</div>
                  <div><strong>Saturday</strong></div><div>9:00 – 13:00</div>
                  <div><strong>Sunday</strong></div><div style={{ color: "var(--mute)" }}>Closed</div>
                </div>
              </div>
            </div>

            {/* Right: form */}
            <form onSubmit={submit} style={{ background: "#FFF", border: "1px solid var(--line)", borderRadius: 24, padding: 36 }}>
              <Eyebrow>What's this about?</Eyebrow>
              <div style={{ marginTop: 12, display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 28 }}>
                {topics.map(t => (
                  <button key={t.id} type="button" onClick={() => setTopic(t.id)} style={{
                    padding: "8px 14px", borderRadius: 999, cursor: "pointer", fontSize: 13,
                    background: topic === t.id ? "#CC1B2B" : "transparent",
                    color: topic === t.id ? "#FFF" : "var(--ink)",
                    border: `1px solid ${topic === t.id ? "#CC1B2B" : "var(--line-strong)"}`,
                    fontFamily: "var(--f-body)",
                  }}>{t.label}</button>
                ))}
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                <Field label="Full name" value={form.name} onChange={upd("name")} placeholder="Your name" />
                <Field label="Email" value={form.email} onChange={upd("email")} type="email" placeholder="you@company.com" />
                <Field label="Phone" value={form.phone} onChange={upd("phone")} placeholder="+230 ..." />
                <Field label="Company / Organization" value={form.company} onChange={upd("company")} placeholder="Optional" />
              </div>
              <div style={{ marginTop: 16 }}>
                <label style={{ display: "block", fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--mute)", marginBottom: 8 }}>
                  Message
                </label>
                <textarea
                  value={form.msg}
                  onChange={upd("msg")}
                  rows={5}
                  placeholder="Tell us what you need…"
                  style={{ width: "100%", padding: "14px 16px", background: "#F8FAFC", border: "1px solid var(--line)", borderRadius: 14, fontFamily: "var(--f-body)", fontSize: 15, color: "var(--ink)", resize: "vertical", outline: "none" }}
                />
              </div>

              <div style={{ marginTop: 24, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
                <div style={{ fontSize: 12, color: "var(--mute)", maxWidth: 320 }}>
                  We typically reply within 24 hours, Mon–Fri.
                </div>
                <button type="submit" className="btn btn-orange btn-lg" style={{ minWidth: 200, justifyContent: "center" }}>
                  {sent ? <><Icon.Check /> Message sent</> : <>Send message <Icon.ArrowRight size={14} /></>}
                </button>
              </div>
            </form>
          </div>
          <style>{`@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>

      {/* Mall directory — real clusters from each brand's published store list.
          Hand-rolled from adopt.mu, citadelmu.com, bottegaverdemu.com, yadea.mu. */}
      <section className="section" style={{ background: "#F8FAFC" }}>
        <div className="shell-wide">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 32, flexWrap: "wrap", gap: 16 }}>
            <div>
              <Eyebrow dot color="#CC1B2B">{TAMAK_TOTAL_STORES} locations across Mauritius</Eyebrow>
              <h2 className="display-xl" style={{ marginTop: 16, maxWidth: 760 }}>
                Find every Tamak brand under <em className="serif" style={{ fontStyle: "italic", color: "#CC1B2B" }}>one roof.</em>
              </h2>
              <p style={{ marginTop: 12, color: "var(--mute)", maxWidth: 620, fontSize: 15 }}>
                Multi-brand mall clusters first — places where you can visit several of our brands in one trip.
              </p>
            </div>
            <Btn kind="ink" icon={<Icon.Pin size={14} />}>Open the locator</Btn>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }} className="locs-grid">
            {[
              { c: "Tribeca Mall",                area: "Trianon",      brands: ["Adopt", "Citadel", "Bottega Verde", "Yadea Kiosk"] },
              { c: "Bagatelle Mall",              area: "Moka",         brands: ["Adopt", "Citadel", "Bottega Verde", "Funky Fish", "Livewell"] },
              { c: "Mahogany Shopping Promenade", area: "Bagatelle",    brands: ["Adopt", "Bottega Verde"] },
              { c: "Arcades Currimjee",           area: "Curepipe",     brands: ["Adopt", "Bottega Verde"] },
              { c: "La City Trianon",             area: "Trianon",      brands: ["Adopt", "Citadel", "Funky Fish"] },
              { c: "La Croisette",                area: "Grand Baie",   brands: ["Adopt", "Citadel"] },
              { c: "Cascavelle Mall",             area: "Flic en Flac", brands: ["Adopt", "Citadel"] },
              { c: "Riche Terre Mall",            area: "Riche Terre",  brands: ["Adopt", "Citadel", "Funky Fish"] },
              { c: "Port Louis · Royal Road",     area: "Capital",      brands: ["Adopt", "Citadel", "Yadea Flagship"] },
              { c: "Plaisance Shopping Village",  area: "Plaisance",    brands: ["Adopt", "Citadel"] },
              { c: "Rose Hill",                   area: "Rose Hill",    brands: ["Adopt", "Funky Fish"] },
              { c: "Super U Grand Baie",          area: "Grand Baie",   brands: ["Adopt", "Citadel"] },
              { c: "Victoria Mall",               area: "Quatre Bornes",brands: ["Adopt", "Citadel", "Funky Fish"] },
              { c: "Phoenix Mall",                area: "Phoenix",      brands: ["Adopt"] },
            ].map((l, i) => (
              <div key={i} style={{
                background: "#FFF",
                border: "1px solid var(--line)",
                borderRadius: 16,
                padding: 22,
                minHeight: 170,
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                gap: 16,
              }}>
                <div>
                  <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--mute)" }}>
                    {l.area}
                  </div>
                  <div style={{ fontFamily: "var(--f-display)", fontSize: 22, letterSpacing: "-0.02em", lineHeight: 1.15, marginTop: 6 }}>
                    {l.c}
                  </div>
                </div>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                  {l.brands.map((b, j) => (
                    <span key={j} style={{
                      padding: "5px 10px",
                      fontFamily: "var(--f-mono)",
                      fontSize: 11,
                      letterSpacing: "0.04em",
                      borderRadius: 999,
                      background: "#FEE2E2",
                      color: "#CC1B2B",
                    }}>{b}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>
          <style>{`
            @media (max-width: 1000px) { .locs-grid { grid-template-columns: repeat(2, 1fr) !important; } }
            @media (max-width: 560px)  { .locs-grid { grid-template-columns: 1fr !important; } }
          `}</style>
        </div>
      </section>
    </main>
  );
};

const Field = ({ label, value, onChange, placeholder, type = "text" }) => (
  <div>
    <label style={{ display: "block", fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--mute)", marginBottom: 8 }}>{label}</label>
    <input type={type} value={value} onChange={onChange} placeholder={placeholder}
      style={{ width: "100%", padding: "14px 16px", background: "#F8FAFC", border: "1px solid var(--line)", borderRadius: 14, fontFamily: "var(--f-body)", fontSize: 15, color: "var(--ink)", outline: "none" }}
    />
  </div>
);

window.Contact = Contact;