/* ============================================================
   LUMFELL — home page sections
   ============================================================ */
const Ic = window.LumIcons;
const { CATEGORIES: CATS, PRODUCTS: PRODS, TESTIMONIALS: TESTI } = window.LumData;

/* ---- HERO (3 layout variants) ----------------------------- */
function Hero({ layout, onShop }) {
  const eyebrow = <span className="u-eyebrow hero__eyebrow">Handcrafted in the Fells</span>;
  const head = (
    <h1 className="hero__head">
      Handmade.<br /><span className="u-italic">Built to last.</span>
    </h1>
  );
  const sub = (
    <p className="hero__sub">
      Full-grain leather, cut from a single hide and saddle-stitched by hand.
    </p>
  );
  const cta = (
    <div className="hero__cta">
      <button className="btn btn--ink" onClick={onShop}><span>Shop Collection</span><Ic.IcoArrow size={17} /></button>
    </div>
  );
  const scroll = (
    <div className="hero__scroll">
      <span className="u-eyebrow">Scroll</span>
      <span className="hero__scroll-line"><Ic.IcoArrowDown size={16} /></span>
    </div>
  );

  if (layout === "centered") {
    return (
      <section className="hero hero--centered">
        <Placeholder tag="Cinematic leather bag — dark moody hero" tone={["#2b1f14", "#0d0905"]} className="hero__bg" />
        <div className="hero__center">
          {eyebrow}{head}{sub}<div className="hero__cta"><button className="btn" onClick={onShop}><span>Shop Collection</span><Ic.IcoArrow size={17} /></button></div>
        </div>
        {scroll}
      </section>
    );
  }

  if (layout === "full") {
    return (
      <section className="hero hero--full">
        <Placeholder tag="Full-bleed cinematic leather messenger — dramatic chiaroscuro lighting" tone={["#2c2015", "#0c0805"]} className="hero__bg" />
        <div className="hero__full-grid u-wrap">
          <div className="hero__full-text">
            {eyebrow}{head}{sub}<div className="hero__cta"><button className="btn" onClick={onShop}><span>Shop Collection</span><Ic.IcoArrow size={17} /></button></div>
          </div>
        </div>
        {scroll}
      </section>
    );
  }

  /* split (default — reference layout) */
  return (
    <section className="hero hero--split">
      <div className="hero__split-text">
        <div className="hero__split-inner">
          {eyebrow}{head}{sub}{cta}
        </div>
        {scroll}
      </div>
      <div className="hero__split-media">
        <Placeholder tag="Leather messenger bag — editorial hero, dramatic side light" tone={["#3a2a1a", "#120c07"]} className="hero__media-fill" />
      </div>
    </section>
  );
}

