/* shared.jsx — atoms + copy used by all three landing directions. */

const EMAIL = 'cosic196@gmail.com';
const PRICE = '$99';
const TRIAL = '2-week free trial';
const BUY_URL = '#';        // wire to polar.sh later
const DOWNLOAD_URL = '#';   // app installer

// ─── Copy blocks ────────────────────────────────────────────────────────────
const VALUE_PROPS = [
  {
    label: 'IN YOUR DAW',
    title: 'Lives in your session.',
    body: 'Drop LeftEar and RightEar on any track or bus. The desktop app picks up routing, audio, and metadata. No re-export, no bouncing stems, no leaving your DAW.',
  },
  {
    label: 'OFFLINE',
    title: 'Never leaves your machine.',
    body: 'The mixing assistant runs a local model. No cloud, no account, no telemetry. Your sessions and stems stay on disk — yours.',
  },
  {
    label: 'UNBIASED',
    title: 'No taste, just measurements.',
    body: 'LUFS, peak, crest factor, 6-band balance, stereo width, transients, per-pair masking. The assistant grounds every suggestion in what it actually heard.',
  },
];

const HOW_IT_WORKS = [
  {
    step: '01',
    name: 'LeftEar',
    role: 'VST plugin · per-track',
    body: 'A single instance per track or bus. Captures audio plus routing metadata so the desktop app can rebuild your session graph.',
    spec: ['Single fader · master-bus toggle', 'Sends audio to 2ndEars', 'AU · VST3 · AAX'],
  },
  {
    step: '02',
    name: 'RightEar',
    role: 'VST plugin · master-side',
    body: 'Pairs with LeftEar. Carries an optional 120-char track description so the assistant knows what it\'s listening to — "lead vocal, doubled, slight rasp" — not just "Audio 14".',
    spec: ['Track description (0/120)', 'Hint context for the assistant', 'AU · VST3 · AAX'],
  },
  {
    step: '03',
    name: '2ndEars',
    role: 'Desktop app · macOS · Windows',
    body: 'Receives audio, rebuilds Sources → Buses → Master, runs analysis, and hosts the chat. Click any node to audition it in isolation. Ask anything in plain English.',
    spec: ['Routing · Analysis · Masking tabs', 'Local AI', 'Electron · 280 MB install'],
  },
];

const FEATURES = [
  ['ANALYSIS', 'LUFS · peak · crest factor · dynamic range, calculated per track and per bus.'],
  ['SPECTRAL BALANCE', '6-band energy breakdown with masking detection across every routing pair.'],
  ['STEREO FIELD', 'Width readouts and transient density, surfaced per track and on the master.'],
  ['ROUTING GRAPH', 'Sources → Buses → Master rebuilt from the plugins. Click any node to audition it.'],
  ['AI ASSISTANT', '5 turns per session, streamed locally. Cites the exact measurement behind each suggestion.'],
];

const FAQ = [
  ['Does it use AI?', 'Yes — a local model running on your machine. Nothing is sent to a server.'],
  ['What about my stems?', 'Audio stays on disk. The plugins stream to the desktop app directly.'],
  ['Will it mix for me?', "No. It gives you a second opinion grounded in measurements. The mix is still yours."],
];

// ─── Atoms ──────────────────────────────────────────────────────────────────

function Logo({ size = 22 }) {
  return (
    <span className="brand" style={{ fontSize: size > 28 ? 22 : 15 }}>
      <span className="logo-mark" style={{ width: size, height: size, color: 'var(--site-fg)' }} />
      <span>2ndEars</span>
    </span>
  );
}

function NavBar({ accent = 'amber' }) {
  return (
    <nav className="site-nav">
      <div className="inner">
        <Logo />
        <div className="links">
          <a href="#what">What it is</a>
          <a href="#how">How it works</a>
          <a href="#features">Features</a>
          <a href="#pricing">Pricing</a>
        </div>
        <a href={DOWNLOAD_URL} className="btn btn-primary" style={{ padding: '7px 14px' }}>
          Download
        </a>
      </div>
    </nav>
  );
}

