// Hero, marquee, services sections

function Nav() {
  const [open, setOpen] = React.useState(false);
  return (
    <nav className="pm-nav" style={{
      position: 'sticky', top: 0, zIndex: 40,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '20px 40px', background: 'rgba(10,10,10,.85)',
      backdropFilter: 'blur(12px)',
      borderBottom: `2px solid ${PM.bone}`,
    }}>
      <a href="#home" style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
        <PMMonogram size={36} />
        <div className="pm-display pm-nav-brand-text" style={{ fontSize: 22, color: PM.bone, lineHeight: .85 }}>
          Pressing<br/><span style={{ color: PM.yellow }}>Matters</span>
        </div>
      </a>
      <div className="pm-nav-menu" style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
        <div className="pm-nav-links" style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
          {['Work', 'Process', 'Story', 'Reviews', 'Contact'].map((s) => (
            <a key={s} href={'#' + s.toLowerCase()} className="pm-nav-link">{s}</a>
          ))}
        </div>
        <a href="#contact" className="pm-btn pm-btn-y pm-nav-cta" style={{ padding: '12px 20px', fontSize: 14, boxShadow: 'none' }}>
          Get a quote →
        </a>
      </div>
    </nav>
  );
}

function Hero() {
  const [scrollY, setScrollY] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section id="home" className="pm-hero-section" style={{
      padding: '60px 40px 60px', position: 'relative',
      minHeight: '92vh', overflow: 'hidden',
    }}>
      <div className="pm-grain" />
      <div className="pm-spotlight" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} />

      <div className="pm-reveal pm-hero-kicker" style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        marginBottom: 40, position: 'relative',
      }}>
        <div className="pm-mono" style={{ fontSize: 11, color: PM.yellow }}>
          ◆ EST. 2019 · JOHANNESBURG, ZA
        </div>
        <div className="pm-mono" style={{ fontSize: 11, color: PM.muted }}>
          VOL. 06 · ISSUE 05 · 2026
        </div>
      </div>

      <div className="pm-hero-grid" style={{
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48,
        alignItems: 'center', position: 'relative',
      }}>
        <div className="pm-reveal">
          <div className="pm-display pm-hero-title" style={{
            fontSize: 'clamp(80px,13vw,200px)', color: PM.bone,
            transform: `translateY(${-scrollY * 0.05}px)`,
          }}>
            We Print.
          </div>
          <div className="pm-script pm-hero-script-title" style={{
            fontSize: 'clamp(60px,9vw,150px)', color: PM.yellow,
            lineHeight: .9, marginTop: -10,
            transform: `translateY(${-scrollY * 0.08}px) rotate(-2deg)`,
            transformOrigin: 'left center',
          }}>
            You Stand Out.
          </div>

          <div className="pm-stamp-row" style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 32, flexWrap: 'wrap' }}>
            <div className="pm-stamp">Quality prints.</div>
            <div className="pm-stamp pm-stamp-bone" style={{ transform: 'rotate(2deg)' }}>Lasting impact.</div>
          </div>

          <p className="pm-hero-copy" style={{
            maxWidth: 520, fontSize: 17, lineHeight: 1.6, marginTop: 36,
            color: 'rgba(241,236,224,.85)',
          }}>
            South Africa&rsquo;s loudest custom print studio. T-shirts, jeans, mugs, totes. Pressed by hand, finished with love, shipped on time.
          </p>

          <div className="pm-cta-row" style={{ display: 'flex', gap: 20, marginTop: 36, flexWrap: 'wrap' }}>
            <a href="#contact" className="pm-btn pm-btn-y">Start a project →</a>
            <a href="#work" className="pm-btn pm-btn-out">See the work</a>
          </div>
        </div>

        {/* Right - main hero image stack */}
        <div className="pm-reveal pm-hero-art" style={{ position: 'relative', height: 580 }}>
          {/* Back image - full BG */}
          <div className="pm-hero-card" style={{
            position: 'absolute', top: 0, right: 0, width: '105%', height: '100%',
            transform: `rotate(2deg) translateY(${-scrollY * 0.04}px)`,
            boxShadow: `12px 12px 0 ${PM.yellow}`, overflow: 'hidden',
            border: `3px solid ${PM.bone}`,
          }}>
            <img src={A('assets/hero-bg.png')} alt="Pressing Matters print studio" style={{
              width: '100%', height: '100%', objectFit: 'cover',
            }} />
          </div>

          {/* Floating sticker badge */}
          <div className="pm-hero-badge" style={{
            position: 'absolute', top: '-2%', right: '-6%', width: 130, height: 130,
            background: PM.yellow, borderRadius: '50%',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            transform: 'rotate(-12deg)',
            boxShadow: `4px 4px 0 ${PM.ink}`,
            zIndex: 5,
          }}>
            <div style={{ textAlign: 'center', fontFamily: FONTS.display, color: PM.ink, fontSize: 14, lineHeight: 1, padding: 8 }}>
              BIG IDEAS<br/>BOLD PRINTS<br/>REAL IMPACT
            </div>
          </div>
        </div>
      </div>

    </section>
  );
}

