// ContactPage — extracted from the old Contact.html inline script.
// Chrome (TopBar/Footer) is supplied by PageShell in app.jsx.
// SOCIAL + IGIcon/FBIcon/TTIcon come from PageChrome.jsx.

/* Placeholder contact details — swap for real addresses when confirmed. */
const CONTACT = {
  general:  "hello@motomelli.com",
  press:    "press@motomelli.com",
  partners: "brands@motomelli.com",
  phone:    "+44 (0)1223 000 000",
  city:     "UK",
};

const METHODS = [
  {
    label: "GENERAL", title: "Gear & sizing help",
    body: "Stuck between two sizes or not sure which jacket to trust? Ask us anything — we usually reply within 2 working days.",
    val: CONTACT.general, href: `mailto:${CONTACT.general}`,
    icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>,
  },
  {
    label: "PARTNERSHIPS", title: "Brands & stockists",
    body: "Run a women's riding gear brand and want it tested and compared? Pitch us — honest reviews only, no paid placements.",
    val: CONTACT.partners, href: `mailto:${CONTACT.partners}`,
    icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M8 12 3 7l4-4 5 5M16 12l5 5-4 4-5-5M8 12l8 8M16 12 8 20"/></svg>,
  },
  {
    label: "PRESS", title: "Press & media",
    body: "Writing about women in motorcycling or gear safety? We're happy to share data, quotes and rider stories.",
    val: CONTACT.press, href: `mailto:${CONTACT.press}`,
    icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h13v16H6a2 2 0 0 1-2-2z"/><path d="M17 8h3v10a2 2 0 0 1-2 2M8 8h5M8 12h5M8 16h5"/></svg>,
  },
];

const SUBJECTS = [
  "Sizing help / gear advice",
  "Question about a review",
  "Brand or stockist partnership",
  "Press / media enquiry",
  "Motomelli Originals (hoodies) order",
  "Something else",
];

const FAQ = [
  {
    q: "Do you sell riding gear directly?",
    a: "Not the protective gear — we review and compare it, then link you straight to the brand's own store. The only thing we sell ourselves is Motomelli Originals: our heavyweight hoodies.",
  },
  {
    q: "Can you help me pick a size?",
    a: "Absolutely — that's the whole point of Motomelli. Drop us your usual UK/US/EU size and the brands you're considering via the form below, and we'll point you to the right fit.",
  },
  {
    q: "How fast do you reply?",
    a: "Most messages get a reply within 2 working days. Brand partnership pitches can take a little longer while we plan testing.",
  },
  {
    q: "I run a brand — how do I get featured?",
    a: "Email brands@motomelli.com or use the form. We only feature women's gear we've tested ourselves, and we never accept payment for a higher ranking.",
  },
  {
    q: "Where are you based?",
    a: "We're an independent, women-led team based in UK. There's no public storefront — we work by email and on the road.",
  },
];

const FaqItem = ({ item, open, onToggle }) => (
  <div className="mm-faq__item">
    <button className="mm-faq__q" onClick={onToggle} aria-expanded={open}>
      <span>{item.q}</span>
      <span className="mm-faq__sign" aria-hidden>{open ? "−" : "+"}</span>
    </button>
    <div className={`mm-faq__a${open ? " is-open" : ""}`}>
      <p>{item.a}</p>
    </div>
  </div>
);

const ContactForm = () => {
  const [sent, setSent] = React.useState(false);

  const onSubmit = (e) => {
    e.preventDefault();
    // No backend yet — this is a front-end placeholder. Wire to a form
    // service (Formspree / Netlify Forms / custom endpoint) when ready.
    setSent(true);
    e.target.reset();
  };

  return (
    <form className="mm-cform" onSubmit={onSubmit}>
      {sent && (
        <div className="mm-cform__sent" role="status">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="10"/><path d="m8 12 3 3 5-6"/>
          </svg>
          <div>
            <strong>Thanks — message noted.</strong>
            <p>This is a demo form with no backend yet, so nothing was actually sent. Email us directly in the meantime.</p>
          </div>
        </div>
      )}

      <div className="mm-cform__row">
        <div className="mm-field">
          <label htmlFor="cf-name">Your name <em>*</em></label>
          <input id="cf-name" name="name" type="text" placeholder="Jane Rider" required />
        </div>
        <div className="mm-field">
          <label htmlFor="cf-email">Email <em>*</em></label>
          <input id="cf-email" name="email" type="email" placeholder="you@hotmail.com" required />
        </div>
      </div>

      <div className="mm-field">
        <label htmlFor="cf-subject">What's it about?</label>
        <select id="cf-subject" name="subject" defaultValue={SUBJECTS[0]}>
          {SUBJECTS.map((s) => <option key={s}>{s}</option>)}
        </select>
      </div>

      <div className="mm-field">
        <label htmlFor="cf-size">Your usual size <span style={{ color: "var(--mm-light-dimmer)" }}>(optional — helps with sizing questions)</span></label>
        <input id="cf-size" name="size" type="text" placeholder="e.g. UK 12 / EU 40 / US 8" />
      </div>

      <div className="mm-field">
        <label htmlFor="cf-message">Message <em>*</em></label>
        <textarea id="cf-message" name="message" placeholder="Tell us what you need a hand with…" required />
      </div>

      <button type="submit" className="mm-cform__submit">
        Send message <span aria-hidden>→</span>
      </button>
      <p className="mm-cform__note">
        We'll only use your details to reply to this enquiry. No newsletter sign-up,
        no sharing with brands.
      </p>
    </form>
  );
};