function BuyCta({ size = 'md', layout = 'inline' }) {
  const big = size === 'lg';
  const padding = big ? '14px 24px' : '11px 18px';
  const fontSize = big ? 14 : 13;
  return (
    <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
      <a href={DOWNLOAD_URL} className="btn btn-primary" style={{ padding, fontSize }}>
        Download · {TRIAL}
      </a>
      <a href={BUY_URL} className="btn" style={{ padding, fontSize }}>
        Buy a license · {PRICE}
      </a>
    </div>
  );
}

function Footer() {
  return (
    <footer className="site-foot">
      <div className="inner">
        <div className="foot-col" style={{ gap: 14 }}>
          <Logo />
          <div style={{ fontSize: 12, color: 'var(--site-fg-2)', maxWidth: 280 }}>
            An AI-assisted mixing toolkit. Lives in your DAW. Runs on your machine.
          </div>
        </div>
        <div className="foot-col">
          <span className="foot-meta">Buy</span>
          <a href={BUY_URL} className="foot-email">License · {PRICE} one-time</a>
          <a href={DOWNLOAD_URL} className="foot-email" style={{ fontSize: 12, color: 'var(--site-fg-1)' }}>Download trial</a>
        </div>
        <div className="foot-col">
          <span className="foot-meta">Contact</span>
          <a href={`mailto:${EMAIL}`} className="foot-email">{EMAIL}</a>
          <span style={{ fontSize: 11, color: 'var(--site-fg-3)', fontFamily: 'var(--font-mono)', letterSpacing: '0.04em' }}>
            Support · feedback · feature requests
          </span>
        </div>
        <div className="foot-col" style={{ alignItems: 'flex-end' }}>
          <span className="foot-meta">v0.4.2 BETA</span>
          <span style={{ fontSize: 11, color: 'var(--site-fg-3)', fontFamily: 'var(--font-mono)' }}>
            macOS · Windows · AU · VST3 · AAX
          </span>
          <span style={{ fontSize: 11, color: 'var(--site-fg-3)', fontFamily: 'var(--font-mono)' }}>
            © 2026 2ndEars
          </span>
        </div>
      </div>
    </footer>
  );
}

// ─── Privacy callout (shared across all directions, with layout variants) ──
function PrivacyCallout({ variant = 'default' }) {
  if (variant === 'inverted') {
    return (
      <section className="section" style={{ background: 'var(--bg-0)', color: 'var(--fg-0)' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          <div className="stack-tight" style={{ gap: 18 }}>
            <span className="mono-l label-accent">PRIVACY · OFFLINE BY DEFAULT</span>
            <h2 style={{ fontSize: 36, lineHeight: 1.15, letterSpacing: '-0.025em' }}>
              Your stems are <em style={{ fontStyle: 'normal', color: 'var(--signal)' }}>yours</em>. We never see them.
            </h2>
            <p style={{ fontSize: 15, color: 'var(--fg-1)', maxWidth: 540, lineHeight: 1.55 }}>
              The mixing assistant runs a local AI model on your machine. No internet connection is required after install. No account. No telemetry. No data ever leaves your computer — not your audio, not your prompts, not your sessions.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '8px 0 0', display: 'grid', gap: 6 }}>
              {['Local LLM', 'No cloud sync', 'No accounts, no logins', 'Works on a plane'].map(t => (
                <li key={t} style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--fg-1)' }}>
                  <span style={{ width: 14, height: 14, color: 'var(--signal)' }}>
                    <svg width="14" height="14" viewBox="0 0 10 10"><path d="M2 5 L4.2 7.2 L8 3" stroke="currentColor" strokeWidth="1.3" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
                  </span>
                  {t}
                </li>
              ))}
            </ul>
          </div>
          <div style={{ position: 'relative' }}>
            <PrivacyDiagram />
          </div>
        </div>
      </section>
    );
  }
  return (
    <section className="section">
      <div className="container">
        <div className="card" style={{ padding: '48px 48px', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48, alignItems: 'center' }}>
          <div className="stack-tight" style={{ gap: 18 }}>
            <span className="mono-l label-accent">PRIVACY · OFFLINE BY DEFAULT</span>
            <h2 style={{ fontSize: 30, lineHeight: 1.15, letterSpacing: '-0.025em', color: 'var(--site-fg)' }}>
              Your stems never leave your machine.
            </h2>
            <p style={{ fontSize: 15, color: 'var(--site-fg-1)', lineHeight: 1.55 }}>
              The assistant runs a local AI model. No cloud, no account, no telemetry. After install, 2ndEars works fully offline — on a plane, in a studio, anywhere. We never see your audio because we never receive it.
            </p>
          </div>
          <PrivacyDiagram />
        </div>
      </div>
    </section>
  );
}

