// screens-press.jsx — public Press / Newsroom page.
const { useState: useStatePR } = React;

function PressScreen({ go }) {
  const [copied, setCopied] = useStatePR(false);

  const stats = [
    ['2,400+', 'Creators publishing'],
    ['18', 'Countries'],
    ['€1.2M', 'Creator earnings paid'],
    ['420K', 'Monthly shoppers'],
  ];

  const coverage = [
    { outlet: 'Vogue Business', date: 'Jul 2026', title: 'The creators turning outfit checks into storefronts', kind: 'Feature' },
    { outlet: 'Hypebeast',      date: 'Jun 2026', title: 'modaBoard wants every fit to be shoppable — without the affiliate mess', kind: 'Interview' },
    { outlet: 'TechCrunch',     date: 'May 2026', title: 'Stockholm’s modaBoard raises to build the “link in bio” for wardrobes', kind: 'News' },
    { outlet: 'Highsnobiety',   date: 'Apr 2026', title: 'Inside the tools quietly reshaping how we shop secondhand and new', kind: 'Feature' },
  ];

  const releases = [
    { date: 'Jul 14, 2026', title: 'modaBoard opens Studio to all creators', body: 'Every creator can now build shoppable outfit boards, track clicks, and earn affiliate revenue — no affiliate links required.' },
    { date: 'May 02, 2026', title: 'modaBoard raises seed to expand creator commerce', body: 'Funding will grow the merchant network and bring the /go/ attribution system to more markets across Europe.' },
    { date: 'Mar 20, 2026', title: 'The Brands directory launches', body: 'Shoppers can now browse outfits by brand — from ASICS and On to Levi’s, Satisfy and Oakley.' },
  ];

  const kit = [
    ['Logo & wordmark', 'SVG · PNG', 'Primary mark, mono, and clear-space rules.'],
    ['Brand guidelines', 'PDF · 2.4 MB', 'Colour, type, tone of voice, and usage.'],
    ['Product screenshots', 'ZIP · 18 MB', 'Studio, outfit boards, creator profiles.'],
    ['Founder headshots', 'ZIP · 12 MB', 'High-resolution, print-ready.'],
  ];

  const press_mail = 'hi@modaboard.com';

  return (
    <div>
      {/* Hero */}
      <section style={{ padding: '72px 40px 24px' }}>
        <div style={{ maxWidth: 1100, marginInline: 'auto' }}>
          <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8a8580' }}>Newsroom</div>
          <h1 style={{ margin: '12px 0 0', fontSize: 'clamp(44px, 6vw, 80px)', lineHeight: 0.98, letterSpacing: '-0.035em', fontWeight: 400 }}>
            Press &amp; <em style={{ fontFamily: "'Instrument Serif',serif", fontStyle: 'italic', fontWeight: 400 }}>media</em>
          </h1>
          <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.55, maxWidth: '56ch', color: '#3a3a36' }}>
            modaBoard turns any product link into a shoppable outfit board — and pays the creators who style them. Below: our story, coverage, releases, and a downloadable press kit.
          </p>
          <div style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href={`mailto:${press_mail}`} style={{ ...btnPrimary, textDecoration: 'none', display: 'inline-flex', alignItems: 'center' }}>Contact press</a>
            <button onClick={() => { const el = document.getElementById('press-kit'); el && window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' }); }} style={btnGhost}>Download press kit</button>
          </div>
        </div>
      </section>

      {/* Stats band */}
      <section style={{ padding: '32px 40px' }}>
        <div style={{ maxWidth: 1100, marginInline: 'auto', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }} className="dc-press-stats">
          {stats.map(([n, l]) => (
            <div key={l} style={{ padding: '22px 20px', background: '#FAFAF7', border: '1px solid rgba(20,20,18,0.08)', borderRadius: 14 }}>
              <div style={{ fontSize: 34, letterSpacing: '-0.02em', fontWeight: 500, fontVariantNumeric: 'tabular-nums' }}>{n}</div>
              <div style={{ marginTop: 6, fontSize: 11.5, letterSpacing: '0.06em', textTransform: 'uppercase', color: '#8a8580' }}>{l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* About / boilerplate */}
      <section style={{ padding: '40px 40px' }}>
        <div style={{ maxWidth: 1100, marginInline: 'auto', display: 'grid', gridTemplateColumns: '0.4fr 1fr', gap: 40 }} className="dc-press-split">
          <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#8a8580', paddingTop: 6 }}>About modaBoard</div>
          <div style={{ maxWidth: '62ch' }}>
            <p style={{ margin: 0, fontFamily: "'Instrument Serif',serif", fontStyle: 'italic', fontSize: 'clamp(22px, 3vw, 30px)', lineHeight: 1.35, letterSpacing: '-0.01em', color: '#1a1a18' }}>
              modaBoard is a shoppable outfit platform for creators. Paste a product link, arrange a look, and every piece becomes shoppable — with commissions handled automatically behind the scenes.
            </p>
            <p style={{ marginTop: 18, fontSize: 15, lineHeight: 1.65, color: '#3a3a36' }}>
              Founded in Stockholm in 2025, modaBoard sits between the moodboard and the storefront: editorial by feel, commercial by design. Creators never touch an affiliate link — they paste a normal retailer URL and modaBoard resolves the merchant, tracks the click, and splits the resulting commission. The company works with brands and affiliate networks across Europe.
            </p>
          </div>
        </div>
      </section>

      {/* In the press */}
      <section style={{ padding: '40px 40px', borderTop: '1px solid rgba(20,20,18,0.06)' }}>
        <div style={{ maxWidth: 1100, marginInline: 'auto' }}>
          <h2 style={{ margin: 0, fontSize: 30, fontWeight: 400, letterSpacing: '-0.02em' }}>In the press</h2>
          <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column' }}>
            {coverage.map((c, i) => (
              <a key={i} href={`mailto:${press_mail}?subject=${encodeURIComponent('Coverage: ' + c.title)}`} style={{
                display: 'grid', gridTemplateColumns: '180px 1fr 110px', gap: 20, alignItems: 'baseline',
                padding: '20px 6px', borderTop: '1px solid rgba(20,20,18,0.08)', textDecoration: 'none', color: 'inherit',
                transition: 'background .15s',
              }} className="dc-press-row"
                 onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(20,20,18,0.02)'}
                 onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{c.outlet}<div style={{ fontSize: 11, color: '#8a8580', marginTop: 3, fontWeight: 400 }}>{c.date}</div></div>
                <div style={{ fontSize: 16, letterSpacing: '-0.01em', fontFamily: "'Instrument Serif',serif", fontStyle: 'italic' }}>{c.title}</div>
                <div style={{ fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#8a8580', textAlign: 'right' }}>{c.kind}</div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Press releases */}
      <section style={{ padding: '40px 40px', borderTop: '1px solid rgba(20,20,18,0.06)' }}>
        <div style={{ maxWidth: 1100, marginInline: 'auto' }}>
          <h2 style={{ margin: 0, fontSize: 30, fontWeight: 400, letterSpacing: '-0.02em' }}>Announcements</h2>
          <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }} className="dc-press-releases">
            {releases.map((r, i) => (
              <div key={i} style={{ padding: 22, background: '#FAFAF7', border: '1px solid rgba(20,20,18,0.08)', borderRadius: 14, display: 'flex', flexDirection: 'column' }}>
                <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#8a8580' }}>{r.date}</div>
                <div style={{ marginTop: 10, fontSize: 18, letterSpacing: '-0.01em', lineHeight: 1.25 }}>{r.title}</div>
                <div style={{ marginTop: 10, fontSize: 13.5, color: '#5a5a54', lineHeight: 1.55, flex: 1 }}>{r.body}</div>
                <a href={`mailto:${press_mail}?subject=${encodeURIComponent('Release: ' + r.title)}`} style={{ marginTop: 16, fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 500, color: '#1a1a18', textDecoration: 'none' }}>Read more →</a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Press kit */}
      <section id="press-kit" style={{ padding: '40px 40px 8px', borderTop: '1px solid rgba(20,20,18,0.06)' }}>
        <div style={{ maxWidth: 1100, marginInline: 'auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16 }}>
            <h2 style={{ margin: 0, fontSize: 30, fontWeight: 400, letterSpacing: '-0.02em' }}>Press kit</h2>
            <button onClick={() => { setCopied(true); setTimeout(() => setCopied(false), 2200); }} style={{ ...btnGhost, fontSize: 11 }}>
              {copied ? 'Link copied ✓' : 'Copy shareable link'}
            </button>
          </div>
          <div style={{ marginTop: 22, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }} className="dc-press-kit">
            {kit.map(([name, meta, desc]) => (
              <div key={name} style={{
                display: 'flex', alignItems: 'center', gap: 16, padding: 20,
                background: '#FAFAF7', border: '1px solid rgba(20,20,18,0.08)', borderRadius: 14,
              }}>
                <div style={{ width: 46, height: 46, borderRadius: 10, background: '#F2EFE7', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1a1a18" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v12M8 11l4 4 4-4M5 21h14"/></svg>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14.5, fontWeight: 500, letterSpacing: '-0.005em' }}>{name}</div>
                  <div style={{ fontSize: 12.5, color: '#5a5a54', marginTop: 3 }}>{desc}</div>
                </div>
                <div style={{ fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#8a8580', whiteSpace: 'nowrap' }}>{meta}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Media contact */}
      <section style={{ padding: '48px 40px 8px' }}>
        <div style={{ maxWidth: 1100, marginInline: 'auto', padding: 32, background: '#1a1a18', color: '#FAFAF7', borderRadius: 18, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(250,249,247,0.5)' }}>Media enquiries</div>
            <div style={{ marginTop: 10, fontSize: 24, letterSpacing: '-0.01em', fontFamily: "'Instrument Serif',serif", fontStyle: 'italic' }}>We reply to press within one working day.</div>
          </div>
          <a href={`mailto:${press_mail}`} style={{
            appearance: 'none', border: '1px solid #FAFAF7', background: '#FAFAF7', color: '#1a1a18',
            padding: '14px 22px', borderRadius: 999, fontSize: 12, letterSpacing: '0.16em',
            textTransform: 'uppercase', fontWeight: 500, textDecoration: 'none', whiteSpace: 'nowrap',
          }}>{press_mail}</a>
        </div>
      </section>

      <style>{`
        @media (max-width: 900px) {
          .dc-press-stats { grid-template-columns: repeat(2, 1fr) !important; }
          .dc-press-split { grid-template-columns: 1fr !important; gap: 16px !important; }
          .dc-press-releases { grid-template-columns: 1fr !important; }
          .dc-press-kit { grid-template-columns: 1fr !important; }
          .dc-press-row { grid-template-columns: 1fr !important; gap: 6px !important; }
          .dc-press-row > div:last-child { text-align: left !important; }
        }
      `}</style>

      <Footer/>
    </div>
  );
}

Object.assign(window, { PressScreen });