// V1 — MUTED PHOSPHOR
// Desaturated green, no glow, CRT scanlines + flicker, subtle glyph rain,
// newsprint grain, tight monospace typography. "Terminal archaeology."
//
// Key moves vs original:
//  • Swap #39ff14 for oklch(0.78 0.12 140) — phosphor, not laser
//  • Amber shadows (oklch 0.45 0.08 80) on dim text
//  • Zero text-shadow glow anywhere except masthead (kept as crown)
//  • CRT scanlines + 60Hz flicker overlay (very subtle)
//  • Glyph rain @ 4% opacity behind everything
//  • Solid hairline rules instead of double+glow rules

const v1Theme = {
  bg: '#070b07',
  bgCard: '#0c110c',
  phosphor: 'oklch(0.78 0.11 142)',
  phosphorDim: 'oklch(0.55 0.06 142)',
  phosphorMute: 'oklch(0.38 0.035 142)',
  amber: 'oklch(0.68 0.11 75)',
  amberDim: 'oklch(0.45 0.07 75)',
  paper: 'oklch(0.92 0.02 95)',
  rule: 'oklch(0.55 0.06 142 / 0.55)',
  ruleFaint: 'oklch(0.55 0.06 142 / 0.18)',
};

function V1Frontpage({ width = 1200, height = 1600 }) {
  const rainRef = React.useRef(null);
  useGlyphRain(rainRef, {
    color: 'oklch(0.55 0.06 142 / 0.18)',
    headColor: 'oklch(0.72 0.09 142 / 0.35)',
    fontSize: 13,
    density: 0.7,
    speed: 0.55,
    fade: 0.06,
  });

  return (
    <div style={{
      width, minHeight: height,
      background: v1Theme.bg,
      color: v1Theme.phosphor,
      fontFamily: '"Lora", Georgia, serif',
      position: 'relative',
      overflow: 'hidden',
      isolation: 'isolate',
    }}>
      {/* Glyph rain — very subtle */}
      <canvas ref={rainRef} style={{
        position: 'absolute', inset: 0,
        width: '100%', height: '100%',
        opacity: 0.22,
        zIndex: 0,
        pointerEvents: 'none',
      }} />

      {/* Newsprint grain */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
        opacity: 0.08,
        backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.9  0 0 0 0 0.6  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")`,
        mixBlendMode: 'overlay',
      }} />

      {/* CRT scanlines */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 30, pointerEvents: 'none',
        backgroundImage: 'repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px)',
        mixBlendMode: 'multiply',
      }} />
      {/* CRT flicker — animation via inline style tag */}
      <style>{`
        @keyframes v1flicker { 0%,100% { opacity:0.97 } 50% { opacity:1 } 3% { opacity:0.93 } 97% { opacity:0.95 } }
        @keyframes v1drift { 0% { transform: translateY(0) } 100% { transform: translateY(6px) } }
        .v1-content { animation: v1flicker 4.5s infinite; }
        .v1-scan-drift { animation: v1drift 3s linear infinite alternate; }
      `}</style>

      <div className="v1-content" style={{ position: 'relative', zIndex: 10 }}>
        {/* ── Masthead ── */}
        <header style={{
          textAlign: 'center',
          padding: '48px 32px 16px',
          borderBottom: `1px solid ${v1Theme.rule}`,
          position: 'relative',
        }}>
          <div style={{
            fontFamily: '"UnifrakturMaguntia", serif',
            fontSize: 92,
            lineHeight: 1,
            color: v1Theme.paper,
            letterSpacing: '0.01em',
            textShadow: `0 0 18px oklch(0.78 0.11 142 / 0.28), 0 0 2px oklch(0.78 0.11 142 / 0.6)`,
            marginBottom: 10,
          }}>The Daily Cyborg</div>
          <div style={{
            fontFamily: '"VT323", monospace',
            fontSize: 17,
            letterSpacing: '0.32em',
            color: v1Theme.phosphor,
            textTransform: 'uppercase',
            marginBottom: 10,
          }}>— Dispatches from the Human-Machine Frontier —</div>
          <div style={{
            fontFamily: '"VT323", monospace',
            fontSize: 15,
            color: v1Theme.phosphorDim,
            letterSpacing: '0.12em',
          }}>
            <span>Saturday, April 18, 2026</span>
            <span style={{ margin: '0 14px', color: v1Theme.phosphorMute }}>·</span>
            <span>Issue No. 003</span>
            <span style={{ margin: '0 14px', color: v1Theme.phosphorMute }}>·</span>
            <span>First Edition</span>
          </div>
        </header>

        {/* ── Ticker ── */}
        <div style={{
          borderBottom: `1px solid ${v1Theme.ruleFaint}`,
          padding: '8px 24px',
          fontFamily: '"VT323", monospace',
          fontSize: 15,
          color: v1Theme.phosphorDim,
          letterSpacing: '0.08em',
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          display: 'flex',
          gap: 24,
          alignItems: 'center',
        }}>
          <span style={{ color: v1Theme.amber, fontWeight: 'bold' }}>NEURAL WEATHER ∷</span>
          {TICKER.map((t, i) => (
            <React.Fragment key={i}>
              <span>{t}</span>
              {i < TICKER.length - 1 && <span style={{ color: v1Theme.phosphorMute }}>·</span>}
            </React.Fragment>
          ))}
        </div>

        {/* ── Nav ── */}
        <nav style={{
          borderBottom: `1px solid ${v1Theme.rule}`,
          display: 'flex',
          justifyContent: 'center',
        }}>
          {NAV.map((n, i) => (
            <GlitchText key={n} as="a" style={{
              fontFamily: '"Courier Prime", monospace',
              fontSize: 12,
              fontWeight: 700,
              textTransform: 'uppercase',
              letterSpacing: '0.25em',
              color: i === 0 ? v1Theme.paper : v1Theme.phosphorDim,
              padding: '14px 22px',
              borderRight: i < NAV.length - 1 ? `1px solid ${v1Theme.ruleFaint}` : 'none',
              background: i === 0 ? 'oklch(0.55 0.06 142 / 0.08)' : 'transparent',
              cursor: 'pointer',
              textDecoration: 'none',
              display: 'block',
            }}>{n.toUpperCase()}</GlitchText>
          ))}
        </nav>

        {/* ── Content ── */}
        <main style={{ maxWidth: 1060, margin: '0 auto', padding: '40px 40px 60px' }}>
          {/* Section label */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 32 }}>
            <div style={{ flex: 1, height: 1, background: v1Theme.rule }} />
            <span style={{
              fontFamily: '"VT323", monospace',
              fontSize: 18,
              color: v1Theme.phosphor,
              letterSpacing: '0.35em',
              textTransform: 'uppercase',
            }}>∷ Latest Transmissions ∷</span>
            <div style={{ flex: 1, height: 1, background: v1Theme.rule }} />
          </div>

          {/* Lead story — 2-col split */}
          <article style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 40,
            paddingBottom: 36,
            marginBottom: 32,
            borderBottom: `1px solid ${v1Theme.rule}`,
          }}>
            <div>
              <div style={{
                fontFamily: '"VT323", monospace',
                fontSize: 14,
                color: v1Theme.amber,
                letterSpacing: '0.18em',
                marginBottom: 10,
              }}>Issue No. 001 · STARDATE 2026.04.17</div>
              <p style={{
                fontFamily: '"Lora", Georgia, serif',
                fontSize: 15,
                lineHeight: 1.65,
                color: v1Theme.phosphor,
                opacity: 0.9,
                marginBottom: 18,
              }}>
                News, stories, and resources to guide cyborgs towards an undivided life — proactive data defense, Centaur workflows, and Friction by Design.
              </p>
              <a style={{
                display: 'inline-block',
                fontFamily: '"Courier Prime", monospace',
                fontSize: 11,
                fontWeight: 700,
                letterSpacing: '0.22em',
                textTransform: 'uppercase',
                color: v1Theme.phosphor,
                border: `1px solid ${v1Theme.phosphor}`,
                padding: '8px 16px',
                textDecoration: 'none',
                cursor: 'pointer',
              }}>&gt; Read Full Transmission _</a>
            </div>
            <div style={{ borderLeft: `1px solid ${v1Theme.ruleFaint}`, paddingLeft: 32 }}>
              <h2 style={{
                fontFamily: '"Courier Prime", monospace',
                fontSize: 30,
                fontWeight: 700,
                textTransform: 'uppercase',
                letterSpacing: '0.02em',
                color: v1Theme.paper,
                lineHeight: 1.15,
                marginBottom: 18,
              }}><GlitchText>Welcome to the Grid</GlitchText></h2>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                {ISSUES[0].tags.map(t => (
                  <span key={t} style={{
                    fontFamily: '"VT323", monospace',
                    fontSize: 13,
                    color: v1Theme.phosphorDim,
                    border: `1px solid ${v1Theme.ruleFaint}`,
                    padding: '2px 8px',
                    letterSpacing: '0.1em',
                    textTransform: 'uppercase',
                  }}>{t}</span>
                ))}
              </div>
            </div>
          </article>

          {/* Two-col subsequent stories */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
            {ISSUES.slice(1).map((story, idx) => (
              <article key={story.no} style={{
                borderLeft: idx === 0 ? 'none' : `1px solid ${v1Theme.ruleFaint}`,
                paddingLeft: idx === 0 ? 0 : 32,
              }}>
                <div style={{
                  fontFamily: '"VT323", monospace',
                  fontSize: 14,
                  color: v1Theme.amber,
                  letterSpacing: '0.18em',
                  marginBottom: 10,
                }}>Issue No. {story.no} · STARDATE {story.stardate}</div>
                <h3 style={{
                  fontFamily: '"Courier Prime", monospace',
                  fontSize: 20,
                  fontWeight: 700,
                  textTransform: 'uppercase',
                  letterSpacing: '0.02em',
                  color: v1Theme.paper,
                  lineHeight: 1.2,
                  marginBottom: 12,
                }}><GlitchText>{story.title}</GlitchText></h3>
                <p style={{
                  fontFamily: '"Lora", Georgia, serif',
                  fontSize: 14,
                  lineHeight: 1.6,
                  color: v1Theme.phosphor,
                  opacity: 0.85,
                  marginBottom: 14,
                }}>{story.excerpt}</p>
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 16 }}>
                  {story.tags.map(t => (
                    <span key={t} style={{
                      fontFamily: '"VT323", monospace',
                      fontSize: 12,
                      color: v1Theme.phosphorDim,
                      border: `1px solid ${v1Theme.ruleFaint}`,
                      padding: '2px 8px',
                      letterSpacing: '0.1em',
                      textTransform: 'uppercase',
                    }}>{t}</span>
                  ))}
                </div>
                <a style={{
                  display: 'inline-block',
                  fontFamily: '"Courier Prime", monospace',
                  fontSize: 11,
                  fontWeight: 700,
                  letterSpacing: '0.22em',
                  textTransform: 'uppercase',
                  color: v1Theme.phosphor,
                  border: `1px solid ${v1Theme.phosphor}`,
                  padding: '8px 16px',
                  textDecoration: 'none',
                  cursor: 'pointer',
                }}>&gt; Read Full Transmission _</a>
              </article>
            ))}
          </div>
        </main>

        {/* ── Footer ── */}
        <footer style={{
          borderTop: `1px solid ${v1Theme.rule}`,
          padding: '24px',
          textAlign: 'center',
          fontFamily: '"VT323", monospace',
          fontSize: 14,
          color: v1Theme.phosphorMute,
          letterSpacing: '0.12em',
        }}>
          © 2026 The Daily Cyborg · All signals reserved · Transmitted from the Grid
        </footer>
      </div>
    </div>
  );
}

window.V1Frontpage = V1Frontpage;