const { useState } = React;

/* ---------- Brand story ---------- */
function Story() {
  return (
    <section className="section story" id="story">
      <div className="story__grid">
        <Reveal className="story__media">
          <Frame label="atelier / founder" ratio="4 / 5" tone="copper" className="story__img story__img--front" src="img/story_atelier" alt="Glam Abaya atelier — founder" />
          <Frame label="fabric / detail" ratio="1 / 1" tone="sand" className="story__img story__img--back" src="img/story_fabric" alt="Glam Abaya fabric detail" />
        </Reveal>
        <Reveal className="story__body" delay={120}>
          <Eyebrow>Our story</Eyebrow>
          <h2 className="story__title">Quietly glamorous,<br />made in <em>Kerala</em>.</h2>
          <p className="story__text">
            Glam Abaya began as a small studio with a simple belief — that modest dressing
            should feel effortless, fluid and quietly confident. Every piece is designed by
            founder Jalala Fareen and finished in small batches.
          </p>
          <p className="story__text">
            From our home at Aiqah in Calicut, we drape, cut and detail abayas that are made
            to be lived in — to enhance your appearance without ever asking for attention.
          </p>
          <div className="story__stats">
            <div className="stat"><span className="stat__n">13.2K</span><span className="stat__l">community</span></div>
            <div className="stat"><span className="stat__n">1,600+</span><span className="stat__l">looks shared</span></div>
            <div className="stat"><span className="stat__n">3</span><span className="stat__l">stores</span></div>
          </div>
          <a href="https://www.instagram.com/jalala_fareen_/" target="_blank" rel="noreferrer" className="btn btn--ink">
            Meet the founder <Icon name="arrowUpRight" size={18} />
          </a>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Editorial full-bleed banner ---------- */
function Editorial() {
  return (
    <section className="editorial">
      <Frame label="editorial / occasion 2026" ratio="auto" tone="ink" className="editorial__bg" src="img/editorial" alt="The occasion edit — Glam Abaya 2026" />
      <div className="editorial__veil" />
      <Reveal className="editorial__content">
        <Eyebrow light>The occasion edit</Eyebrow>
        <h2 className="editorial__title">For the nights<br />worth dressing for.</h2>
        <p className="editorial__text">Embellished crepe, hand-set detailing and silhouettes that catch the light.</p>
        <a href="#new" className="btn btn--copper">Shop occasion <Icon name="arrowRight" size={18} /></a>
      </Reveal>
    </section>
  );
}

/* ---------- Instagram ---------- */
function InstagramFeed() {
  return (
    <section className="section insta">
      <div className="section__head">
        <Eyebrow>@_glam_abaya</Eyebrow>
        <h2 className="section__title">Worn by the community</h2>
        <p className="section__lead">Tag <strong>#GlamAbaya</strong> to be featured. 13.2K and growing.</p>
      </div>
      <div className="insta__grid">
        {INSTAGRAM.map((g, i) => (
          <Reveal key={i} as="a" href="https://www.instagram.com/_glam_abaya/" target="_blank" rel="noreferrer" className="insta__tile" delay={i * 50}>
            <Frame label={g.label} ratio="1 / 1" tone={g.tone} className="insta__img" src={g.img} alt={g.label} />
            <span className="insta__hover"><Icon name="instagram" size={26} /></span>
          </Reveal>
        ))}
      </div>
      <div className="insta__cta">
        <a href="https://www.instagram.com/_glam_abaya/" target="_blank" rel="noreferrer" className="btn btn--ink">
          <Icon name="instagram" size={18} /> Follow @_glam_abaya
        </a>
      </div>
    </section>
  );
}

/* ---------- Stores ---------- */
function Stores() {
  return (
    <section className="section stores" id="stores">
      <div className="section__head">
        <Eyebrow light>Find us</Eyebrow>
        <h2 className="section__title section__title--light">Visit a store</h2>
        <p className="section__lead section__lead--light">Try on, get measured and meet the team. Available at Aiqah and Aroshi Galleria.</p>
      </div>
      <div className="stores__grid">
        {STORES.map((s, i) => (
          <Reveal key={s.id} className={"storecard" + (s.flag === "Flagship store" ? " is-flag" : "")} delay={i * 70}>
            <span className="storecard__flag">{s.flag}</span>
            <h3 className="storecard__name">{s.name}</h3>
            <a href={s.ig} target="_blank" rel="noreferrer" className="storecard__handle"><Icon name="instagram" size={15} /> {s.handle}</a>
            <p className="storecard__addr"><Icon name="pin" size={16} /> {s.address}</p>
            {s.phone && <a href={"tel:" + s.tel} className="storecard__phone"><Icon name="phone" size={16} /> {s.phone}</a>}
          </Reveal>
        ))}
      </div>
    </section>
  );
}

/* ---------- Newsletter ---------- */
function Newsletter() {
  const [email, setEmail] = useState("");
  const [done, setDone] = useState(false);
  const submit = (e) => { e.preventDefault(); if (email.includes("@")) setDone(true); };
  return (
    <section className="newsletter">
      <Reveal className="newsletter__inner">
        <Eyebrow>Join the list</Eyebrow>
        <h2 className="newsletter__title">First looks, quietly delivered.</h2>
        <p className="newsletter__text">New drops, restocks and in-store events — no noise, just the good things.</p>
        {done ? (
          <p className="newsletter__done"><Icon name="sparkle" size={18} /> You're on the list. Welcome to Glam Abaya.</p>
        ) : (
          <form className="newsletter__form" onSubmit={submit}>
            <input
              type="email" value={email} onChange={(e) => setEmail(e.target.value)}
              placeholder="Your email address" aria-label="Email" required
            />
            <button type="submit" className="btn btn--ink">Subscribe</button>
          </form>
        )}
        <p className="newsletter__fine">By subscribing you agree to receive marketing emails. Unsubscribe anytime.</p>
      </Reveal>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  const cols = [
    { h: "Shop", links: ["New in", "Everyday abayas", "Occasion & embellished", "Open & kimono", "Hijabs & accessories"] },
    { h: "Help", links: ["Size guide", "Made to measure", "Shipping & returns", "Care guide", "Contact us"] },
    { h: "Glam Abaya", links: ["Our story", "Stores", "Founder", "Stockists", "Journal"] },
  ];
  return (
    <footer className="footer" id="contact">
      <div className="footer__top">
        <div className="footer__brand">
          <Logo size={56} light stacked />
          <p className="footer__blurb">Modest, fluid, quietly glamorous abayas — designed in Kerala, worn everywhere.</p>
          <div className="footer__social">
            <a href="https://www.instagram.com/_glam_abaya/" target="_blank" rel="noreferrer" className="footer__soc" aria-label="Instagram"><Icon name="instagram" size={18} /></a>
            <a href="tel:+918137069830" className="footer__soc" aria-label="Call"><Icon name="phone" size={18} /></a>
          </div>
        </div>
        {cols.map((c) => (
          <nav className="footer__col" key={c.h}>
            <p className="footer__h">{c.h}</p>
            {c.links.map((l) => <a key={l} href="#" className="footer__link">{l}</a>)}
          </nav>
        ))}
        <div className="footer__col">
          <p className="footer__h">Contact</p>
          <a href="tel:+918089757896" className="footer__link">Calicut · 80897 57896</a>
          <a href="tel:+918137069830" className="footer__link">Kochi HQ · 81370 69830</a>
          <a href="https://www.instagram.com/_glam_abaya/" target="_blank" rel="noreferrer" className="footer__link">@_glam_abaya</a>
        </div>
      </div>
      <div className="footer__bottom">
        <p>© 2026 Glam Abaya · غلام اباية. All rights reserved.</p>
        <div className="footer__legal">
          <a href="#">Privacy</a><a href="#">Terms</a><a href="#">Cookies</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Story, Editorial, InstagramFeed, Stores, Newsletter, Footer });