/* ART ADDA — Contact */
function Contact({ go }) {
  useReveal();
  const D = window.ARTADDA;
  return (
    <div className="rise-in">
      <section className="wrap page-intro">
        <p className="eyebrow reveal" style={{ marginBottom: 22 }}>Get in touch</p>
        <h1 className="serif reveal">Say hello</h1>
        <p className="lede reveal" style={{ maxWidth: "52ch", marginTop: 26 }}>
          Want to show your work, commission a piece, or just ask about a Sunday? Reach {D.contact.lead}, who curate Art Adda together - either message us on WhatsApp or Submit your work.
        </p>
      </section>

      <section className="wrap section" style={{ paddingTop: "clamp(30px,4vw,50px)" }}>
        <div className="contact-grid">
          <div className="reveal">
            {D.contact.founders.map((f, i) => (
              <div className="contact-row" key={f.name}>
                <span className="contact-row__k">{f.role}</span>
                <span className="contact-row__v serif">{f.name}</span>
              </div>
            ))}
            <a className="contact-row" href={`https://instagram.com/${D.contact.instagram}`} target="_blank" rel="noreferrer">
              <span className="contact-row__k">Instagram</span>
              <span className="contact-row__v serif">@{D.contact.instagram}</span>
            </a>
            <div className="contact-row">
              <span className="contact-row__k">Where</span>
              <span className="contact-row__v serif">{D.venue.name}, {D.venue.place}</span>
            </div>
            <div className="contact-row">
              <span className="contact-row__k">When</span>
              <span className="contact-row__v serif">{D.venue.cadence}</span>
            </div>
            <div style={{ borderTop: "1px solid var(--line-strong)" }} />

            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 36 }}>
              <button className="btn" onClick={() => go("submit")}>Submit your work <Arrow /></button>
              <a className="btn btn--ghost" href={`https://wa.me/91${D.contact.phone.replace(/\D/g, "").slice(-10)}`} target="_blank" rel="noreferrer">Message on WhatsApp</a>
            </div>
          </div>

          <div className="reveal">
            <Ph label="Map · Adda, Good Earth Malhar" ratio="4/5" src={window.ARTADDA.img.venue("map")} />
            <div style={{ background: "var(--ink)", color: "var(--paper)", padding: "28px 30px", marginTop: 0 }}>
              <p className="eyebrow" style={{ color: "#9a978f", marginBottom: 14 }}>Visiting hours</p>
              <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", borderBottom: "1px solid #34322d" }}>
                <span className="mono" style={{ fontSize: 12, letterSpacing: ".08em" }}>MORNING</span>
                <span className="serif" style={{ fontSize: 20 }}>{D.venue.morning}</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 0" }}>
                <span className="mono" style={{ fontSize: 12, letterSpacing: ".08em" }}>EVENING</span>
                <span className="serif" style={{ fontSize: 20 }}>{D.venue.evening}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="wrap section" style={{ paddingTop: 0 }}>
        <div className="reveal" style={{ borderTop: "1px solid var(--line-strong)", paddingTop: "clamp(40px,6vw,80px)" }}>
          <div className="form-wrap">
            <aside className="form-aside">
              <p className="eyebrow" style={{ marginBottom: 18 }}>Write to us</p>
              <h2 className="h-md serif" style={{ marginBottom: 16 }}>Send an enquiry</h2>
              <p className="muted" style={{ fontSize: 15 }}>
                Commissions, collaborations, exhibiting, or bringing Art Adda to your neighbourhood — tell us what you have in mind and it lands straight in our inbox.
              </p>
            </aside>
            <ContactEnquiryForm />
          </div>
        </div>
      </section>

      <section className="wrap section" style={{ paddingTop: 0 }}>
        <div className="reveal center" style={{ borderTop: "1px solid var(--line-strong)", paddingTop: "clamp(40px,6vw,80px)" }}>
          <p className="pull serif" style={{ margin: "0 auto", fontStyle: "normal" }}>To purchase or commission, reach the artists directly — find them on the Artists page.</p>
          <button className="btn btn--ghost" onClick={() => go("artists")} style={{ marginTop: 30 }}>Browse artists <Arrow /></button>
        </div>
      </section>
    </div>
  );
}
/* ---- enquiry form (sends via the visitor's email app) ---- */
function ContactEnquiryForm() {
  const D = window.ARTADDA;
  const TOPICS = ["General enquiry", "Commission a piece", "Collaboration", "Interest to exhibit", "Host Art Adda in my location"];
  const [f, setF] = useState({ name: "", email: "", topic: TOPICS[0], msg: "" });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const set = (k, v) => setF((p) => ({ ...p, [k]: v }));

  function send() {
    const e = {};
    if (!f.name.trim()) e.name = "Required";
    if (!f.email.trim()) e.email = "Required";
    else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(f.email.trim())) e.email = "Enter a valid email";
    if (!f.msg.trim()) e.msg = "Tell us a little about your enquiry";
    setErrors(e);
    if (Object.keys(e).length > 0) return;
    const subject = `Art Adda \u00b7 ${f.topic} \u2014 ${f.name.trim()}`;
    const body = `Name: ${f.name.trim()}\nEmail: ${f.email.trim()}\nEnquiry: ${f.topic}\n\n${f.msg.trim()}`;
    window.location.href = `mailto:${D.contact.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    setSent(true);
  }

  return (
    <div>
      <CField label="Your name" req error={errors.name}>
        <input value={f.name} onChange={(e) => set("name", e.target.value)} placeholder="e.g. Priya Hegde" />
      </CField>
      <CField label="Your email" req error={errors.email}>
        <input value={f.email} onChange={(e) => set("email", e.target.value)} placeholder="you@email.com" inputMode="email" />
      </CField>
      <CField label="What is this about?" req>
        <div className="medium-pick">
          {TOPICS.map((t) => (
            <button type="button" key={t} className={f.topic === t ? "on" : ""} onClick={() => set("topic", t)}>{t}</button>
          ))}
        </div>
      </CField>
      <CField label="Your message" req error={errors.msg}>
        <textarea value={f.msg} onChange={(e) => set("msg", e.target.value)} rows={5} placeholder="What would you like to talk about?" />
      </CField>
      <div className="form-actions" style={{ justifyContent: "flex-start" }}>
        <button className="btn" onClick={send}>Send enquiry <Arrow /></button>
        <span className="faint mono" style={{ fontSize: 11.5, letterSpacing: ".04em" }}>
          {sent ? "Opening your email app\u2026 just hit send there." : `Opens your email app \u00b7 goes to ${D.contact.lead}`}
        </span>
      </div>
    </div>
  );
}

function CField({ label, req, error, hint, children }) {
  return (
    <div className={"field" + (error ? " err" : "")}>
      <label>{label} {req && <span className="req">*</span>}</label>
      {children}
      {error ? <div className="field__err">{error}</div> : hint ? <div className="field__hint">{hint}</div> : null}
    </div>
  );
}
window.Contact = Contact;