/* Down The Cove homepage — hero, trust, categories, product rails, club, ask-first */
const { Button, ProductCard, Badge } = window.DownTheCoveDesignSystem_3cc6fe;
const SIcon = window.DtcIcon;

function Hero({ variant, onShop, onHelp }) {
  const fathers = variant !== "evergreen";
  if (fathers) {
    return (
      <section className="hp-hero">
        <div className="hp-hero__split">
          <div className="hp-hero__media">
            <img src="assets/brand/about-family-owned-coastal.webp"
                 alt="A coastal Father's Day gift box wrapped with navy ribbon and a wax seal" />
            <span className="hp-hero__chip"><span className="hp-promo__dot" /> Father's Day · Sun 21 June</span>
          </div>
          <div className="hp-hero__panel">
            <span className="hp-hero__script">for the one who'd rather be by the water</span>
            <h1 className="hp-hero__head">Give the coast this Father's Day.</h1>
            <p className="hp-hero__lede2">
              Hand-packed boxes of fishing kit, seafood tools and smoking hampers — sealed with a wax stamp, sent the length of the UK.
            </p>
            <div className="hp-hero__cta">
              <Button variant="accent" size="lg" onClick={onShop} rightIcon={<SIcon name="arrow-right" size={16} />}>
                Shop Father's Day gifts
              </Button>
              <Button variant="outline" size="lg" onClick={onHelp} rightIcon={<SIcon name="arrow-right" size={15} />}>
                Shop bestsellers
              </Button>
            </div>
            <div className="hp-hero__note2">
              <SIcon name="truck" size={15} /> Free UK delivery over £30 · order by Thu 18 June
            </div>
          </div>
        </div>
      </section>
    );
  }
  return (
    <section className="hp-hero">
      <div className="hp-hero__card">
        <img className="hp-hero__img" src="assets/brand/family-crabbing.webp"
             alt="A family crabbing on a Cornish harbour wall" />
        <div className="hp-hero__scrim" />
        <div className="hp-hero__body">
          <span className="hp-hero__flag">
            <span className="hp-promo__dot" /> Useful coastal things
          </span>
          <h1 className="hp-hero__title">Chosen with care, by the cove.</h1>
          <p className="hp-hero__lede">
            Fishing kit, seafood tools, smoking hampers and coastal gifts — chosen to last and sent the length of the UK.
          </p>
          <div className="hp-hero__cta">
            <Button variant="accent" size="lg" onClick={onShop} rightIcon={<SIcon name="arrow-right" size={16} />}>
              Shop the cove
            </Button>
            <Button variant="outline" size="lg" onClick={onHelp} rightIcon={<SIcon name="arrow-right" size={15} />}>
              Shop bestsellers
            </Button>
          </div>
          <div className="hp-hero__note">
            Free UK delivery over £30 <span /> Order by Thu 18 June for Father's Day
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustMarquee({ items }) {
  const group = (k) => (
    <div className="hp-trust__group" key={k} aria-hidden={k === 1}>
      {items.map((it, i) => (
        <span className="hp-trust__item" key={i}><SIcon name={it.i} size={15} />{it.t}</span>
      ))}
    </div>
  );
  return (
    <div className="hp-trust" role="region" aria-label="Why shop with us">
      <div className="hp-trust__track">{group(0)}{group(1)}</div>
    </div>
  );
}

function Categories({ cats, onPick, onGifts }) {
  return (
    <section className="hp-section">
      <div className="hp-section__head">
        <div>
          <p className="hp-eyebrow">Browse the shop</p>
          <h2 className="hp-title">Find your corner of the coast</h2>
        </div>
      </div>
      <div className="hp-cats">
        <button className="hp-cat hp-cat--feature" onClick={onGifts} aria-label="Shop Father's Day gifts">
          <img src="assets/brand/hero-clean-banner.webp" alt="" />
          <span className="hp-cat__scrim" />
          <span className="hp-cat__feature">
            <span className="hp-cat__script">the gift edit</span>
            <span className="hp-cat__ftitle">Father's Day gifts</span>
            <span className="hp-cat__fcta">Shop gifts <SIcon name="arrow-right" size={15} /></span>
          </span>
        </button>
        {cats.map((c) => (
          <button key={c.id} className="hp-cat" onClick={() => onPick(c.id)} aria-label={c.title}>
            <img src={"assets/" + c.img} alt="" />
            <span className="hp-cat__scrim" />
            <span className="hp-cat__label">
              <span className="hp-cat__title">{c.title}</span>
              <span className="hp-cat__sub">{c.sub}</span>
            </span>
          </button>
        ))}
      </div>
    </section>
  );
}

function tile(p, cart, onQty, wish, onWish) {
  return (
    <ProductCard
      key={p.id}
      name={p.name}
      price={p.price}
      originalPrice={p.was}
      category={p.cat}
      imageSrc={window.DTC.pimg(p)}
      rating={p.rating}
      reviewCount={p.reviews}
      badge={p.badge}
      lowStock={p.low}
      quantity={cart[p.id] || 0}
      onQuantityChange={(n) => onQty(p.id, n)}
      wishlisted={!!wish[p.id]}
      onToggleWishlist={() => onWish(p.id)}
    />
  );
}

function GiftEdit({ products, cart, onQty, wish, onWish, onShop }) {
  return (
    <section className="hp-section">
      <div className="hp-section__head">
        <div>
          <p className="hp-eyebrow" style={{ color: "var(--sale)" }}>The Father's Day gift edit</p>
          <h2 className="hp-title">Sorted, sealed & ready to give</h2>
        </div>
        <a className="hp-seeall" href="#" onClick={(e) => { e.preventDefault(); onShop(); }}>
          All gifts <SIcon name="chevron-right" size={15} />
        </a>
      </div>
      <div className="hp-rail">
        {products.map((p) => tile(p, cart, onQty, wish, onWish))}
      </div>
    </section>
  );
}

function Bestsellers({ products, cart, onQty, wish, onWish, onShop }) {
  return (
    <section className="hp-section">
      <div className="hp-section__head">
        <div>
          <p className="hp-eyebrow">From the cove</p>
          <h2 className="hp-title">This week's favourites</h2>
        </div>
        <a className="hp-seeall" href="#" onClick={(e) => { e.preventDefault(); onShop(); }}>
          View all <SIcon name="chevron-right" size={15} />
        </a>
      </div>
      <div className="hp-grid">
        {products.map((p) => tile(p, cart, onQty, wish, onWish))}
      </div>
    </section>
  );
}

function CoveClub({ onJoin }) {
  return (
    <section className="hp-section">
      <div className="hp-club">
        <span className="hp-club__script">cove club</span>
        <p className="hp-club__eyebrow"><SIcon name="anchor" size={14} /> Subscription box</p>
        <h2 className="hp-club__title">A little of the coast, posted monthly.</h2>
        <p className="hp-club__body">
          Hand-picked seasonal kit, a recipe card and a regional fishing guide — chosen by us, delivered to your door.
        </p>
        <ul className="hp-club__list">
          <li><SIcon name="check" size={16} /> New coastal goods every month</li>
          <li><SIcon name="check" size={16} /> Members save 10% in the shop</li>
          <li><SIcon name="check" size={16} /> Skip, pause or cancel anytime</li>
        </ul>
        <div className="hp-club__foot">
          <div className="hp-club__price">From £29<small>per month, free delivery</small></div>
          <Button variant="accent" size="md" onClick={onJoin} rightIcon={<SIcon name="arrow-right" size={15} />}>
            Join the Cove Club
          </Button>
        </div>
        <svg className="hp-club__wave" viewBox="0 0 400 60" preserveAspectRatio="none" fill="none">
          <path d="M0 30c40 0 40-18 80-18s40 18 80 18 40-18 80-18 40 18 80 18 40-18 80-18v60H0z" fill="currentColor"/>
        </svg>
      </div>
    </section>
  );
}

function GiftFinder({ onPick }) {
  const buckets = [
    { id: "under25", label: "Under £25", sub: "Little luxuries", icon: "gift" },
    { id: "25to50", label: "£25–£50", sub: "Crowd-pleasers", icon: "anchor" },
    { id: "over50", label: "£50+", sub: "The big one", icon: "star" },
  ];
  return (
    <section className="hp-section">
      <div className="hp-section__head">
        <div>
          <p className="hp-eyebrow" style={{ color: "var(--sale)" }}>Father's Day gift finder</p>
          <h2 className="hp-title">Sorted in a tap — shop by budget</h2>
        </div>
      </div>
      <div className="hp-finder">
        {buckets.map((b) => (
          <button key={b.id} className="hp-finder__card" onClick={() => onPick(b.id)} aria-label={"Gifts " + b.label}>
            <span className="hp-finder__ico"><SIcon name={b.icon} size={18} /></span>
            <span className="hp-finder__label">{b.label}</span>
            <span className="hp-finder__sub">{b.sub}</span>
            <SIcon name="arrow-right" size={15} className="hp-finder__arrow" />
          </button>
        ))}
      </div>
    </section>
  );
}

function BrandStory({ onShop }) {
  return (
    <section className="hp-section">
      <div className="hp-ask">
        <div className="hp-ask__img">
          <img src="assets/brand/family-crabbing.webp" alt="A family crabbing together on a Cornish harbour wall" />
        </div>
        <div className="hp-ask__body">
          <span className="hp-ask__script">founded by the water</span>
          <h3 className="hp-ask__title">A family shop, packed in Cornwall.</h3>
          <p className="hp-ask__text">
            We sell the coastal kit we actually use — chosen to last, fairly priced and sent the length of the UK. Useful things, no hard sell.
          </p>
          <div className="hp-promise">
            <div className="hp-promise__item"><SIcon name="truck" size={19} /><span>Free UK delivery<br />over £30</span></div>
            <div className="hp-promise__item"><SIcon name="rotate-ccw" size={19} /><span>Easy 30-day<br />returns</span></div>
            <div className="hp-promise__item"><SIcon name="shield-check" size={19} /><span>Secure<br />checkout</span></div>
          </div>
          <div className="hp-ask__cta">
            <Button variant="primary" size="lg" onClick={onShop} rightIcon={<SIcon name="arrow-right" size={16} />}>
              Shop the cove
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, TrustMarquee, Categories, GiftEdit, Bestsellers, CoveClub, GiftFinder, BrandStory });