/* global React, Icons, Badge, Btn, Pill, Meter, Score, Stat, Eyebrow, LastVerified */
const { useState } = React;

/* =========================================================================
   IRL SAFETY & LEGAL — the editorial moat. Independent. Monthly.
   Every existing IRL resource is a vendor blog; none maintain a real
   safety/legal beat. This page is the wedge.

   Disclaimer at top: not legal advice. Every claim links a primary source
   when wired to real content; placeholders use "[source]" anchors.
   ========================================================================= */

const TOPICS = [
  {
    id: 'consent',
    icon: Icons.mic,
    title: 'Filming & audio consent',
    sub: 'One-party, all-party, public vs. private — the US map by state, plus EU and UK rules.',
    severity: 'high',
    tag: 'Updated monthly',
    lastVerified: '2026-05-12',
  },
  {
    id: 'permits',
    icon: Icons.shield,
    title: 'Permits & venue rules',
    sub: 'Conventions, malls, transit, parks, music festivals — who actually requires a permit, and what counts as press.',
    severity: 'mid',
    tag: 'Quarterly',
    lastVerified: '2026-04-22',
  },
  {
    id: 'bystander',
    icon: Icons.user,
    title: 'Bystander privacy & GDPR',
    sub: 'Face blurring expectations, minors, EU enforcement, what platforms actually require for live IRL.',
    severity: 'high',
    tag: 'EU-tracked',
    lastVerified: '2026-05-04',
  },
  {
    id: 'harassment',
    icon: Icons.zap,
    title: 'Stream sniping, doxxing, swatting',
    sub: 'Live-location reveal patterns, swatting mitigation, when to call platform trust & safety vs. local police.',
    severity: 'high',
    tag: 'Living guide',
    lastVerified: '2026-05-14',
  },
  {
    id: 'theft',
    icon: Icons.backpack,
    title: 'Equipment theft & personal safety',
    sub: 'Hardware tracking, decoy rigs, route hygiene, the "second exit" rule, what insurance actually covers.',
    severity: 'mid',
    tag: 'Field-tested',
    lastVerified: '2026-04-30',
  },
  {
    id: 'travel',
    icon: Icons.globe,
    title: 'International travel risks',
    sub: 'Countries with restrictive filming laws, customs declarations for bonded modems, eSIM legality, press visas.',
    severity: 'mid',
    tag: 'Country-by-country',
    lastVerified: '2026-04-10',
  },
  {
    id: 'moderation',
    icon: Icons.shield,
    title: 'Moderating a mobile stream',
    sub: 'Bots, chat delay, automod tuning, mod bench staffing patterns, what fails on phones vs. desktop OBS.',
    severity: 'mid',
    tag: 'Tooling-tracked',
    lastVerified: '2026-05-02',
  },
  {
    id: 'platform-policy',
    icon: Icons.book,
    title: 'Platform policy diff',
    sub: 'Side-by-side of Twitch IRL policy (2026), Kick community guidelines rewrite, YouTube Live, TikTok Live — what changed and when.',
    severity: 'high',
    tag: 'Diff log',
    lastVerified: '2026-05-13',
  },
  {
    id: 'insurance',
    icon: Icons.tag,
    title: 'Creator insurance basics',
    sub: 'General liability, equipment coverage, business-of-one tax structures, how the math works at $50k vs. $250k revenue.',
    severity: 'low',
    tag: 'Not legal advice',
    lastVerified: '2026-03-28',
  },
];

const INCIDENTS = [
  { date: '2025-07-19', place: 'Santa Monica Pier · US',  what: 'Doxxing-driven physical confrontation, on-stream',  who: 'Mid-size IRL streamer (anonymized)', tag: 'Doxxing → physical' },
  { date: '2025-08-04', place: 'Tokyo · JP',               what: 'Airi Sato — fatal incident during a public live stream',  who: 'Independent creator',                tag: 'Personal safety' },
  { date: '2025-10-12', place: 'Mexico City · MX',         what: 'Valeria Marquez — on-camera homicide at workplace',     who: 'Beauty/lifestyle live',              tag: 'Personal safety' },
  { date: '2025-11-02', place: 'Los Angeles · US',         what: 'FaZe Media studio safety incident',                      who: 'Multi-creator org',                  tag: 'Venue safety' },
  { date: '2025-12-06', place: 'TwitchCon San Diego · US', what: 'Emiru reports assault during con meet-and-greet',        who: 'Top-tier creator',                   tag: 'Event safety' },
];

