/* Prism landing — page sections (customised build) */
const { useState: useS } = React;

/* Override Logo to use the PNG asset */
function Logo({ size = 28, showWord = true, tone = 'ink' }) {
  const wordColor = tone === 'light' ? '#fff' : 'var(--ink-900)';
  const imgH = size * 2;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.34 }}>
      <img src="/assets/logo.png" height={imgH} alt="" aria-hidden="true"
        style={{ display: 'block', filter: tone === 'light'
          ? 'brightness(0) invert(1) opacity(0.9)'
          : 'drop-shadow(1px 0 0 rgba(180,155,255,1)) drop-shadow(-1px 0 0 rgba(110,215,230,1)) drop-shadow(0 1px 0 rgba(255,186,71,1)) drop-shadow(0 -1px 0 rgba(180,155,255,1)) drop-shadow(1px 1px 0 rgba(110,215,230,0.9)) drop-shadow(-1px -1px 0 rgba(255,186,71,0.9)) drop-shadow(1px -1px 0 rgba(180,155,255,0.9)) drop-shadow(-1px 1px 0 rgba(110,215,230,0.9))'
        }} />
      {showWord && <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: size * 0.74, letterSpacing: '-0.03em', color: wordColor }}>Prism</span>}
    </span>
  );
}

const MAXW = 1140;
const container = { maxWidth: MAXW, margin: '0 auto', padding: '0 clamp(20px,5vw,48px)' };

/* ---------------- Nav ---------------- */
function Nav({ onSubscribe }) {
  return (
    <header style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50 }}>
      <div style={{ ...container, paddingTop: 16, paddingBottom: 16 }}>
        <nav style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
          background: 'var(--glass-fill-strong)', backdropFilter: 'blur(16px) saturate(140%)', WebkitBackdropFilter: 'blur(16px) saturate(140%)',
          border: '1px solid var(--glass-border)', borderRadius: 'var(--r-pill)', padding: '10px 12px 10px 22px', boxShadow: 'var(--shadow-sm)' }}>
          <Logo size={26} />
          <Button size="sm" onClick={onSubscribe}>Subscribe</Button>
        </nav>
      </div>
    </header>
  );
}

/* ---------------- Hero ---------------- */
function Hero({ onSubscribed }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', minHeight: '100vh', display: 'flex', alignItems: 'center' }}>
      <Mesh intensity={0.95} />
      <div aria-hidden="true" style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 160, background: 'linear-gradient(to bottom, transparent, var(--paper))', zIndex: 2, pointerEvents: 'none' }} />
      <div style={{ ...container, position: 'relative', zIndex: 1, paddingTop: 'clamp(104px,12vw,170px)', paddingBottom: 'clamp(72px,12vw,170px)', textAlign: 'center', width: '100%' }}>
        <p className="prism-eyebrow" style={{ margin: '0 0 26px' }}>The weekly AI × Finance signal</p>
        <h1 style={{ margin: '0 auto', maxWidth: '16ch', fontFamily: "'Inter', sans-serif", fontWeight: 600, fontSize: 'clamp(3rem,7vw,6rem)', lineHeight: 0.96, letterSpacing: '-0.04em', fontFeatureSettings: '"ss01", "cv05", "cv11"', color: 'var(--ink-900)' }}>
          Signal<br />over noise.
        </h1>
        <p style={{ margin: '26px auto 0', maxWidth: 540, fontFamily: 'var(--font-body)', fontSize: 19, lineHeight: 1.5, color: 'var(--ink-600)' }}>
          Every Tuesday I write about what's actually happening where AI meets money. What moved, what it means, what I'd do with it.
        </p>
        <div style={{ maxWidth: 480, margin: '36px auto 0' }}>
          <EmailCaptureForm cta="Subscribe" note="Free · every Tuesday · cancel anytime" onDone={onSubscribed} />
        </div>
        <div style={{ marginTop: 28, display: 'flex', justifyContent: 'center' }}>
          <Badge variant="live" dot>Issue #1 drops today — be a founding reader</Badge>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Value props ---------------- */
const GLYPHS = {
  markets: (
    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
      <rect x="2" y="13" width="4" height="7" rx="1" fill="var(--ink-700)" />
      <rect x="9" y="8" width="4" height="12" rx="1" fill="var(--ink-700)" />
      <rect x="16" y="3" width="4" height="17" rx="1" fill="var(--accent)" />
    </svg>
  ),
  systems: (
    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
      <rect x="4.5" y="4.5" width="13" height="13" rx="2.5" transform="rotate(45 11 11)" stroke="var(--ink-700)" strokeWidth="1.8" />
      <rect x="8.5" y="8.5" width="5" height="5" rx="1.2" transform="rotate(45 11 11)" fill="var(--accent)" />
    </svg>
  ),
  edge: (
    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
      <circle cx="11" cy="11" r="8.2" stroke="var(--ink-700)" strokeWidth="1.8" />
      <circle cx="11" cy="11" r="3" fill="var(--accent)" />
    </svg>
  ),
};

