/* ============================================================
   LINGEA — Home
   ============================================================ */
function Hero({ nav }) {
  const P = window.LINGEA.products;
  const hero = P.find((p) => p.id === "asteria-rose");
  return (
    <section className="hero">
      <div className="hero-text">
        <span className="eyebrow accent fade-up in">Edition 01 — The Foundational Collection</span>
        <h1 className="display hero-h1 fade-up in" style={{ animationDelay: "80ms" }}>
          Colour,<br />set in gold.
        </h1>
        <p className="body hero-p fade-up in" style={{ animationDelay: "160ms" }}>
          Seven pieces. Each one made to order in solid 18k gold and certified
          coloured stones — a small, deliberate edition for collectors who
          prefer curation to choice.
        </p>
        <div className="hero-cta fade-up in" style={{ animationDelay: "240ms" }}>
          <button className="btn" onClick={() => nav({ page: "collection" })}>Discover the edition</button>
          <button className="ulink" onClick={() => nav({ page: "product", id: "libellule" })}>
            See the dragonfly <span className="arr"><Icon name="arrow" size={16} /></span>
          </button>
        </div>
      </div>
      <button className="hero-img" onClick={() => nav({ page: "product", id: hero.id })} aria-label="View the Astéria bracelet">
        <img src={hero.images[0]} alt="Astéria cabochon bracelet in rose gold" />
        <span className="hero-tag">
          <span className="eyebrow">{hero.edition} · Astéria</span>
          <span className="hero-tag-price">{fmt(hero.price)}</span>
        </span>
      </button>
    </section>
  );
}

function Manifesto() {
  return (
    <section className="manifesto wrap">
      <span className="eyebrow accent fade-up">The premise</span>
      <p className="display manifesto-line fade-up" style={{ animationDelay: "60ms" }}>
        Most houses ask you to scroll endlessly. We made seven things, and we
        made them properly.
      </p>
      <p className="body manifesto-sub fade-up" style={{ animationDelay: "120ms" }}>
        Edition 01 is closed at seven pieces — two bracelets, four rings, one
        brooch. No seasonal churn, no filler. When a piece sells, it is made for
        you, by hand, and the next collector waits. Scarcity is not a tactic
        here; it is simply how a small house should work.
      </p>
    </section>
  );
}

function Featured({ nav }) {
  const P = window.LINGEA.products;
  const picks = ["libellule", "volute-floraison", "asteria-white"]
    .map((id) => P.find((p) => p.id === id));
  return (
    <section className="featured">
      {picks.map((p, i) => (
        <div className={"feat-row" + (i % 2 ? " rev" : "")} key={p.id}>
          <button className="feat-img fade-up" onClick={() => nav({ page: "product", id: p.id })} aria-label={"View " + p.name}>
            <img src={p.images[0]} alt={p.name} loading="lazy" />
          </button>
          <div className="feat-meta fade-up" style={{ animationDelay: "100ms" }}>
            <span className="eyebrow accent">{p.type}{p.edition ? " · " + p.edition : ""}</span>
            <h2 className="display feat-name">
              {p.name}{p.variant ? <em> {p.variant}</em> : null}
            </h2>
            <p className="body feat-story">{p.story}</p>
            <div className="feat-foot">
              <span className="feat-price">{fmt(p.price)}</span>
              <button className="ulink" onClick={() => nav({ page: "product", id: p.id })}>
                View piece <span className="arr"><Icon name="arrow" size={16} /></span>
              </button>
            </div>
          </div>
        </div>
      ))}
    </section>
  );
}

function CollectionPreview({ nav }) {
  const P = window.LINGEA.products;
  return (
    <section className="coll-preview wrap">
      <div className="section-head fade-up">
        <div>
          <span className="eyebrow accent">Edition 01</span>
          <h2 className="display section-title">The seven pieces</h2>
        </div>
        <button className="ulink" onClick={() => nav({ page: "collection" })}>
          View all <span className="arr"><Icon name="arrow" size={16} /></span>
        </button>
      </div>
      <div className="grid-3">
        {P.map((p, i) => <ProductCard product={p} nav={nav} index={i} key={p.id} />)}
      </div>
    </section>
  );
}

function DeRisk() {
  const cols = [
    { icon: "truck", t: "Arrives by hand", s: "Every order ships fully insured via FedEx Priority Overnight, signature required. We notify you the moment it is on the road, and again when it is at your door." },
    { icon: "return", t: "Decide at home", s: "Try a piece in your own light. Returns are open for 30 days — prepaid, insured, with a tamper-evident security tag. No questions, no restocking fee." },
    { icon: "gem", t: "Know exactly what you own", s: "Each piece arrives with an independent coloured-stone report, its exact gram weight, and full material specification. 18k solid gold throughout — never plated, never filled." },
  ];
  return (
    <section className="derisk">
      <div className="wrap">
        <div className="derisk-head fade-up">
          <span className="eyebrow accent">A $5,000 decision, de-risked</span>
          <h2 className="display section-title">Buying from a new house, without the leap of faith.</h2>
        </div>
        <div className="derisk-grid">
          {cols.map((c, i) => (
            <div className="derisk-cell fade-up" key={i} style={{ animationDelay: i * 90 + "ms" }}>
              <span className="derisk-ic"><Icon name={c.icon} size={26} stroke={1.1} /></span>
              <h3>{c.t}</h3>
              <p className="body">{c.s}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Quote({ nav }) {
  return (
    <section className="quote-band">
      <div className="wrap">
        <p className="serif-quote quote-line fade-up">
          “We would rather make seven pieces that outlive us than seven hundred
          that don’t survive the season.”
        </p>
        <span className="eyebrow fade-up" style={{ animationDelay: "100ms" }}>Lingea — Edition 01</span>
        <div className="fade-up" style={{ animationDelay: "160ms", marginTop: 30 }}>
          <button className="btn ghost" onClick={() => nav({ page: "story" })}>Read the edition</button>
        </div>
      </div>
    </section>
  );
}

function HomePage({ nav }) {
  useReveal("home");
  return (
    <main className="home">
      <Hero nav={nav} />
      <Manifesto />
      <Featured nav={nav} />
      <CollectionPreview nav={nav} />
      <DeRisk />
      <Quote nav={nav} />
    </main>
  );
}

Object.assign(window, { HomePage });