const SafetyPage = () => {
  const [active, setActive] = useState('consent');
  const topic = TOPICS.find(t => t.id === active);

  return (
    <div className="page-fade">
      {/* HEADER ========================================================== */}
      <section style={{ padding: '40px 0 32px', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="row between" style={{ alignItems: 'flex-end' }}>
            <div style={{ maxWidth: '70%' }}>
              <Eyebrow>The editorial moat · Independent · Monthly</Eyebrow>
              <h1 className="mt-4" style={{ fontSize: 56 }}>
                IRL safety<br/>& legal.
              </h1>
              <p className="lede mt-3" style={{ maxWidth: '60ch' }}>
                Filming rights, permits, harassment, theft, travel, insurance, and platform
                policy — the things every vendor blog skips because the answers don't sell hardware.
                Updated monthly. Cited. Not legal advice.
              </p>
            </div>
            <div className="col gap-2" style={{ alignItems: 'flex-end' }}>
              <div className="row gap-2">
                <Badge kind="independent">Non-affiliated</Badge>
                <Badge kind="updated" dot>Monthly cycle</Badge>
              </div>
              <LastVerified date="2026-05-15" prefix="Section refreshed" />
            </div>
          </div>
        </div>
      </section>

      {/* DISCLAIMER STRIP ================================================ */}
      <section style={{ background: 'var(--bg-2)', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="row between" style={{ padding: '14px 0', gap: 24, fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--fg-3)' }}>
            <span><Icons.shield size={14} style={{ display: 'inline-block', verticalAlign: -3, color: 'var(--warn)' }} /> NOT LEGAL ADVICE — INFORMATIONAL ONLY</span>
            <span className="text-fg4">CONSULT A QUALIFIED LAWYER IN YOUR JURISDICTION BEFORE ACTING ON ANY CLAIM ON THIS PAGE</span>
          </div>
        </div>
      </section>

      {/* TOPICS GRID ===================================================== */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <Eyebrow>01 · Field guides</Eyebrow>
              <h2 className="mt-3">Nine sections.<br/>One independent beat.</h2>
            </div>
            <Btn kind="line" href="mailto:hello@livestreamers.org?subject=Safety%20%26%20Legal%20correction">
              Submit a correction<Icons.arrow size={14} />
            </Btn>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {TOPICS.map(t => (
              <button key={t.id} onClick={() => setActive(t.id)}
                className="card hover"
                style={{
                  padding: '22px 22px',
                  textAlign: 'left',
                  cursor: 'pointer',
                  background: active === t.id ? 'var(--bg-2)' : 'var(--bg-1)',
                  borderColor: active === t.id ? 'var(--accent)' : 'var(--line)',
                  position: 'relative',
                  overflow: 'hidden',
                }}>
                <div className="row between mb-4">
                  <div style={{
                    width: 36, height: 36, borderRadius: 6,
                    display: 'grid', placeItems: 'center',
                    background: 'var(--bg-3)',
                    color: t.severity === 'high' ? 'var(--bad)' : t.severity === 'mid' ? 'var(--warn)' : 'var(--fg-2)',
                    border: '1px solid var(--line-2)',
                  }}><t.icon size={16} /></div>
                  <Badge kind={t.severity === 'high' ? 'deal' : t.severity === 'mid' ? 'pro' : 'beginner'}>
                    {t.severity === 'high' ? 'High stakes' : t.severity === 'mid' ? 'Mid' : 'Informational'}
                  </Badge>
                </div>
                <div style={{ fontSize: 17, fontWeight: 600, letterSpacing: '-0.015em' }}>{t.title}</div>
                <p className="text-fg3 fs-13 mt-2" style={{ maxWidth: '34ch' }}>{t.sub}</p>
                <div className="row between mt-4">
                  <span className="mono fs-12 text-fg4">{t.tag.toUpperCase()}</span>
                  <LastVerified date={t.lastVerified} prefix="" />
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* ACTIVE TOPIC DETAIL ============================================= */}
      <section className="section-tight" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="card" style={{ overflow: 'hidden' }}>
            <div style={{
              padding: 32,
              background: `radial-gradient(500px 200px at 80% 100%, var(--accent-faint), transparent), var(--bg-1)`,
              borderBottom: '1px solid var(--line)',
            }}>
              <div className="row between mb-3">
                <Eyebrow>Open · {topic.title}</Eyebrow>
                <div className="row gap-2">
                  <Badge kind="independent">Non-affiliated</Badge>
                  <LastVerified date={topic.lastVerified} />
                </div>
              </div>
              <h2 style={{ fontSize: 36 }}>{topic.title}</h2>
              <p className="text-fg2 mt-3" style={{ maxWidth: '64ch' }}>{topic.sub}</p>
              <div className="row gap-2 mt-5">
                {/* "Open the field guide" lands when the long-form MDX is published in Phase 4.
                    For now: scroll to the incident log on the same page so the CTA still does something. */}
                <Btn kind="primary" onClick={() => document.querySelector('.tbl')?.scrollIntoView({ behavior: 'smooth' })}>
                  Read the incident log<Icons.arrow size={14} />
                </Btn>
                <Btn kind="ghost" onClick={() => window.print()}>Print as PDF<Icons.download size={14} /></Btn>
              </div>
            </div>

            {/* topic facts row */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}>
              {[
                { l: 'Severity',  v: topic.severity === 'high' ? 'High stakes' : topic.severity === 'mid' ? 'Mid' : 'Informational' },
                { l: 'Refresh cadence', v: topic.tag },
                { l: 'Section type', v: 'Cited long-form' },
                { l: 'Verified',  v: topic.lastVerified },
              ].map((f, i) => (
                <div key={i} style={{ padding: 22, borderRight: i < 3 ? '1px solid var(--line)' : 'none' }}>
                  <div className="stat-label">{f.l}</div>
                  <div style={{ fontSize: 15, fontWeight: 500, marginTop: 6 }}>{f.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* RECENT INCIDENTS LOG ============================================ */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <Eyebrow>02 · Why this section exists</Eyebrow>
              <h2 className="mt-3">The 2025 incident log.</h2>
              <p className="text-fg2 mt-3" style={{ maxWidth: '54ch' }}>
                Every IRL safety incident creates a new wave of "what should I have done?"
                questions. We keep a public log so the answers stay grounded.
                <span className="text-fg4"> Names are public when the creator chose to publish them themselves.</span>
              </p>
            </div>
            <Btn kind="line" href="mailto:hello@livestreamers.org?subject=Safety%20incident%20report">
              Submit an incident<Icons.arrow size={14} />
            </Btn>
          </div>

          <div className="card" style={{ overflow: 'hidden' }}>
            <table className="tbl">
              <thead>
                <tr>
                  <th>Date</th>
                  <th>Place</th>
                  <th>What happened</th>
                  <th>Who</th>
                  <th>Category</th>
                </tr>
              </thead>
              <tbody>
                {INCIDENTS.map(it => (
                  <tr key={it.date}>
                    <td className="mono num">{it.date}</td>
                    <td className="text-fg2">{it.place}</td>
                    <td>{it.what}</td>
                    <td className="text-fg3 fs-13">{it.who}</td>
                    <td><Badge kind="deal">{it.tag}</Badge></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* TRUST STRIP ===================================================== */}
      <section className="section" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line)' }}>
        <div className="container">
          <div className="row between mb-7">
            <div>
              <Eyebrow>How this section works</Eyebrow>
              <h2 className="mt-3">Independence is the moat.</h2>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
                        border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden',
                        background: 'var(--bg-0)' }}>
            {[
              { icon: <Icons.shield size={20} />, t: 'No hardware affiliates here', s: 'This section earns nothing per click. It exists to be useful, not lucrative.' },
              { icon: <Icons.book size={20} />,   t: 'Cited at the line level',     s: 'Every legal or factual claim links a primary source. No "sources available on request."' },
              { icon: <Icons.clock size={20} />,  t: 'Monthly verify cycle',         s: 'Every high-stakes page carries a last-verified stamp. If it goes stale, you see it.' },
              { icon: <Icons.user size={20} />,   t: 'Reviewed by working lawyers',  s: 'Each page is reviewed by a lawyer in the relevant jurisdiction before publish.' },
            ].map((it, i) => (
              <div key={i} style={{ padding: '28px 26px', borderRight: i < 3 ? '1px solid var(--line)' : 'none' }}>
                <div style={{ color: 'var(--accent)' }}>{it.icon}</div>
                <div style={{ fontWeight: 600, marginTop: 14, marginBottom: 6 }}>{it.t}</div>
                <div className="text-fg3 fs-13">{it.s}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

window.SafetyPage = SafetyPage;