/* ---- BRAND VALUES (terse, horizontal) --------------------- */
const VALUES = [
  { ic: "IcoHand",   t: "Handmade",        d: "Entirely by hand, in one workshop." },
  { ic: "IcoHide",   t: "Full-Grain",      d: "Hides from heritage tanneries." },
  { ic: "IcoShield", t: "Built to Last",   d: "Saddle-stitched for decades." },
  { ic: "IcoLeaf",   t: "Sustainable",     d: "Vegetable-tanned, nothing wasted." },
];
function Values() {
  return (
    <section className="values">
      <div className="u-wrap">
        <div className="values__grid">
          {VALUES.map((v, i) => {
            const Icon = Ic[v.ic];
            return (
              <div className="vcell reveal" key={v.t} style={{ transitionDelay: `${i * 80}ms` }}>
                <span className="vcell__ic"><Icon size={26} sw={1.1} /></span>
                <div>
                  <h3 className="vcell__t">{v.t}</h3>
                  <p className="vcell__d">{v.d}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---- CATEGORIES (image + centered label) ------------------ */
function Categories({ onShop }) {
  return (
    <section className="cats">
      <div className="u-wrap">
        <div className="sec-head sec-head--center reveal">
          <span className="u-eyebrow" style={{ color: "var(--cognac)" }}>The Collection</span>
          <h2 className="sec-head__t">Shop by Category</h2>
        </div>
        <div className="cats__grid">
          {CATS.map((c, i) => (
            <button className="ccard reveal" key={c.id} onClick={() => onShop(c.id)}
              style={{ transitionDelay: `${i * 70}ms` }}>
              <Placeholder tag={c.tag} tone={c.tone} className="ccard__ph" />
              <div className="ccard__overlay" />
              <div className="ccard__label">
                <span className="ccard__name">{c.name}</span>
              </div>
            </button>
          ))}
        </div>
        <div className="cats__foot reveal">
          <button className="link-u" onClick={() => onShop("all")}>View All <Ic.IcoArrow size={15} /></button>
        </div>
      </div>
    </section>
  );
}

/* ---- CRAFT STORY (dark) ----------------------------------- */
function Story({ onProcess }) {
  return (
    <section className="story">
      <div className="story__text">
        <div className="story__inner reveal">
          <span className="u-eyebrow" style={{ color: "var(--cognac)" }}>Our Craft</span>
          <h2 className="story__head">Crafted by hand.<br />Honored by time.</h2>
          <p className="story__p">
            One maker sees each piece from raw hide to finished object — saddle-stitching,
            edge-burnishing, hand-finishing. The oldest way of working leather, and still the best.
          </p>
          <button className="btn btn--ghost" onClick={onProcess}><span>Discover the Process</span><Ic.IcoArrow size={16} /></button>
        </div>
      </div>
      <div className="story__media">
        <Placeholder tag="Artisan hand-stitching leather — close-up, warm window light" tone={["#34261a", "#140d07"]} className="hero__media-fill" />
        <span className="story__stamp">Saddle-stitched<br />by hand</span>
      </div>
    </section>
  );
}

/* ---- BEST SELLERS (light panel) --------------------------- */
function BestSellers({ onOpen, onAdd, onShop }) {
  const best = PRODS.filter((p) => ["p-messenger", "p-bifold", "p-belt", "p-keyholder"].includes(p.id));
  const [ti, setTi] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTi((x) => (x + 1) % TESTI.length), 6000);
    return () => clearInterval(id);
  }, []);
  const t = TESTI[ti];
  return (
    <section className="best">
      <div className="u-wrap best__grid">
        <aside className="best__aside">
          <div className="reveal">
            <span className="u-eyebrow" style={{ color: "var(--cognac)" }}>Carried Most</span>
            <h2 className="best__t">Best Sellers</h2>
            <figure className="best__quote">
              <blockquote key={ti}>“{t.quote}”</blockquote>
              <figcaption><span className="best__qname">{t.name}</span><span className="best__qmeta">{t.meta}</span></figcaption>
            </figure>
            <div className="best__dots">
              {TESTI.map((_, i) => (
                <button key={i} className={`dot ${i === ti ? "is-on" : ""}`} onClick={() => setTi(i)} aria-label={`Testimonial ${i + 1}`} />
              ))}
            </div>
            <a className="link-u" style={{ marginTop: 28 }} onClick={(e) => { e.preventDefault(); onShop && onShop("all"); }} href="#">
              View All <Ic.IcoArrow size={15} />
            </a>
          </div>
        </aside>
        <div className="best__products">
          {best.map((p, i) => (
            <ProductCard key={p.id} p={p} index={i} onOpen={onOpen} onAdd={onAdd} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- UTILITY BAND: benefits + newsletter (one dark strip) -- */
const BENEFITS = [
  { ic: "IcoTruck",  t: "Free Shipping",  d: "Worldwide" },
  { ic: "IcoReturn", t: "30-Day Returns", d: "No questions" },
  { ic: "IcoBadge",  t: "1-Year Warranty", d: "Maker's guarantee" },
  { ic: "IcoChat",   t: "Customer Care",  d: "Speak to the maker" },
];
function UtilityBand({ onToast }) {
  const [email, setEmail] = useState("");
  const [ok, setOk] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) { onToast("Enter a valid email address"); return; }
    setOk(true); onToast("You're on the list — welcome to Lumfell");
    setEmail("");
    setTimeout(() => setOk(false), 2600);
  };
  return (
    <section className="band">
      <div className="u-wrap band__inner">
        <div className="band__benefits">
          {BENEFITS.map((b) => {
            const Icon = Ic[b.ic];
            return (
              <div className="bcell" key={b.t}>
                <span className="bcell__ic"><Icon size={24} sw={1.2} /></span>
                <div>
                  <span className="bcell__t">{b.t}</span>
                  <span className="bcell__d">{b.d}</span>
                </div>
              </div>
            );
          })}
        </div>
        <div className="band__news">
          <h2 className="band__news-t">Stay in touch</h2>
          <p className="band__news-p">New releases and restocks — a few times a year, never more.</p>
          <form className="news__form" onSubmit={submit}>
            <input type="email" className="news__input" placeholder="Email address"
              value={email} onChange={(e) => setEmail(e.target.value)} aria-label="Email address" />
            <button className="btn" type="submit"><span>{ok ? "Done" : "Join"}</span></button>
          </form>
        </div>
      </div>
    </section>
  );
}

/* ---- FOOTER ----------------------------------------------- */
const FOOT_COLS = [
  { h: "Shop", links: ["Bags", "Wallets", "Belts", "Accessories"] },
  { h: "House", links: ["About", "Process", "Journal", "Stockists"] },
  { h: "Care", links: ["Contact", "Shipping", "Returns", "Warranty"] },
];
function Footer({ onHome }) {
  return (
    <footer className="foot">
      <div className="u-wrap">
        <div className="foot__top">
          <div className="foot__brand">
            <button className="foot__mark" onClick={onHome}>
              <img src="uploads/logo-cream.png" alt="" />
              <span className="u-serif">Lumfell</span>
            </button>
            <p className="foot__tag">Handmade leather goods, built to last a lifetime.</p>
            <div className="foot__social">
              {["Instagram", "Facebook", "Pinterest"].map((s) => (
                <a key={s} href="#" className="foot__soc" onClick={(e) => e.preventDefault()}>{s}</a>
              ))}
            </div>
          </div>
          <div className="foot__cols">
            {FOOT_COLS.map((c) => (
              <div className="foot__col" key={c.h}>
                <span className="foot__h">{c.h}</span>
                {c.links.map((l) => <a key={l} href="#" onClick={(e) => e.preventDefault()}>{l}</a>)}
              </div>
            ))}
          </div>
        </div>
        <div className="foot__bottom">
          <span>© 2026 Lumfell. All rights reserved.</span>
          <div className="foot__legal">
            <a href="#" onClick={(e) => e.preventDefault()}>Privacy</a>
            <a href="#" onClick={(e) => e.preventDefault()}>Terms</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Hero, Values, Categories, Story, BestSellers, UtilityBand, Footer });