// HeroMagazine — redesigned hero
// Awning + masthead + giant cover headline + floating product cut-outs.
// Pulls visual cues from the actual WH G58 strawberry awning storefront.

function HeroMagazine({ onShop, onPlayground, onAdd, headlineKey = "world" }) {
  // headline variants — each as a "cover composition" with inline image
  const headlines = {
    world: (
      <>
        <div className="ln ln-1">A world of</div>
        <div className="ln ln-2">
          <span className="ital">magic</span>
          <span className="inline-img"><img src="media/product-08-music-instruments.webp" alt="" /></span>
          <span className="ampersand">&amp;</span>
        </div>
        <div className="ln ln-3">
          imagin<span className="ital">a</span>tion
          <span className="inline-strawberry"><MotifStrawberry size={70} /></span>
        </div>
        <div className="ln-4">for the next generation.</div>
      </>
    ),
    curated: (
      <>
        <div className="ln ln-1">Objects, chosen</div>
        <div className="ln ln-2">
          the <span className="ital">way</span>
          <span className="inline-img"><img src="media/product-30-wall-art-baby.webp" alt="" /></span>
        </div>
        <div className="ln ln-3">
          grown-ups <span className="ital">choose art.</span>
        </div>
        <div className="ln-4">Five hundred and fifteen of them, at last count.</div>
      </>
    ),
    playground: (
      <>
        <div className="ln ln-1">A strawberry,</div>
        <div className="ln ln-2">
          tucked
          <span className="inline-strawberry"><MotifStrawberry size={90} /></span>
          <span className="ital">between</span>
        </div>
        <div className="ln ln-3">
          the <span className="ital">galleries.</span>
        </div>
        <div className="ln-4">A shop, a hidden playground, an Alserkal afternoon.</div>
      </>
    ),
  };

  return (
    <section className="hero-mag" id="top">
      {/* Awning — same family as the actual storefront */}
      <div className="awning" aria-hidden>
        <svg className="scallops" viewBox="0 0 1440 28" preserveAspectRatio="none">
          {Array.from({ length: 36 }, (_, i) => {
            const w = 40, x = i * w;
            return (
              <path
                key={i}
                d={`M ${x},0 a ${w/2},${w/2} 0 0 0 ${w},0 Z`}
                fill="var(--primary)"
              />
            );
          })}
        </svg>
        <div className="pole"></div>
        <div className="berry-pendant">
          <MotifStrawberry size={68} />
        </div>
      </div>

      {/* Floating cut-outs sit behind the headline */}
      <div className="cover-cuts" aria-hidden>
        <div className="cover-cut cut-bike">
          <span className="cut-num">N° 14</span>
          <div className="cut-img"><img src="media/product-14-bicycle.webp" alt="" /></div>
          <span className="cut-cap">The Dutch Style 24″ · Adam Bike</span>
        </div>
        <div className="cover-cut cut-train">
          <span className="cut-num">N° 22</span>
          <div className="cut-img"><img src="media/product-22-nursery-light-train.webp" alt="" /></div>
          <span className="cut-cap">Train Nursery Light · Little Lights</span>
        </div>
        <div className="cover-cut cut-doorway">
          <span className="cut-num">N° 34</span>
          <div className="cut-img"><img src="media/product-34-doorway-theatre.webp" alt="" /></div>
          <span className="cut-cap">Strawberry Doorway · MIMIKI</span>
        </div>
        <div className="cover-cut cut-pens">
          <span className="cut-num">N° 03</span>
          <div className="cut-img"><img src="media/product-03-gel-pens.webp" alt="" /></div>
          <span className="cut-cap">Pen Duo · OMY</span>
        </div>

        {/* Subtle decorative motifs */}
        <MotifSun size={170} style={{ position: "absolute", left: "26%", top: "12%", opacity: 0.55 }} />
        <MotifSquiggle width={220} color="var(--sky)" style={{ position: "absolute", right: "30%", bottom: "26%" }} />
        <MotifLeaf size={100} style={{ position: "absolute", left: "44%", bottom: "8%", transform: "rotate(-30deg)", opacity: 0.7 }} />
        <MotifStar size={28} color="var(--accent)" style={{ position: "absolute", right: "22%", top: "30%" }} />
        <MotifStar size={20} color="var(--terracotta)" style={{ position: "absolute", left: "32%", bottom: "32%" }} />
      </div>

      <div className="container">
        {/* Masthead */}
        <div className="masthead">
          <div className="mh-left">StrawberryFields.ae <span className="mh-rule"></span> Est. 2017</div>
          <div className="mh-center">Volume 26 · Spring/Summer 2026</div>
          <div className="mh-right">Alserkal Avenue · WH G58 · Dubai</div>
        </div>

        {/* Giant headline */}
        <h1 className="cover-headline">
          {headlines[headlineKey] || headlines.world}
        </h1>

        {/* Foot — coverlines · cover star · live status */}
        <div className="cover-foot">
          {/* Coverlines (left) */}
          <div className="cover-lines">
            <div className="cl-head">Also inside this issue</div>

            <div className="cl-line" onClick={onShop}>
              <span className="cl-num">20</span>
              <span className="cl-text">A new <em>Hibou Home</em> wallpaper — clouds, rainbows, a little quiet.</span>
              <span className="cl-page">Shop · p. 12</span>
            </div>
            <div className="cl-line" onClick={onShop}>
              <span className="cl-num">15</span>
              <span className="cl-text">A doll house, <em>hand-built in Beirut</em> — the new Kids&nbsp;for&nbsp;Turath.</span>
              <span className="cl-page">In residence · p. 18</span>
            </div>
            <div className="cl-line" onClick={onPlayground}>
              <span className="cl-num">22</span>
              <span className="cl-text">The Hidden Playground price card, <em>in plain HTML</em> at last.</span>
              <span className="cl-page">Playground · p. 24</span>
            </div>
            <div className="cl-line" onClick={onShop}>
              <span className="cl-num">48</span>
              <span className="cl-text">Forty-eight design houses, <em>under one strawberry awning</em>.</span>
              <span className="cl-page">Brands · p. 32</span>
            </div>

            {/* Live status block */}
            <div className="live-status" aria-label="Shop open status">
              <div className="ls-dot"></div>
              <div className="ls-text">
                <strong>Open today</strong>
                <span>Tue — Sun · 09:30 — 19:30</span>
                <span className="sep">·</span>
                <span>Alserkal WH G58</span>
              </div>
              <div className="ls-bar"><div className="ls-bar-fill" style={{ width: "62%" }}></div></div>
            </div>
          </div>

          {/* Cover star (right) — featured product */}
          <div className="cover-star">
            <div className="cs-img">
              <img src="media/product-34-doorway-theatre.webp" alt="Strawberry Doorway Theatre" />
              <span className="cs-badge">N° 34</span>
            </div>
            <div className="cs-body">
              <div>
                <div className="cs-vendor">MIMIKI · Pretend play</div>
                <div className="cs-title">Strawberry Doorway Theatre</div>
                <div style={{ fontSize: 13, color: "var(--muted)", maxWidth: "36ch" }}>
                  A red-and-white awning for any doorframe — half theatre, half boutique. Made to outlast the toddler years.
                </div>
              </div>
              <div className="cs-price">AED 325</div>
            </div>
            <div className="cs-foot">
              <button className="btn btn-primary" onClick={() => onAdd && onAdd(PRODUCTS.find(p => p.id === "34"))}>
                Add to bag
                <span aria-hidden>＋</span>
              </button>
              <button className="btn btn-soft" onClick={onShop}>See the issue →</button>
            </div>
          </div>
        </div>

        <div className="folio">
          <span className="folio-rule"></span>
          folio one — of fifty-one
          <span className="folio-rule"></span>
        </div>
      </div>
    </section>
  );
}

window.HeroMagazine = HeroMagazine;