// site/page-news.jsx — Resource: In the News (real press articles from fairs.com)

const PRESS = [
  { date: 'January 20, 2025', source: 'Markets Insider', kind: 'Press',
    title: 'Fairs.com Launches Platform to Support Community Fairs in a Competitive Market',
    url: 'https://markets.businessinsider.com/news/stocks/fairs-com-launches-platform-to-support-community-fairs-in-a-competitive-market-1034242859',
    excerpt: "Coverage of Fairs.com's official platform launch and our mission to help community fairs compete with larger entertainment alternatives.",
    src: 'midway' },
  { date: 'December 17, 2024', source: 'Grit Daily', kind: 'Press',
    title: 'Tech Trends Shaping the Future of Fairs: Revolutionizing Event Experiences',
    url: 'https://gritdaily.com/why-fairs-must-embrace-technology-to-thrive/',
    excerpt: 'An in-depth look at how modern technology, integrated ticketing, marketing, and operations are reshaping the way fairs are run.',
    src: 'community' },
  { date: 'June 7, 2024', source: 'LA Weekly', kind: 'Press',
    title: 'Meet Fairs.com: The Company Behind the Digital Resurgence of Fairs Across America',
    url: 'https://www.laweekly.com/meet-fairs-com-the-company-behind-the-digital-resurgence-of-fairs-across-america/',
    excerpt: 'A profile of Fairs.com and the team working to bring a long-running American tradition into the digital era.',
    src: 'tractor' },
];

const KINDS = ['All', 'Press'];

function PageNews({ onNav }) {
  const [kind, setKind] = React.useState('All');
  const featured = PRESS[0];
  const rest = PRESS.slice(1);
  const filtered = kind === 'All' ? rest : rest.filter(p => p.kind === kind);

  return (
    <div>
      <PageHero
        eyebrow="Resources · In the News"
        title="Press coverage"
        titleAccent="from across the fair industry."
        lead="Awards, partnerships, product news and stories about what Fairs.com is up to. Filtered down to the moments that mattered."
        cowSize={220}
      />

      {/* Featured press */}
      <section style={{ background: S.cream2, padding: '72px 64px', position: 'relative' }}>
        <div className="has-grain" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto' }}>
          <div style={{
            background: S.cream, border: `1.5px solid ${S.ink}`, borderRadius: 18, overflow: 'hidden',
            boxShadow: `8px 8px 0 0 ${S.red}`, display: 'grid', gridTemplateColumns: '1.1fr 1fr',
          }}>
            <div style={{ position: 'relative', minHeight: 420 }}>
              <TreatedPhoto src={PHOTOS[featured.src]} treatment="sepia" style={{ position: 'absolute', inset: 0 }} />
              <div style={{ position: 'absolute', top: 16, left: 16, transform: 'rotate(-4deg)', background: S.red, color: S.ink, padding: '6px 12px', fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
                ★ Latest · {featured.kind}
              </div>
            </div>
            <div style={{ padding: 44 }}>
              <SectionEyebrow>{featured.kind} · {featured.date}</SectionEyebrow>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 36, lineHeight: 1.1, letterSpacing: '-0.025em', color: S.ink, margin: '14px 0 14px' }}>{featured.title}</h2>
              <p style={{ fontSize: 16, lineHeight: 1.55, color: S.ink, opacity: 0.78, margin: '0 0 24px' }}>{featured.excerpt}</p>
              <a href={featured.url} target="_blank" rel="noopener" style={{ textDecoration: 'none' }}>
                <StubBtn size="md">Read the coverage</StubBtn>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Filters */}
      <section style={{ background: S.cream, padding: '48px 64px 0', position: 'relative' }}>
        <div className="has-grain light" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 36, lineHeight: 1.05, letterSpacing: '-0.025em', color: S.ink, margin: 0 }}>
            Full <em style={{ fontStyle: 'italic', color: S.red }}>news archive</em>
          </h2>
          <div style={{ display: 'inline-flex', gap: 6, padding: 4, background: S.cream2, border: `1.5px solid ${S.ink}`, borderRadius: 999 }}>
            {KINDS.map(k => {
              const active = kind === k;
              return (
                <button key={k} onClick={() => setKind(k)} style={{
                  border: 0, padding: '8px 14px', borderRadius: 999, cursor: 'pointer',
                  fontFamily: 'inherit', fontSize: 12, fontWeight: 700,
                  background: active ? S.ink : 'transparent', color: active ? S.cream : S.ink,
                }}>{k}</button>
              );
            })}
          </div>
        </div>
      </section>

      <section style={{ background: S.cream, padding: '32px 64px 96px', position: 'relative' }}>
        <div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 0 }}>
          {filtered.map((p, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '120px 1fr auto', gap: 24, alignItems: 'center',
              padding: '28px 0', borderTop: i > 0 ? `1px dashed ${S.border}` : 'none',
            }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: S.mute, fontWeight: 700, letterSpacing: '0.1em' }}>{p.date}</div>
              <div>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: S.red, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', border: `1.5px solid ${S.red}`, padding: '3px 8px', borderRadius: 4 }}>{p.kind}</span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: S.mute, letterSpacing: '0.06em' }}>via {p.source}</span>
                </div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color: S.ink, lineHeight: 1.2, letterSpacing: '-0.02em' }}>{p.title}</div>
                <div style={{ fontSize: 16, color: S.ink, opacity: 0.72, marginTop: 6, lineHeight: 1.5, maxWidth: 780 }}>{p.excerpt}</div>
              </div>
              <a href={p.url} target="_blank" rel="noopener" style={{ color: S.red, fontWeight: 700, fontSize: 16, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                Read <Ico name="arrowUpRight" size={14} strokeWidth={2.4} />
              </a>
            </div>
          ))}
        </div>
      </section>

      {/* Press contact */}
      <section style={{ background: S.cream3, padding: '72px 64px', position: 'relative' }}>
        <div className="has-grain" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', maxWidth: 900, margin: '0 auto', textAlign: 'center' }}>
          <SectionEyebrow>Press inquiries</SectionEyebrow>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 36, lineHeight: 1.05, letterSpacing: '-0.025em', color: S.ink, margin: '12px 0 14px' }}>
            Writing about fairs? <em style={{ fontStyle: 'italic', color: S.red }}>We'd love to chat.</em>
          </h3>
          <p style={{ fontSize: 16, color: S.ink, opacity: 0.72, maxWidth: 560, margin: '0 auto 24px' }}>
            Reach our press team at <a href="mailto:support@fairs.com" style={{ color: S.red, fontWeight: 700 }}>support@fairs.com</a>. We respond within 1 business day and can connect you with fair-manager customers for interviews.
          </p>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PageNews });