const ContactPage = () => {
  const [openFaq, setOpenFaq] = React.useState(0);

  return (
    <main>
      {/* Dark page hero */}
      <section className="mm-pagehero">
        <div className="mm-pagehero__inner">
          <div className="mm-pagehero__eyebrow">
            <span className="mm-tick" />
            <span className="mm-mono">GET IN TOUCH</span>
          </div>
          <h1 className="mm-pagehero__title">
            Let's talk<br /><em>gear.</em>
          </h1>
          <p className="mm-pagehero__sub">
            Sizing questions, review feedback, brand partnerships or press — whatever
            you need, there's a real rider on the other end. We usually reply within
            two working days.
          </p>
        </div>
      </section>

      {/* FAQ */}
      <section className="mm-section" id="faq">
        <div className="mm-section__head">
          <div>
            <span className="mm-mono">BEFORE YOU ASK</span>
            <h2 className="mm-section__title">Quick<br />answers.</h2>
            <p className="mm-section__sub">The things people email us most. If yours isn't here, the form's right below.</p>
          </div>
        </div>

        <div className="mm-faq">
          {FAQ.map((item, i) => (
            <FaqItem
              key={item.q}
              item={item}
              open={openFaq === i}
              onToggle={() => setOpenFaq(openFaq === i ? -1 : i)}
            />
          ))}
        </div>
      </section>

      {/* Form + aside */}
      <section className="mm-section" id="message">
        <div className="mm-section__head">
          <div>
            <span className="mm-mono">SEND A MESSAGE</span>
            <h2 className="mm-section__title">Drop us<br />a line.</h2>
            <p className="mm-section__sub">Fill this in and we'll get back to you. The more detail on your bike and body type, the better the advice.</p>
          </div>
        </div>

        <div className="mm-cform__grid">
          <ContactForm />

          <aside className="mm-caside">
            <div className="mm-caside__block">
              <span className="mm-mono">DIRECT</span>
              <h3>Prefer email?</h3>
              <div className="mm-caside__rows">
                <div className="mm-caside__line"><span>General</span><span>{CONTACT.general}</span></div>
                <div className="mm-caside__line"><span>Press</span><span>{CONTACT.press}</span></div>
                <div className="mm-caside__line"><span>Brands</span><span>{CONTACT.partners}</span></div>
                <div className="mm-caside__line"><span>Phone</span><span>{CONTACT.phone}</span></div>
              </div>
            </div>

            <div className="mm-caside__block">
              <span className="mm-mono">STUDIO</span>
              <h3>Where we are</h3>
              <p>
                Motomelli is an independent, women-led team based in{" "}
                <strong style={{ color: "var(--mm-light-text)" }}>{CONTACT.city}</strong>.
                We don't have a public storefront — we work by email and on the road.
              </p>
              <div className="mm-caside__rows" style={{ marginTop: "14px" }}>
                <div className="mm-caside__line"><span>Hours</span><span>Mon–Fri, 9–5 GMT</span></div>
                <div className="mm-caside__line"><span>Response</span><span>Within 2 working days</span></div>
              </div>
            </div>

            <div className="mm-caside__block">
              <span className="mm-mono">SOCIAL</span>
              <h3>Slide into the DMs</h3>
              <p>Fastest for a quick question — and tag <strong style={{ color: "var(--mm-light-text)" }}>@motomelli</strong> to get featured.</p>
              <div className="mm-caside__socials">
                <a href={SOCIAL.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram"><IGIcon s={18} /></a>
                <a href={SOCIAL.facebook} target="_blank" rel="noopener noreferrer" aria-label="Facebook"><FBIcon s={18} /></a>
                <a href={SOCIAL.tiktok} target="_blank" rel="noopener noreferrer" aria-label="TikTok"><TTIcon s={18} /></a>
              </div>
            </div>
          </aside>
        </div>
      </section>
    </main>
  );
};