/* Sweet Haven — Home page sections */

function Hero({ onNav }) {
  return (
    <section className="sh-hero">
      <div className="sh-hero-copy">
        <div className="sh-overline"><span className="sh-rule" />Small-batch bakery</div>
        <h1 className="sh-hero-title">A little something<br /><em>sweet.</em></h1>
        <p className="sh-hero-sub">
          Cakes, cookies &amp; banana bread, all baked from scratch right here.
          Order a box, build a custom cake, or come say hello.
        </p>
        <div className="sh-hero-cta">
          <button className="sh-btn primary" onClick={() => onNav("Menu")}>See the menu</button>
          <button className="sh-btn secondary" onClick={() => onNav("Custom cakes")}>Build a custom cake</button>
        </div>
        <div className="sh-hero-meta">
          <span><Icon name="clock" size={16} /> Open Tue–Sun · 8–6</span>
          <span><Icon name="map-pin" size={16} /> 14 Marlowe Lane</span>
        </div>
      </div>
      <div className="sh-hero-art">
        <div className="sh-hero-photo"><Photo src="images/carrot.jpg" name="Sweet Haven cake" /></div>
        <div className="sh-hero-badge">
          <Icon name="cake" size={22} />
          <div><strong>Baked daily</strong><span>from scratch</span></div>
        </div>
      </div>
    </section>
  );
}

function Values() {
  return (
    <section className="sh-values">
      <div className="sh-values-inner">
        {SH_VALUES.map((v) => (
          <div className="sh-value" key={v.title}>
            <span className="sh-value-icon"><Icon name={v.icon} size={26} stroke={1.5} /></span>
            <h3 className="sh-value-title">{v.title}</h3>
            <p className="sh-value-text">{v.text}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function Reviews() {
  return (
    <section className="sh-reviews">
      <div className="sh-reviews-head">
        <div className="sh-overline" style={{ justifyContent: "center" }}><span className="sh-rule" />Kind words<span className="sh-rule" style={{ marginLeft: 12, marginRight: 0 }} /></div>
        <h2 className="sh-section-title">From the regulars</h2>
      </div>
      <div className="sh-reviews-grid">
        {SH_REVIEWS.map((r) => (
          <figure className="sh-review" key={r.name}>
            <div className="sh-stars">{[0, 1, 2, 3, 4].map((i) => <Icon key={i} name="star" size={15} stroke={0} color="var(--caramel-400)" style={{ fill: "var(--caramel-300)" }} />)}</div>
            <blockquote>"{r.quote}"</blockquote>
            <figcaption><strong>{r.name}</strong><span>{r.note}</span></figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
}

function CustomCallout({ onNav }) {
  return (
    <section className="sh-callout">
      <div className="sh-callout-inner">
        <div className="sh-callout-photo"><Photo src="images/customcake.jpg" name="Custom cake" /></div>
        <div className="sh-callout-copy">
          <div className="sh-overline"><span className="sh-rule" />Made just for you</div>
          <h2 className="sh-callout-title">Cakes for the days that matter.</h2>
          <p>Birthdays, anniversaries, or a little bento just because — tell us the occasion and we'll build it by hand, exactly how you pictured it.</p>
          <button className="sh-btn dark" onClick={() => onNav("Custom cakes")}>Start a custom order</button>
        </div>
      </div>
    </section>
  );
}

function Newsletter() {
  const [done, setDone] = React.useState(false);
  return (
    <section className="sh-news">
      <div className="sh-news-inner">
        <div>
          <div className="sh-overline"><span className="sh-rule" />Stay sweet</div>
          <h2 className="sh-news-title">What's baking this week</h2>
          <p className="sh-news-sub">A short note every Friday — the weekend's specials and when the cookies land. No spam, ever.</p>
        </div>
        {done ? (
          <div className="sh-news-done"><Icon name="check" size={18} /> You're on the list — see you Friday.</div>
        ) : (
          <form className="sh-news-form" onSubmit={(e) => { e.preventDefault(); setDone(true); }}>
            <input className="sh-input" type="email" required placeholder="you@email.com" aria-label="Email" />
            <button className="sh-btn primary" type="submit">Join</button>
          </form>
        )}
      </div>
    </section>
  );
}

function Home({ onNav, onAdd, onOpen }) {
  const favIds = ["chocolate", "coconut", "carrot", "chocchip"];
  const favourites = favIds.map((id) => SH_PRODUCTS.find((p) => p.id === id)).filter(Boolean);
  return (
    <>
      <Hero onNav={onNav} />
      <Values />
      <MenuGrid products={favourites} onAdd={onAdd} onOpen={onOpen} filter="All" compact onNav={onNav} />
      <CustomCallout onNav={onNav} />
      <Newsletter />
    </>
  );
}

Object.assign(window, { Hero, Values, CustomCallout, Newsletter, Home });