function ValueCard({ num, tag, glyph, title, body, hue }) {
  const [h, setH] = useS(false);
  return (
    <div
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      style={{
        position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column',
        minHeight: 312,
        background: 'var(--glass-fill-strong)',
        backdropFilter: 'blur(var(--glass-blur)) saturate(var(--glass-saturate))',
        WebkitBackdropFilter: 'blur(var(--glass-blur)) saturate(var(--glass-saturate))',
        border: '1px solid var(--glass-border)',
        borderRadius: 'var(--r-xl)',
        padding: 'var(--sp-7)',
        boxShadow: h ? 'var(--shadow-xl), var(--shadow-inset)' : 'var(--shadow-md), var(--shadow-inset)',
        transform: h ? 'translateY(-6px)' : 'translateY(0)',
        transition: 'transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)',
      }}
    >
      <div aria-hidden="true" style={{ position: 'absolute', top: -70, right: -56, width: 220, height: 220, borderRadius: '50%', background: `radial-gradient(circle at center, ${hue} 0%, transparent 68%)`, filter: 'blur(26px)', opacity: h ? 1 : 0.62, transition: 'opacity var(--dur-base) var(--ease-out)', pointerEvents: 'none' }} />
      <span aria-hidden="true" style={{ position: 'absolute', top: -18, right: 14, fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 132, lineHeight: 1, letterSpacing: '-0.05em', color: 'transparent', WebkitTextStroke: '1.2px rgba(10,11,13,0.07)', pointerEvents: 'none', userSelect: 'none' }}>{num}</span>
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ width: 50, height: 50, borderRadius: 'var(--r-md)', display: 'grid', placeItems: 'center', background: 'var(--surface)', border: '1px solid var(--line)', boxShadow: 'var(--shadow-xs)' }}>{glyph}</div>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--accent)' }}>{tag}</span>
      </div>
      <h3 style={{ position: 'relative', margin: '28px 0 10px', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, lineHeight: 1.12, letterSpacing: '-0.025em', color: 'var(--ink-900)' }}>{title}</h3>
      <p style={{ position: 'relative', margin: 0, fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.62, color: 'var(--ink-600)' }}>{body}</p>
    </div>
  );
}

