// Hero, Story, Values, Journal, Footer — page sections

function Hero({ onShop }) {
  return (
    <section style={{
      position: 'relative',
      minHeight: 620,
      background: 'linear-gradient(180deg, var(--sand-100) 0%, var(--sand-200) 100%)',
      padding: '80px 48px 100px',
      display: 'grid',
      gridTemplateColumns: '1.1fr 1fr',
      gap: 48,
      alignItems: 'center',
      overflow: 'hidden',
    }}>
      <div style={{ position: 'relative', zIndex: 2, maxWidth: 620 }}>
        <Eyebrow style={{ marginBottom: 24 }}>spring · volume 04</Eyebrow>
        <h1 style={{
          fontFamily: 'var(--font-display)',
          fontVariationSettings: "'opsz' 144, 'SOFT' 50",
          fontWeight: 400,
          fontSize: 92,
          lineHeight: 0.96,
          letterSpacing: '-0.028em',
          color: 'var(--tide-600)',
          margin: 0,
        }}>raised by the coast.</h1>
        <p style={{
          fontFamily: 'var(--font-serif)',
          fontSize: 22,
          lineHeight: 1.5,
          color: 'var(--tide-600)',
          marginTop: 28,
          marginBottom: 40,
          maxWidth: 480,
        }}>heavyweight basics for the family that lives in salt water. made slowly, built for the second kid, too.</p>
        <div style={{ display: 'flex', gap: 12 }}>
          <Button size="lg" onClick={onShop}>shop the collection</Button>
          <Button size="lg" variant="secondary">how it's made</Button>
        </div>
      </div>
      <div style={{ position: 'relative', height: 480, borderRadius: 24, overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: `url('assets/photos/placeholder-horizon.jpg') center/cover` }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(34,39,41,0.15) 0%, rgba(34,39,41,0) 40%)' }} />
        <div style={{ position: 'absolute', bottom: 24, left: 24, right: 24, color: 'var(--sand-100)', fontFamily: 'var(--font-serif)', fontSize: 16, fontStyle: 'italic', letterSpacing: '0.01em' }}>
          <span style={{ opacity: 0.85 }}>— the little linen set, on location in malibu</span>
        </div>
      </div>
    </section>
  );
}

function ProductTile({ p, onOpen }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onClick={() => onOpen(p)} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ cursor: 'pointer' }}>
      <div style={{
        aspectRatio: '4/5',
        background: `url('${p.image}') center/cover`,
        borderRadius: 14,
        position: 'relative',
        overflow: 'hidden',
        transition: 'transform var(--dur-base) var(--ease-tide)',
        transform: hover ? 'scale(1.01)' : 'none',
      }}>
        {p.tag && <div style={{ position: 'absolute', top: 14, left: 14 }}><Chip variant={p.tagVariant || 'solid'}>{p.tag}</Chip></div>}
      </div>
      <div style={{ padding: '14px 4px 0' }}>
        <div style={{ fontFamily: 'var(--font-display)', fontVariationSettings: "'opsz' 36, 'SOFT' 30", fontSize: 22, color: 'var(--tide-700)', letterSpacing: '-0.01em', lineHeight: 1.2 }}>{p.name}</div>
        <div style={{ fontSize: 13, color: 'var(--fg-muted)', marginTop: 4 }}>{p.sub}</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 10 }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--tide-700)' }}>${p.price}</span>
          <span style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-muted)' }}>{p.meta}</span>
        </div>
      </div>
    </div>
  );
}

