/* ============================================================
   DIOTBRAND — About, Contact
   ============================================================ */

/* ---------------- ABOUT ---------------- */
function AboutPage({ onNav }) {
  return (
    <div className="fade-page">
      <section className="about-hero">
        <Ph label="STUDIO · THE ATELIER" ratio="cinema" className="about-hero-bg" />
        <div className="about-hero-ov" />
        <div className="wrap about-hero-content">
          <Eyebrow style={{ color: "var(--accent-bright)" }}>Our Story</Eyebrow>
          <h1 className="serif about-hero-h" style={{ whiteSpace: "pre-line" }}>{(window.BRAND?.story.heroHeading) || "Bridal &\nEveningwear."}</h1>
        </div>
      </section>
      <section className="section-pad">
        <div className="wrap about-intro">
          <Reveal><p className="serif about-lede">{(window.BRAND?.story.lede) || "Diotbrand is a Lagos bridal and eveningwear house."}</p></Reveal>
          <Reveal delay={1}><p style={{ color: "var(--ink-soft)", fontSize: 16, lineHeight: 1.8 }}>{(window.BRAND?.story.body) || ""} {(window.BRAND?.story.craftLine) || ""}</p></Reveal>
        </div>
      </section>
      <section className="section-pad">
        <div className="wrap-wide values-grid">
          {[
            ["scissors", "Made to measure", "Every gown and corset bodice is cut and fitted to you — nothing is off the rack."],
            ["ruler", "Built on the bodice", "Boning, beading and structure come first — the skirt and finishing follow."],
            ["ig", "Enquire first", (window.BRAND?.story.valuesLine) || "No prices are shown upfront — enquire on Instagram or on-site and we'll take it from there."],
          ].map(([ic, t, d], i) => (
            <Reveal key={t} delay={i + 1} className="value-card">
              <Icon name={ic} size={26} stroke={1.3} />
              <h3 className="serif" style={{ fontSize: 26, fontWeight: 500, margin: "16px 0 10px" }}>{t}</h3>
              <p style={{ color: "var(--ink-soft)" }}>{d}</p>
            </Reveal>
          ))}
        </div>
      </section>
      <BespokeBand onNav={onNav} />
    </div>
  );
}

/* ---------------- CONTACT ---------------- */
function ContactPage({ route, onNav }) {
  const product = route && route.params && route.params.product;
  const [sent, setSent] = useState(false);
  const ig = (window.BRAND && window.BRAND.igUrl) || "https://instagram.com/diotbrand";
  return (
    <div className="fade-page page-shell">
      <div className="wrap-wide">
        <h1 className="serif page-h">Enquire</h1>
        <p className="shop-sub" style={{ maxWidth: "52ch" }}>No prices are listed on-site — every piece is priced to the commission. Send an enquiry here and we'll reply with next steps.</p>
        <div className="contact-grid">
          <div className="contact-info">
            <div className="contact-card">
              <span className="contact-ic"><Icon name="ig" size={20} /></span>
              <div>
                <span className="contact-t">Instagram</span>
                <strong><a href={ig} target="_blank" rel="noopener">{(window.BRAND?.igHandle) || "@diotbrand"}</a></strong>
                <span className="contact-s">Follow for the latest pieces</span>
              </div>
            </div>
            <div className="contact-card">
              <span className="contact-ic"><Icon name="pin" size={20} /></span>
              <div>
                <span className="contact-t">{(window.BRAND?.addresses.hq.label) || "Lagos Studio"}</span>
                <strong>{(window.BRAND?.addresses.hq.line) || "Lagos, Nigeria — by appointment"}</strong>
              </div>
            </div>
          </div>
          <div className="contact-form-wrap">
            {sent ? (
              <div className="contact-sent"><div className="confirm-badge sm"><Icon name="check" size={26} /></div><h3 className="serif" style={{ fontSize: 30, margin: "14px 0 8px" }}>Enquiry received</h3><p style={{ color: "var(--ink-soft)" }}>Thank you for reaching out. We'll be in touch shortly.</p></div>
            ) : (
              <form className="contact-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                <h3 className="serif" style={{ fontSize: 28, marginBottom: 18 }}>Send an enquiry</h3>
                <div className="form-grid">
                  <div className="field"><label>Name</label><input className="input" required placeholder="Your name" /></div>
                  <div className="field"><label>Email</label><input className="input" type="email" required placeholder="you@email.com" /></div>
                  <div className="field span2"><label>What are you enquiring about?</label>
                    <select className="input" defaultValue={product ? "" : "General enquiry"}>
                      {product && <option>{product}</option>}
                      <option>Bridal Gowns</option>
                      <option>Custom/Eveningwear</option>
                      <option>Corsetry</option>
                      <option>Custom commission</option>
                      <option>General enquiry</option>
                    </select>
                  </div>
                  <div className="field span2"><label>Message</label><textarea className="input" rows="5" required defaultValue={product ? `I'd like to enquire about the ${product}.` : ""} placeholder="How can we help?"></textarea></div>
                </div>
                <Btn block arrow={false} type="submit" style={{ marginTop: 16 }}>Send enquiry</Btn>
              </form>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AboutPage, ContactPage });