function PrivacyDiagram() {
  // Abstract: a closed signal loop contained inside a boundary. Outside the
  // boundary, faded unreachable nodes hint at "the cloud" without ever
  // touching the inside. No text.
  const LOOP = 'M 220 50 C 320 50, 380 110, 380 170 C 380 230, 320 290, 220 290 C 120 290, 60 230, 60 170 C 60 110, 120 50, 220 50 Z';
  return (
    <svg viewBox="0 0 440 340" width="100%" style={{ display: 'block', maxHeight: 340 }} aria-hidden="true">
      <defs>
        <linearGradient id="pd-loop" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="var(--site-line-1)" />
          <stop offset="60%" stopColor="var(--site-accent)" stopOpacity="0.85" />
          <stop offset="100%" stopColor="var(--site-line-1)" />
        </linearGradient>
        <radialGradient id="pd-halo" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="var(--site-accent)" stopOpacity="0.22" />
          <stop offset="60%" stopColor="var(--site-accent)" stopOpacity="0.05" />
          <stop offset="100%" stopColor="var(--site-accent)" stopOpacity="0" />
        </radialGradient>
        <radialGradient id="pd-core" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="var(--site-accent)" stopOpacity="1" />
          <stop offset="100%" stopColor="var(--site-accent)" stopOpacity="0" />
        </radialGradient>
      </defs>

      {/* Outer "elsewhere" — faint unreachable nodes, never touching the loop. */}
      {[[24, 30], [410, 38], [22, 300], [414, 308], [220, 18], [220, 322]].map(([cx, cy], i) => (
        <g key={i} opacity="0.42">
          <circle cx={cx} cy={cy} r="5" fill="none" stroke="var(--site-line-1)" strokeDasharray="2 2" />
          <circle cx={cx} cy={cy} r="1.4" fill="var(--site-fg-3)" />
        </g>
      ))}
      {/* Connector stubs from those outer nodes that fade out before reaching the loop. */}
      {[[24, 30, 80, 86], [410, 38, 360, 92], [22, 300, 80, 248], [414, 308, 360, 250]].map(([x1, y1, x2, y2], i) => (
        <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}
          stroke="var(--site-line)" strokeWidth="1" strokeDasharray="2 4" opacity="0.4" />
      ))}

      {/* Soft halo behind the boundary — the "warmth" of the machine. */}
      <circle cx="220" cy="170" r="160" fill="url(#pd-halo)" />

      {/* Boundary: closed loop carrying signal. */}
      <path d={LOOP} fill="color-mix(in oklch, var(--site-accent) 3%, transparent)"
        stroke="url(#pd-loop)" strokeWidth="1.3" />

      {/* Inner concentric trace — a quieter second ring inside. */}
      <path d="M 220 90 C 290 90, 340 130, 340 170 C 340 210, 290 250, 220 250 C 150 250, 100 210, 100 170 C 100 130, 150 90, 220 90 Z"
        fill="none" stroke="var(--site-line)" strokeWidth="0.8" opacity="0.5" />

      {/* Four anchor nodes sitting on the boundary. */}
      {[[220, 50], [380, 170], [220, 290], [60, 170]].map(([cx, cy], i) => (
        <g key={i}>
          <circle cx={cx} cy={cy} r="8" fill="var(--site-card)" stroke="var(--site-line-1)" />
          <circle cx={cx} cy={cy} r="2.2" fill="var(--site-fg-1)" />
        </g>
      ))}

      {/* Center core — pulsing soft, then a hard amber dot. */}
      <circle cx="220" cy="170" r="36" fill="url(#pd-core)">
        <animate attributeName="r" values="32;42;32" dur="3.2s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="0.85;0.5;0.85" dur="3.2s" repeatCount="indefinite" />
      </circle>
      <circle cx="220" cy="170" r="5" fill="var(--site-accent)">
        <animate attributeName="opacity" values="1;0.55;1" dur="1.6s" repeatCount="indefinite" />
      </circle>

      {/* Signal dot traveling around the closed loop — the audio that stays inside. */}
      <circle r="4" fill="var(--site-accent)">
        <animateMotion dur="7s" repeatCount="indefinite" path={LOOP} />
      </circle>
      <circle r="4" fill="var(--site-accent)" opacity="0.5">
        <animateMotion dur="7s" repeatCount="indefinite" begin="-3.5s" path={LOOP} />
      </circle>
    </svg>
  );
}