function ValueProps() {
  const items = [
    ['01', 'Markets', GLYPHS.markets, 'What moved money this week', 'Not a recap. What actually shifted in markets, crypto, or the AI trade — and why. No Bloomberg rehash.', 'var(--iris-lavender)'],
    ['02', 'Systems', GLYPHS.systems, 'The tools I use myself', "AI automations, workflows, setups I'm actually running. If it's useful to me, I write it up. No sponsored tools.", 'var(--iris-sky)'],
    ['03', 'Edge', GLYPHS.edge, 'Building this in public', "I'm figuring things out as I go and writing about it honestly. The wins, the wrong turns, the numbers when I have them.", 'var(--iris-mint)'],
  ];
  return (
    <section style={{ ...container, paddingTop: 'var(--section-y)', paddingBottom: 'var(--section-y)' }}>
      <div style={{ maxWidth: 620, marginBottom: 'clamp(36px,5vw,64px)' }}>
        <p className="prism-eyebrow" style={{ margin: '0 0 16px' }}>What you get every week</p>
        <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(2rem,3.4vw,3rem)', lineHeight: 1.08, letterSpacing: '-0.03em', color: 'var(--ink-900)' }}>
          Not another feed. One thing worth knowing.
        </h2>
      </div>
      <div style={{ position: 'relative' }}>
        <div aria-hidden="true" className="prism-mesh" style={{ position: 'absolute', inset: '-12% -6%', zIndex: 0, opacity: 0.6, pointerEvents: 'none' }} />
        <div style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(264px,1fr))', gap: 'clamp(16px,2.4vw,28px)' }}>
          {items.map((it) => (
            <ValueCard key={it[0]} num={it[0]} tag={it[1]} glyph={it[2]} title={it[3]} body={it[4]} hue={it[5]} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Sample issue ---------------- */
const REAL_ISSUE = {
  id: '001', date: 'Jun 18', live: true, tag: 'AI strategy',
  kicker: 'Issue 001 · Jun 18, 2026',
  title: "Everyone's using AI to do less. That's the wrong game.",
  lead: "There's a conversation in every boardroom right now: if AI can do what two people do, do we still need two people? Wrong question.",
  url: 'https://newsletter.insideprism.com/p/everyone-s-using-ai-to-do-less-that-s-the-wrong-game',
  read: '8 min',
};

function SampleIssuePreview({ floating }) {
  const issue = REAL_ISSUE;
  return (
    <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--r-xl)', overflow: 'hidden', boxShadow: floating ? 'var(--shadow-xl), var(--shadow-inset)' : 'var(--shadow-lg)', transform: floating ? 'rotate(-0.8deg)' : 'none' }}>
      <div style={{ padding: '16px 22px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <Logo size={20} />
        <Badge variant="live" dot>Issue 001</Badge>
      </div>
      <div style={{ padding: '24px 26px 28px' }}>
        <p style={{ margin: '0 0 12px', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-500)' }}>{issue.kicker}</p>
        <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, lineHeight: 1.1, letterSpacing: '-0.025em', color: 'var(--ink-900)' }}>{issue.title}</h3>
        <p style={{ margin: '14px 0 0', fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.62, color: 'var(--ink-600)' }}>{issue.lead}</p>
        <div style={{ margin: '20px 0', height: 1, background: 'var(--line)' }} />
        <a href={issue.url} target="_blank" rel="noopener noreferrer" style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600, color: 'var(--accent)', letterSpacing: '0.06em', textDecoration: 'none', textTransform: 'uppercase' }}>Read Issue 001 →</a>
      </div>
    </div>
  );
}

function SampleSection() {
  return (
    <section style={{ background: 'linear-gradient(to bottom, #F4F5F8 0%, #F7F5F2 72px)' }}>
      <div style={{ ...container, paddingTop: 'var(--section-y)', paddingBottom: 'var(--section-y)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 'clamp(32px,5vw,72px)', alignItems: 'center' }} className="hero-split">
          <div>
            <p className="prism-eyebrow" style={{ margin: '0 0 16px' }}>Read one before you decide</p>
            <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(2rem,3.4vw,3rem)', lineHeight: 1.08, letterSpacing: '-0.03em', color: 'var(--ink-900)' }}>
              See what you're getting into.
            </h2>
            <p style={{ margin: '18px 0 0', maxWidth: 440, fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6, color: 'var(--ink-600)' }}>
              No recap, no hot takes. Each issue is one thing worth knowing and what I'd actually do with it.
            </p>
            <div style={{ marginTop: 28, background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', padding: '18px 22px', boxShadow: 'var(--shadow-sm)' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
                <Badge variant="live" dot style={{ fontSize: 10.5, padding: '3px 8px' }}>Issue 001</Badge>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-400)' }}>Jun 18, 2026</span>
              </div>
              <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18.5, lineHeight: 1.22, letterSpacing: '-0.02em', color: 'var(--ink-900)' }}>{REAL_ISSUE.title}</h3>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 14 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-400)' }}>{REAL_ISSUE.read} read</span>
                <a href={REAL_ISSUE.url} target="_blank" rel="noopener noreferrer" style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, fontWeight: 600, color: 'var(--accent)', textDecoration: 'none' }}>Read now →</a>
              </div>
            </div>
            <p style={{ margin: '16px 0 0', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-400)', letterSpacing: '0.04em' }}>New issue every Tuesday — subscribe to get it first.</p>

            <a href="/resources/" style={{ marginTop: 20, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
              background: 'var(--accent-tint)', border: '1px dashed var(--accent)', borderRadius: 'var(--r-lg)', padding: '14px 18px', textDecoration: 'none' }}>
              <span>
                <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14.5, color: 'var(--ink-900)' }}>Also free: tools, prompt vault &amp; the AI Blueprint</span>
                <span style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--ink-500)', marginTop: 2 }}>One email unlocks the whole library.</span>
              </span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12.5, fontWeight: 600, color: 'var(--accent)', whiteSpace: 'nowrap' }}>Explore →</span>
            </a>
          </div>
          <div style={{ position: 'relative' }}>
            <div aria-hidden="true" className="prism-mesh" style={{ position: 'absolute', inset: '-16%', zIndex: 0, opacity: 0.62, pointerEvents: 'none' }} />
            <div style={{ position: 'relative', zIndex: 1 }}><SampleIssuePreview floating /></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Author ---------------- */
