/* =========================================================================
   Morning Mob — homepage
   Full-bleed image hero, the featured tee, two colourway tiles, story band.
   ========================================================================= */

/* Full-bleed hero image with a season/brand line and CTA. */
function ImageHero({ onShop }) {
  return (
    <section className="mm-hero" style={{ position: 'relative', height: 660, overflow: 'hidden',
      background: 'var(--surface-card)', borderBottom: '1px solid var(--hairline)' }}>
      <Photo id="hero" src={MM_PHOTOS.hero} label="Hero image" ratio="auto"
        style={{ position: 'absolute', inset: 0, aspectRatio: 'auto', height: '100%' }} />

      {/* legibility scrim */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,0.42) 100%)' }} />

      <div style={{ position: 'absolute', left: '50%', bottom: 56, transform: 'translateX(-50%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20, textAlign: 'center', width: '90%' }}>
        <Eyebrow color="rgba(255,255,255,0.9)">The Morning Club — est. 2023</Eyebrow>
        <h1 style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(30px, 3.6vw, 52px)',
          fontWeight: 400, color: '#fff', margin: 0, lineHeight: 1.08, letterSpacing: '-0.5px' }}>
          Quiet wear for the early crowd.</h1>
        <button onClick={onShop} style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400,
          letterSpacing: '2px', textTransform: 'uppercase', color: 'var(--ink)', background: 'var(--parchment)',
          border: 'none', padding: '11px 22px', cursor: 'pointer' }}>Shop the tee</button>
      </div>
    </section>
  );
}

function CategoryTiles({ categories, go }) {
  return (
    <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '80px 28px 0' }}>
      <div className="mm-grid" style={{ display: 'grid', gridTemplateColumns: `repeat(${categories.length}, 1fr)`, gap: 24 }}>
        {categories.map((c) => (
          <button key={c.key} onClick={() => go('shop', c.cat)} style={{ position: 'relative', border: 'none', padding: 0, cursor: 'pointer', background: 'none' }}>
            <Photo id={'tile-' + c.key} src={c.src} ratio="1 / 1" label={c.label} />
            <span style={{ position: 'absolute', left: '50%', bottom: 18, transform: 'translateX(-50%)',
              background: 'var(--parchment)', color: 'var(--tobacco)', fontFamily: 'var(--font-sans)',
              fontSize: 11, fontWeight: 400, letterSpacing: '2px', textTransform: 'uppercase', padding: '6px 12px', whiteSpace: 'nowrap' }}>
              {c.label}</span>
          </button>
        ))}
      </div>
    </section>
  );
}

function ViewMore({ onClick }) {
  return (
    <div style={{ textAlign: 'center', paddingTop: 40 }}>
      <button onClick={onClick} style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400,
        letterSpacing: '2px', textTransform: 'uppercase', color: 'var(--ink)', background: 'none',
        border: 'none', borderBottom: '1px solid var(--ink)', padding: '0 0 4px', cursor: 'pointer' }}>View the tee</button>
    </div>
  );
}

function StoryBand({ go }) {
  return (
    <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '80px 28px 0' }}>
      <div className="mm-storyband" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', borderTop: '1px solid var(--hairline)' }}>
        <button onClick={() => go('about')} aria-label="Read our story" style={{ position: 'relative', border: 'none', padding: 0, margin: 0, background: 'none', cursor: 'pointer', minHeight: 440 }}>
          <Photo id="home-story" src={MM_PHOTOS.theFounder} ratio="auto" label="Our story" style={{ position: 'absolute', inset: 0, aspectRatio: 'auto', height: '100%' }} />
        </button>
        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '64px clamp(32px, 5vw, 80px)' }}>
          <Eyebrow color="var(--tobacco)">Our story</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(32px, 3.4vw, 46px)', fontWeight: 400, color: 'var(--ink)', margin: '20px 0 0', lineHeight: 1.1, letterSpacing: '-0.5px' }}>
            The story behind the <em style={{ fontStyle: 'italic' }}>mob</em>.</h2>
          <p style={{ color: 'var(--body)', marginTop: 20, maxWidth: 420 }}>
            You have often asked what Morning Mob is. This is the answer — a small Singapore label making quiet, everyday wear for the people already awake, and the story of how it began.</p>
          <button onClick={() => go('about')} style={{ alignSelf: 'flex-start', marginTop: 28, display: 'inline-flex', alignItems: 'center', gap: 10,
            fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400, letterSpacing: '2px', textTransform: 'uppercase', color: 'var(--ink)',
            background: 'none', border: 'none', borderBottom: '1px solid var(--ink)', padding: '0 0 5px', cursor: 'pointer' }}>
            Read our story <Icon name="arrowRight" size={13} /></button>
        </div>
      </div>
    </section>
  );
}

function HomeView({ go, onOpen }) {
  const tee = MM_PRODUCTS[0];
  return (
    <React.Fragment>
      <ImageHero onShop={() => go('shop')} />
      <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 28px' }}>
        <div style={{ textAlign: 'center', padding: '80px 0 32px' }}>
          <Eyebrow color="var(--body-strong)">The Mocha Mode Tee</Eyebrow>
        </div>
        <div style={{ maxWidth: 420, margin: '0 auto' }}>
          <ProductCard product={tee} onOpen={onOpen} showCat />
        </div>
        <ViewMore onClick={() => go('shop')} />
      </section>
      <CategoryTiles categories={MM_CATEGORIES} go={go} />
      <StoryBand go={go} />
    </React.Fragment>
  );
}

Object.assign(window, { ImageHero, CategoryTiles, StoryBand, HomeView });