// ─── Pricing card ──────────────────────────────────────────────────────────
function PricingCard({ id = 'pricing' }) {
  return (
    <section className="section" id={id}>
      <div className="container-narrow">
        <div className="section-head" style={{ textAlign: 'center', alignItems: 'center' }}>
          <span className="mono-l section-eyebrow">PRICING</span>
          <h2 className="section-title" style={{ textAlign: 'center' }}>One purchase. Yours forever.</h2>
        </div>
        <div className="card" style={{
          padding: '40px 48px',
          display: 'grid', gridTemplateColumns: '1fr auto',
          alignItems: 'center', gap: 40,
        }}>
          <div className="stack-tight" style={{ gap: 12 }}>
            <div className="row" style={{ gap: 10 }}>
              <span className="chip"><span className="chip-dot" /> ONE-TIME</span>
              <span className="mono-l">VERSION <span style={{ color: 'var(--site-fg-1)' }}>1.x</span></span>
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, fontFamily: 'var(--font-mono)' }}>
              <span style={{ fontSize: 56, fontWeight: 600, color: 'var(--site-fg)', letterSpacing: '-0.03em', lineHeight: 1 }}>$99</span>
              <span style={{ fontSize: 13, color: 'var(--site-fg-2)' }}>USD · one-time</span>
            </div>
            <p style={{ fontSize: 14, color: 'var(--site-fg-1)', maxWidth: 440, marginTop: 6 }}>
              Includes the desktop app, LeftEar &amp; RightEar plugins, and all 1.x updates. Use on up to two machines.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '12px 0 0', display: 'grid', gap: 8 }}>
              {[
                '2-week free trial · no card required',
                'License key delivered by email',
                'macOS 12+ · Windows 10+',
              ].map(t => (
                <li key={t} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: 'var(--site-fg-1)' }}>
                  <span style={{ width: 14, height: 14, color: 'var(--site-accent)', flexShrink: 0 }}>
                    <svg width="14" height="14" viewBox="0 0 10 10"><path d="M2 5 L4.2 7.2 L8 3" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
                  </span>
                  {t}
                </li>
              ))}
            </ul>
          </div>
          <div className="stack-tight" style={{ gap: 10, alignItems: 'stretch', minWidth: 240 }}>
            <a href={DOWNLOAD_URL} className="btn btn-primary" style={{ justifyContent: 'center', padding: '14px 20px', fontSize: 14 }}>
              Download trial
            </a>
            <a href={BUY_URL} className="btn" style={{ justifyContent: 'center', padding: '14px 20px', fontSize: 14 }}>
              Buy a license · $99
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Feature list (compact two-col) ────────────────────────────────────────
function FeatureList({ id = 'features' }) {
  return (
    <section className="section" id={id} style={{ background: 'var(--site-bg-2)' }}>
      <div className="container">
        <div className="section-head">
          <span className="mono-l section-eyebrow">FEATURES</span>
          <h2 className="section-title">What's in the app.</h2>
          <p className="section-lede">Six measurement engines, one chat interface, and a routing graph that mirrors your session. Built for producers who already know what a crest factor is.</p>
        </div>
        <div style={{ borderTop: '1px solid var(--site-line)' }}>
          {FEATURES.map(([label, desc], i) => (
            <div key={label} style={{
              display: 'grid', gridTemplateColumns: '180px 1fr auto',
              padding: '20px 0', gap: 28,
              borderBottom: '1px solid var(--site-line)',
              alignItems: 'baseline',
            }}>
              <span className="mono-l" style={{ color: 'var(--site-fg)' }}>{label}</span>
              <span style={{ fontSize: 15, color: 'var(--site-fg-1)', lineHeight: 1.5 }}>{desc}</span>
              <span className="mono-tiny" style={{ color: 'var(--site-fg-3)' }}>{String(i + 1).padStart(2, '0')} / {String(FEATURES.length).padStart(2, '0')}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Beginners + Pros block ────────────────────────────────────────────────
function BeginnersAndPros() {
  return (
    <section className="section">
      <div className="container">
        <div className="grid-2" style={{ gap: 24 }}>
          <div className="card-flat" style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 14 }}>
            <span className="mono-l">FOR BEGINNERS</span>
            <h3 style={{ fontSize: 22, lineHeight: 1.25, color: 'var(--site-fg)' }}>Learn the why behind every fader.</h3>
            <p style={{ fontSize: 14, color: 'var(--site-fg-1)', lineHeight: 1.6 }}>
              Most mix tutorials tell you what to do. 2ndEars tells you <em style={{ fontStyle: 'normal', color: 'var(--site-fg)' }}>why</em> your mix sounds the way it does — which frequencies are fighting, which tracks are buried, where the dynamics collapse. Ask anything. The assistant cites the number it's looking at.
            </p>
            <div style={{ marginTop: 8, display: 'grid', gap: 10 }}>
              {[
                ['"Why does my kick feel weak?"', 'Sub at 60 Hz is fighting bass DI.'],
                ['"Is my vocal too quiet?"', 'Vocal Lead is −4 LUFS below mix avg.'],
              ].map(([q, a]) => (
                <div key={q} style={{ display: 'grid', gap: 4, padding: '12px 14px', background: 'var(--site-card)', border: '1px solid var(--site-line)', borderRadius: 6 }}>
                  <span style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--site-fg)' }}>{q}</span>
                  <span style={{ fontSize: 12, color: 'var(--site-fg-2)', fontFamily: 'var(--font-mono)' }}>→ {a}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="card-flat" style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 14 }}>
            <span className="mono-l">FOR PROS</span>
            <h3 style={{ fontSize: 22, lineHeight: 1.25, color: 'var(--site-fg)' }}>A second pair of ears that doesn't get tired.</h3>
            <p style={{ fontSize: 14, color: 'var(--site-fg-1)', lineHeight: 1.6 }}>
              You've been on the mix for six hours. Your ears are gone. 2ndEars surfaces what you stopped noticing — masking conflicts, dynamic-range drops on the master bus, stereo imbalance on a vocal that drifted at hour three. No taste, no bias. Just measurements.
            </p>
            <div style={{ marginTop: 8, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
              {[
                ['LUFS', '−14.2'],
                ['CREST', '11.4'],
                ['MASKING', '3 high'],
              ].map(([k, v]) => (
                <div key={k} style={{ padding: '12px 14px', background: 'var(--site-card)', border: '1px solid var(--site-line)', borderRadius: 6, textAlign: 'left' }}>
                  <div className="mono-l" style={{ fontSize: 9.5 }}>{k}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 18, fontWeight: 500, color: 'var(--site-fg)', marginTop: 2 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  EMAIL, PRICE, TRIAL, BUY_URL, DOWNLOAD_URL,
  VALUE_PROPS, HOW_IT_WORKS, FEATURES, FAQ,
  Logo, NavBar, BuyCta, Footer,
  PrivacyCallout, PrivacyDiagram, PricingCard, FeatureList, BeginnersAndPros,
});