function Collection({ products, onOpen }) {
  return (
    <section style={{ padding: '96px 48px', background: 'var(--sand-100)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, gap: 48 }}>
        <div>
          <Eyebrow style={{ marginBottom: 16 }}>shop · spring</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontVariationSettings: "'opsz' 144, 'SOFT' 40", fontWeight: 400, fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.022em', color: 'var(--tide-600)', margin: 0, maxWidth: 640 }}>
            pieces that outlast the phase.
          </h2>
        </div>
        <a style={{ fontSize: 14, color: 'var(--tide-700)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8, borderBottom: '1px solid var(--tide-400)', paddingBottom: 4, cursor: 'pointer' }}>
          view everything <Icon name="arrowRight" size={16} />
        </a>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
        {products.map(p => <ProductTile key={p.id} p={p} onOpen={onOpen} />)}
      </div>
    </section>
  );
}

function Values() {
  const vals = [
    { icon: 'leaf', title: 'grown slowly.', body: 'small batches in portugal and peru. no airfreight, no overstock.' },
    { icon: 'heart', title: 'built to inherit.', body: 'designed so the hand-me-down is still the good one — for the second kid, and the third.' },
    { icon: 'ship', title: 'carbon-neutral shipping.', body: 'every order. we pay the difference so you don\'t think about it.' },
  ];
  return (
    <section style={{ background: 'var(--sand-200)', padding: '96px 48px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48 }}>
        {vals.map((v, i) => (
          <div key={i}>
            <div style={{ color: 'var(--tide-600)', marginBottom: 24 }}><Icon name={v.icon} size={32} /></div>
            <div style={{ fontFamily: 'var(--font-display)', fontVariationSettings: "'opsz' 36, 'SOFT' 30", fontSize: 28, color: 'var(--tide-700)', letterSpacing: '-0.015em', marginBottom: 12 }}>{v.title}</div>
            <div style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--fg-muted)', maxWidth: 360 }}>{v.body}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function StoryBand() {
  return (
    <section style={{ padding: '120px 48px', display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 64, alignItems: 'center', background: 'var(--sand-100)' }}>
      <div style={{ borderRadius: 24, overflow: 'hidden', aspectRatio: '4/5', background: `url('assets/photos/placeholder-dune.jpg') center/cover` }} />
      <div style={{ maxWidth: 540 }}>
        <Eyebrow style={{ marginBottom: 24 }}>our story</Eyebrow>
        <h2 style={{ fontFamily: 'var(--font-display)', fontVariationSettings: "'opsz' 144, 'SOFT' 50", fontWeight: 400, fontSize: 60, lineHeight: 1.02, letterSpacing: '-0.025em', color: 'var(--tide-600)', margin: 0 }}>
          started with a hand-me-down.
        </h2>
        <p style={{ fontFamily: 'var(--font-serif)', fontSize: 20, lineHeight: 1.55, color: 'var(--tide-600)', marginTop: 32 }}>
          a pair of linen shorts, passed cousin to cousin, three summers deep — softer than the day they were sewn.
        </p>
        <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--fg-muted)', marginTop: 20 }}>
          we started moms and groms because kids clothes shouldn't end up in a landfill before they're broken in. every piece is designed to be worn, washed, and worn again — by the little one after yours.
        </p>
        <div style={{ marginTop: 32 }}><Button variant="secondary">read the full story</Button></div>
      </div>
    </section>
  );
}

function Journal() {
  const posts = [
    { title: 'a morning in malibu, with the vargas family.', tag: 'field notes', image: 'assets/photos/placeholder-clay.jpg' },
    { title: 'how we picked our portuguese mill.', tag: 'behind the seams', image: 'assets/photos/placeholder-fern.jpg' },
    { title: 'three ways to pack for a long beach day.', tag: 'guides', image: 'assets/photos/placeholder-wash.jpg' },
  ];
  return (
    <section style={{ padding: '96px 48px', background: 'var(--sand-100)', borderTop: '1px solid var(--divider)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48 }}>
        <div>
          <Eyebrow style={{ marginBottom: 16 }}>the journal</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontVariationSettings: "'opsz' 144, 'SOFT' 40", fontWeight: 400, fontSize: 48, lineHeight: 1.05, letterSpacing: '-0.02em', color: 'var(--tide-600)', margin: 0 }}>dispatches from the coast.</h2>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }}>
        {posts.map((p, i) => (
          <article key={i} style={{ cursor: 'pointer' }}>
            <div style={{ aspectRatio: '3/2', background: `url('${p.image}') center/cover`, borderRadius: 14 }} />
            <div style={{ padding: '16px 2px 0' }}>
              <Eyebrow>{p.tag}</Eyebrow>
              <div style={{ fontFamily: 'var(--font-display)', fontVariationSettings: "'opsz' 36, 'SOFT' 30", fontSize: 22, color: 'var(--tide-700)', letterSpacing: '-0.01em', lineHeight: 1.25, marginTop: 10 }}>{p.title}</div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function Newsletter() {
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);
  return (
    <section style={{ background: 'var(--tide-700)', color: 'var(--sand-100)', padding: '96px 48px', textAlign: 'center' }}>
      <Eyebrow style={{ color: 'var(--tide-200)' }}>stay close</Eyebrow>
      <h2 style={{ fontFamily: 'var(--font-display)', fontVariationSettings: "'opsz' 144, 'SOFT' 50", fontWeight: 400, fontSize: 56, lineHeight: 1.02, letterSpacing: '-0.02em', color: 'var(--sand-100)', margin: '20px 0 14px', textWrap: 'balance' }}>
          postcards. not spam.
      </h2>
      <p style={{ fontFamily: 'var(--font-serif)', fontSize: 18, color: 'var(--tide-100)', maxWidth: 480, margin: '0 auto 32px' }}>
        one letter a month. drop dates, field notes, the occasional recipe. nothing else.
      </p>
      {sent ? (
        <div style={{ fontSize: 15, color: 'var(--sand-100)' }}>you're on the list. see you at sunrise.</div>
      ) : (
        <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'flex', gap: 8, maxWidth: 440, margin: '0 auto' }}>
          <input value={email} onChange={e => setEmail(e.target.value)} placeholder="your email" style={{ flex: 1, padding: '14px 16px', borderRadius: 8, border: '1px solid var(--tide-500)', background: 'var(--tide-800)', color: 'var(--sand-100)', fontFamily: 'var(--font-sans)', fontSize: 15, outline: 'none' }} />
          <Button variant="onDark" size="md" style={{ whiteSpace: 'nowrap' }}>sign up</Button>
        </form>
      )}
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ background: 'var(--tide-800)', color: 'var(--sand-200)', padding: '64px 48px 32px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48, paddingBottom: 48, borderBottom: '1px solid rgba(247, 233, 208, 0.1)' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontVariationSettings: "'opsz' 144, 'SOFT' 50", fontSize: 26, color: 'var(--sand-100)', letterSpacing: '-0.02em' }}>moms and groms</div>
          <div style={{ fontSize: 12, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--tide-200)', marginTop: 8 }}>raised by the coast</div>
          <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--tide-100)', marginTop: 20, maxWidth: 320, opacity: 0.8 }}>
            heavyweight basics for the family that lives in salt water.
          </p>
        </div>
        {[
          { t: 'shop', items: ['new', 'little ones', 'grown-ups', 'gift cards'] },
          { t: 'co.', items: ['our story', 'how it\'s made', 'journal', 'find us'] },
          { t: 'help', items: ['sizing', 'shipping', 'returns', 'contact'] },
        ].map((col, i) => (
          <div key={i}>
            <div style={{ fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--tide-200)', marginBottom: 18 }}>{col.t}</div>
            {col.items.map(it => (
              <div key={it} style={{ fontSize: 14, color: 'var(--sand-200)', opacity: 0.85, padding: '5px 0', cursor: 'pointer' }}>{it}</div>
            ))}
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 28 }}>
        <div style={{ fontSize: 12, color: 'var(--tide-200)' }}>© 2026 moms and groms co.</div>
        <div style={{ display: 'flex', gap: 16, color: 'var(--tide-100)' }}>
          <Icon name="instagram" size={18} />
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Hero, Collection, ProductTile, Values, StoryBand, Journal, Newsletter, Footer });