function AuthorSection({ onSubscribed }) {
  return (
    <section style={{ background: 'linear-gradient(to bottom, #F7F5F2 0%, #F4F5F8 72px)' }}>
      <div style={{ ...container, paddingTop: 'var(--section-y)', paddingBottom: 'var(--section-y)' }}>
        <div className="hero-split" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,0.82fr) minmax(0,1.18fr)', gap: 'clamp(36px,5vw,76px)', alignItems: 'center' }}>
          <div style={{ position: 'relative' }}>
            <div aria-hidden="true" className="prism-mesh" style={{ position: 'absolute', inset: '-16%', zIndex: 0, opacity: 0.7, pointerEvents: 'none' }} />
            <div style={{ position: 'relative', zIndex: 1, aspectRatio: '4 / 5', borderRadius: 'var(--r-xl)', overflow: 'hidden', border: '1px solid var(--glass-border)', boxShadow: 'var(--shadow-xl), var(--shadow-inset)' }}>
              <img src="/assets/author.jpg" alt="Andrew Kolomiets" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }} />
            </div>
          </div>
          <div>
            <p className="prism-eyebrow" style={{ margin: '0 0 16px' }}>Written by</p>
            <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(2rem,3.4vw,3rem)', lineHeight: 1.08, letterSpacing: '-0.03em', color: 'var(--ink-900)' }}>
              Andrew Kolomiets
            </h2>
            <p style={{ margin: '20px 0 0', maxWidth: 540, fontFamily: 'var(--font-body)', fontSize: 17.5, lineHeight: 1.62, color: 'var(--ink-700)' }}>
              I started writing The Prism because I kept getting newsletters full of AI hype and rephrased Bloomberg. Every Tuesday I send what I'm actually thinking about — what's moving in markets, the AI tools I'm testing, what I'm building.
            </p>
            <p style={{ margin: '14px 0 0', maxWidth: 540, fontFamily: 'var(--font-body)', fontSize: 17.5, lineHeight: 1.62, color: 'var(--ink-700)' }}>
              First issue went out today. More every Tuesday.
            </p>
            <div style={{ marginTop: 32 }}>
              <a href="https://newsletter.insideprism.com/p/everyone-s-using-ai-to-do-less-that-s-the-wrong-game" target="_blank" rel="noopener noreferrer"
                style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600, color: 'var(--accent)', textDecoration: 'none', letterSpacing: '0.04em' }}>
                Read Issue #1 to decide →
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Closing CTA ---------------- */
function ClosingCTA({ onSubscribed }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--ink-900)' }}>
      <div aria-hidden="true" className="prism-mesh" style={{ position: 'absolute', inset: '-20%', zIndex: 0, opacity: 0.32, mixBlendMode: 'screen', filter: 'blur(50px)' }} />
      <div style={{ ...container, position: 'relative', zIndex: 1, paddingTop: 'clamp(64px,8vw,120px)', paddingBottom: 'clamp(64px,8vw,120px)', textAlign: 'center' }}>
        <h2 style={{ margin: '0 auto', maxWidth: '16ch', fontFamily: "'Inter', sans-serif", fontWeight: 600, fontSize: 'clamp(2.2rem,4vw,3.4rem)', lineHeight: 1.02, letterSpacing: '-0.04em', fontFeatureSettings: '"ss01", "cv05", "cv11"', color: '#fff' }}>
          One email. Worth reading.
        </h2>
        <p style={{ margin: '18px auto 0', maxWidth: 480, fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: 'var(--on-ink-mid)' }}>
          Free. Every week. If it stops being worth your time, unsubscribe — one click.
        </p>
        <div style={{ maxWidth: 460, margin: '32px auto 0' }}>
          <EmailCaptureForm cta="Subscribe — it's free" note="" onDark className="cta-dark" onDone={onSubscribed} />
          <p style={{ margin: '12px 0 0', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--on-ink-low)', letterSpacing: '0.04em' }}>Free · every Tuesday · cancel anytime</p>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function Footer() {
  return (
    <footer style={{ background: 'var(--ink-900)', borderTop: '1px solid rgba(255,255,255,0.08)' }}>
      <div style={{ ...container, paddingTop: 48, paddingBottom: 48, display: 'flex', flexWrap: 'wrap', gap: 28, alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <Logo tone="light" size={24} />
          <p style={{ margin: '14px 0 0', fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--on-ink-low)', maxWidth: 320 }}>AI &amp; finance, every Tuesday.</p>
        </div>
        <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap' }}>
          <a href="/resources/" style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--on-ink-mid)', textDecoration: 'none' }}>Free resources</a>
          {['Privacy', 'Contact'].map((l) => (
            <a key={l} href="#" style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--on-ink-mid)', textDecoration: 'none' }}>{l}</a>
          ))}
        </div>
      </div>
      <div style={{ ...container, paddingBottom: 32 }}>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 22, fontFamily: 'var(--font-mono)', fontSize: 11.5, letterSpacing: '0.06em', color: 'var(--on-ink-low)' }}>
          © 2026 The Prism
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, ProofBar, ValueProps, SampleSection, AuthorSection, ClosingCTA, Footer });