function Marquee({ items, bg = PM.yellow, color = PM.ink, reverse = false }) {
  return (
    <section style={{
      padding: '20px 0', background: bg, color,
      borderTop: `2px solid ${PM.bone}`, borderBottom: `2px solid ${PM.bone}`,
      overflow: 'hidden',
    }}>
      <div style={{ overflow: 'hidden', whiteSpace: 'nowrap' }}>
        <div className={'pm-marquee' + (reverse ? ' pm-marquee-r' : '')}>
          {[...Array(2)].map((_, i) => (
            <div key={i} className="pm-marquee-group" style={{ display: 'inline-flex', alignItems: 'center', gap: 40, paddingRight: 40 }}>
              {items.map((t, j) => (
                <span key={j} className="pm-display pm-marquee-item" style={{ fontSize: 36, display: 'inline-flex', alignItems: 'center', gap: 40 }}>
                  {t}<span style={{ fontFamily: FONTS.body, fontSize: 22 }}>★</span>
                </span>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Services() {
  const items = [
    { n: '01', title: 'CLOTHING', sub: 'Printing', body: 'T-shirts, hoodies, polos, sweats. DTG, screen-print, embroidery.', img: A('assets/grid-1-apparel.png'), tags: ['DTG', 'Screen', 'Embroidery'] },
    { n: '02', title: 'DRINKWARE', sub: 'Mugs & more', body: 'Sublimation mugs, travel cups, glassware. Photo-quality, dishwasher-safe.', img: A('assets/grid-2-drinkware.png'), tags: ['Sublimation', 'Wrap', 'Vinyl'] },
    { n: '03', title: 'JEANS', sub: 'Denim work', body: 'Custom branded denim. Patches, prints and finishing on jeans built to last.', img: A('assets/grid-3-headwear.png'), tags: ['Patches', 'Print', 'Custom'] },
    { n: '04', title: 'BULK', sub: 'Corporate kit', body: 'End-to-end uniform programs for SMEs, schools, sports clubs.', img: A('assets/grid-1-apparel.png'), tags: ['Teams', 'Account-managed', 'Repeat'] },
  ];
  return (
    <section id="work" className="pm-section" style={{ padding: '120px 40px', position: 'relative' }}>
      <div className="pm-reveal pm-section-heading" style={{ marginBottom: 64, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 32 }}>
        <div>
          <div className="pm-mono" style={{ fontSize: 11, color: PM.yellow, marginBottom: 16 }}>◆ 02 / WHAT WE PRESS</div>
          <h2 className="pm-display pm-section-title" style={{ fontSize: 'clamp(56px,8vw,120px)', color: PM.bone, margin: 0 }}>
            Four<br/><span style={{ color: PM.yellow }}>Specialties.</span>
          </h2>
        </div>
        <div className="pm-script pm-section-script" style={{ fontSize: 36, color: PM.bone, transform: 'rotate(-2deg)', maxWidth: 400 }}>
          Hand-finished, every<br/>single one of them.
        </div>
      </div>

      <div className="pm-services-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
        {items.map((s, i) => (
          <div key={s.n} className="pm-card pm-reveal pm-service-card" style={{
            minHeight: 380, display: 'grid', gridTemplateColumns: '1fr 1fr',
            transform: i % 2 ? 'rotate(.4deg)' : 'rotate(-.4deg)',
            boxShadow: `8px 8px 0 ${PM.yellow}`,
          }}>
            <div className="pm-service-body" style={{ padding: 32, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div>
                <div className="pm-mono" style={{ fontSize: 11, color: PM.muted }}>NO. {s.n}</div>
                <div className="pm-display pm-service-title" style={{ fontSize: 56, marginTop: 16, color: PM.ink }}>
                  {s.title}
                </div>
                <div className="pm-script" style={{ fontSize: 28, color: PM.yellowDeep, marginTop: -4 }}>
                  {s.sub}.
                </div>
              </div>
              <div>
                <p style={{ fontSize: 14, color: '#444', lineHeight: 1.5, marginBottom: 16 }}>{s.body}</p>
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                  {s.tags.map((t) => (
                    <span key={t} style={{
                      padding: '4px 10px', background: PM.ink, color: PM.bone,
                      fontFamily: FONTS.mono, fontSize: 10, letterSpacing: '.1em', textTransform: 'uppercase',
                    }}>
                      {t}
                    </span>
                  ))}
                </div>
              </div>
            </div>
            <div className="pm-service-image" style={{ background: PM.ink, position: 'relative', overflow: 'hidden' }}>
              <img src={s.img} alt={s.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              <div className="pm-tape" style={{ left: '20%' }} />
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.Nav = Nav;
window.Hero = Hero;
window.Marquee = Marquee;
window.Services = Services;