// Clustermind home — final, navy palette, Synaptic Orbital logo
// Built off Variation C (Spatial) with refinements:
//  - Dark blue / navy palette
//  - New AI-flavored logo (Synaptic Orbital) used in nav, hero center, footer
//  - Tighter copy + better visual hierarchy
//  - Tweaks panel to swap logo variant + accent

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "logoVariant": "synaptic",
  "accentHue": 215
}/*EDITMODE-END*/;

function ClustermindHome() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [email, setEmail] = React.useState("");
  const [subscribed, setSubscribed] = React.useState(false);
  const [hover, setHover] = React.useState(null);
  const submit = (e) => { e.preventDefault(); if (email.includes("@")) setSubscribed(true); };

  // Live accent override
  const accentStyle = {
    '--accent': `oklch(0.84 0.14 ${tweaks.accentHue})`,
    '--accent-soft': `oklch(0.62 0.12 ${tweaks.accentHue})`,
    '--accent-glow': `oklch(0.84 0.14 ${tweaks.accentHue} / 0.22)`,
  };
  const Mark = tweaks.logoVariant === "probabilistic" ? LogoProbOrbital : LogoSynapticOrbital;

  return (
    <div className="cm-root" style={accentStyle}>
      {/* Ambient glow background */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `radial-gradient(900px 600px at 50% 18%, var(--accent-glow), transparent 60%),
                     radial-gradient(700px 500px at 90% 80%, oklch(0.84 0.14 75 / 0.06), transparent 60%)`,
      }} />

      {/* NAV */}
      <nav className="cm-nav">
        <Wordmark Mark={Mark} size={26} />
        <div className="cm-nav-links" style={{ background: 'var(--bg-1)', padding: '8px 8px 8px 24px', borderRadius: 999, border: '1px solid var(--line-soft)', gap: 24 }}>
          <a href="#products">Products</a>
          <a href="#newsletter">Newsletter</a>
          <a href="#consultancy">Consultancy</a>
          <a href="#about">About</a>
          <button className="cm-btn cm-btn-accent" style={{ padding: '6px 14px', fontSize: 13, marginLeft: 8 }}>Subscribe</button>
        </div>
        <div className="cm-chip"><span className="cm-chip-dot" /> 12,400 readers</div>
      </nav>

      {/* HERO */}
      <section style={{ padding: '56px 56px 0', position: 'relative', zIndex: 1 }} data-screen-label="01 Hero">
        <div className="cm-chip" style={{ marginBottom: 24 }}>
          <span className="cm-chip-dot" /> NEW · Apr 24 · The B200 ramp changes the cost curve →
        </div>
        <h1 className="cm-h1" style={{ maxWidth: 1100 }}>
          Tools, writing, and minds<br/>
          working at the edge of <br/>
          <span style={{ position: 'relative', display: 'inline-block' }}>
            <span style={{ color: 'var(--accent)' }}>applied AI</span>
            <svg style={{ position: 'absolute', bottom: -8, left: 0, width: '100%', height: 14 }} viewBox="0 0 400 14" preserveAspectRatio="none">
              <path d="M2 10 Q 100 2, 200 8 T 398 6" fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" opacity="0.7" />
            </svg>
          </span>.
        </h1>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginTop: 40, alignItems: 'center' }}>
          <p className="cm-lead" style={{ fontSize: 20, maxWidth: 540 }}>
            Clustermind is a research‑led studio. We publish a weekly technical
            newsletter, ship calculators that earn their keep, and run a small
            consultancy for teams shipping AI to production.
          </p>
          <div>
            {!subscribed ? (
              <form onSubmit={submit} style={{ display: 'flex', gap: 8, padding: 6, background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 12, maxWidth: 480 }}>
                <input className="cm-input" type="email" placeholder="you@company.com"
                  value={email} onChange={(e) => setEmail(e.target.value)} required />
                <button className="cm-btn cm-btn-accent" type="submit" style={{ borderRadius: 8 }}>Subscribe</button>
              </form>
            ) : (
              <div className="cm-chip" style={{ borderColor: 'var(--accent)', color: 'var(--accent)' }}>
                <span className="cm-chip-dot" /> You're in. Welcome to the cluster.
              </div>
            )}
            <div style={{ marginTop: 14, display: 'flex', gap: 18, fontSize: 12, color: 'var(--ink-3)' }} className="cm-mono">
              <span>WEEKLY · 4 MIN</span>
              <span>NO SPAM</span>
              <span>POWERED BY BEEHIIV</span>
            </div>
          </div>
        </div>

        {/* SPATIAL HERO PIECE */}
        <div style={{ marginTop: 80, position: 'relative', height: 540, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {/* Concentric rings */}
          <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} viewBox="0 0 1200 540" preserveAspectRatio="xMidYMid meet">
            <defs>
              <radialGradient id="sp-ring" cx="50%" cy="50%">
                <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.45" />
                <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
              </radialGradient>
            </defs>
            <ellipse cx="600" cy="270" rx="500" ry="240" fill="none" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 4" opacity="0.5" />
            <ellipse cx="600" cy="270" rx="360" ry="180" fill="none" stroke="var(--line-soft)" strokeWidth="1" />
            <ellipse cx="600" cy="270" rx="220" ry="110" fill="none" stroke="var(--line-soft)" strokeWidth="1" />
            <circle cx="600" cy="270" r="100" fill="url(#sp-ring)" />
          </svg>

          {/* Big logo center */}
          <div style={{ position: 'absolute', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, animation: 'cm-drift 6s ease-in-out infinite' }}>
            <Mark size={170} color="var(--ink-0)" accent="var(--accent)" />
            <div className="cm-mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.18em' }}>CLUSTERMIND · CORE</div>
          </div>

          {/* Floating chips */}
          <FloatingChip style={{ top: 30, left: 80 }} hover={hover === 'calc'} onEnter={() => setHover('calc')} onLeave={() => setHover(null)}
            tag="01 · LIVE" title="AI Calculator" sub="calculator.clustermind.io"
            stat="$/Mtok · GPU·hours · TCO" accent href="https://calculator.clustermind.io" />
          <FloatingChip style={{ top: 80, right: 70 }} hover={hover === 'rag'} onEnter={() => setHover('rag')} onLeave={() => setHover(null)}
            tag="02 · LIVE" title="RAG Planner" sub="rag-planner.clustermind.io"
            stat="latency · recall · cost" accent href="https://rag-planner.clustermind.io" />
          <FloatingChip style={{ bottom: 60, left: 130 }} muted
            tag="03 · SOON" title="Eval Harness" sub="evals.clustermind.io"
            stat="reproducible · your data" />
          <FloatingChip style={{ bottom: 30, right: 110 }} muted
            tag="04 · SOON" title="Cost Sentinel" sub="cost.clustermind.io"
            stat="watch · alert · cap" />
          <FloatingChip style={{ top: 240, left: 24 }} muted ghost
            tag="DISPATCH" title="Newsletter" sub="weekly · 12,400 readers"
            stat="technical AI writing" />
          <FloatingChip style={{ top: 220, right: 32 }} muted ghost
            tag="ENGAGEMENTS" title="Consultancy" sub="2026 Q3 · 3 slots"
            stat="architecture · audits" />
        </div>
      </section>

      {/* PRODUCTS */}
      <section className="cm-section" id="products" style={{ paddingTop: 64 }} data-screen-label="02 Products">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 48 }}>
          <div>
            <div className="cm-eyebrow">Live tools</div>
            <h2 className="cm-h2" style={{ marginTop: 18 }}>The two we use ourselves, every day.</h2>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <ProductCard
            num="01" title="AI Calculator" url="calculator.clustermind.io"
            desc="Estimate the hardware footprint of training and inference. Pick a model, a budget, a workload — get GPU hours, memory, and a defensible TCO."
            features={["Train & inference modes", "H100, B200, MI300X presets", "Live cost curves"]}
            sample={[
              ['Model', 'Llama 3.1 405B'],
              ['Workload', '1.2B tokens/day'],
              ['→ GPUs', '8 × H100 SXM'],
              ['→ Monthly', '$14,800 ± 12%'],
            ]}
          />
          <ProductCard
            num="02" title="RAG Planner" url="rag-planner.clustermind.io"
            desc="Compose a retrieval pipeline before you write the code. Pick chunkers, embedders, stores, rerankers — see latency and recall move with each choice."
            features={["12 pipeline presets", "pgvector / Qdrant / Pinecone", "TCO + recall projection"]}
            sample={[
              ['Corpus', '4.2M docs · 18 GB'],
              ['QPS', '14 · target <500ms'],
              ['→ Stack', 'pgvector + bge-m3 + cohere'],
              ['→ Cost', '$184/mo · recall@10 0.91'],
            ]}
          />
        </div>

        {/* Coming soon strip */}
        <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {[
            ['03', 'Eval Harness', 'Reproducible benchmarks on your own data.'],
            ['04', 'Prompt Studio', 'Version, test, and ship prompts. Catch regressions.'],
            ['05', 'Cost Sentinel', 'Watch model spend across providers, in one place.'],
          ].map(([n, t, d]) => (
            <div key={n} style={{ padding: 24, border: '1px dashed var(--line)', borderRadius: 12 }}>
              <div className="cm-mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em' }}>{n} · SOON</div>
              <div style={{ marginTop: 12, fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em' }}>{t}</div>
              <div style={{ marginTop: 8, fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.55 }}>{d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* NEWSLETTER ARCHIVE PEEK */}
      <section className="cm-section" id="newsletter" style={{ paddingTop: 24 }} data-screen-label="03 Newsletter">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 36 }}>
          <div>
            <div className="cm-eyebrow">Recent dispatches</div>
            <h2 className="cm-h2" style={{ marginTop: 18 }}>Weekly. Technical. No fluff.</h2>
          </div>
          <a href="#" style={{ color: 'var(--ink-1)', textDecoration: 'none', fontSize: 14, borderBottom: '1px solid var(--line)', paddingBottom: 4 }}>
            Browse archive →
          </a>
        </div>
        <div style={{ borderTop: '1px solid var(--line-soft)' }}>
          {[
            ['024', 'Apr 24', 'The B200 ramp is real — and it changes the cost curve.', '5 MIN', 'HARDWARE'],
            ['023', 'Apr 17', 'Reranker beats fine-tune: a $0 win in production RAG.', '7 MIN', 'RAG'],
            ['022', 'Apr 10', 'Why your eval harness is probably lying to you.', '6 MIN', 'EVALS'],
            ['021', 'Apr 03', 'GPT-OSS 120B at sub-cent inference, end to end.', '4 MIN', 'INFERENCE'],
          ].map(([n, d, t, r, tag]) => (
            <div key={n} style={{ display: 'grid', gridTemplateColumns: '60px 100px 1fr 110px 80px 24px', gap: 24, alignItems: 'center', padding: '22px 0', borderBottom: '1px solid var(--line-soft)' }}>
              <span className="cm-mono" style={{ fontSize: 12, color: 'var(--accent-soft)' }}>#{n}</span>
              <span className="cm-mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>{d}</span>
              <span style={{ fontSize: 18, color: 'var(--ink-0)', letterSpacing: '-0.015em' }}>{t}</span>
              <span className="cm-chip" style={{ fontSize: 10, padding: '3px 8px' }}>{tag}</span>
              <span className="cm-mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{r}</span>
              <span style={{ color: 'var(--ink-2)' }}>→</span>
            </div>
          ))}
        </div>
      </section>

      {/* CONSULTANCY */}
      <section className="cm-section" id="consultancy" style={{ paddingTop: 24 }} data-screen-label="04 Consultancy">
        <div style={{ background: 'linear-gradient(180deg, var(--bg-1), var(--bg-0))', border: '1px solid var(--line)', borderRadius: 18, padding: 56, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: -80, right: -80, width: 280, height: 280, borderRadius: '50%', background: 'var(--accent-glow)', filter: 'blur(70px)' }} />
          <div style={{ position: 'relative' }}>
            <div className="cm-eyebrow">Consultancy · 2026 Q3</div>
            <h2 className="cm-h2" style={{ marginTop: 18, fontSize: 42 }}>
              When something has to ship — and you're stuck — call us.
            </h2>
            <p className="cm-lead" style={{ marginTop: 18 }}>
              Architecture reviews, cost audits, embedded engineering. Three slots
              per quarter. We pick the work that has clear teeth.
            </p>
            <div style={{ marginTop: 28, display: 'flex', gap: 12 }}>
              <button className="cm-btn cm-btn-accent">Request a call →</button>
              <button className="cm-btn">Past work</button>
            </div>
          </div>
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {[
              ['2 wks', 'Architecture review', 'RAG, agents, fine-tuning'],
              ['1 wk', 'Cost audit', 'Find 30%+ savings'],
              ['4–8 wks', 'Embedded sprint', 'We sit with your team'],
              ['1 wk', 'Eval design', 'Build the benchmark you need'],
            ].map(([d, t, sub]) => (
              <div key={t} style={{ padding: '20px 22px', borderRadius: 12, background: 'var(--bg-0)', border: '1px solid var(--line-soft)' }}>
                <div className="cm-mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.08em' }}>{d.toUpperCase()}</div>
                <div style={{ marginTop: 10, fontSize: 17, color: 'var(--ink-0)', letterSpacing: '-0.015em' }}>{t}</div>
                <div style={{ marginTop: 4, fontSize: 12.5, color: 'var(--ink-3)' }}>{sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{ borderTop: '1px solid var(--line-soft)', padding: '56px 56px 36px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }} data-screen-label="05 Footer">
        <div>
          <Wordmark Mark={Mark} size={24} />
          <div style={{ marginTop: 16, fontSize: 13, color: 'var(--ink-3)', maxWidth: 320, lineHeight: 1.6 }}>
            A research‑led studio working at the edge of applied AI.
          </div>
          <div style={{ marginTop: 24, display: 'flex', gap: 8 }}>
            {['Twitter', 'GitHub', 'RSS', 'LinkedIn'].map((s) => (
              <span key={s} className="cm-chip" style={{ fontSize: 11 }}>{s}</span>
            ))}
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, auto)', gap: 64, fontSize: 13, color: 'var(--ink-2)' }}>
          {[
            ['Products', ['AI Calculator', 'RAG Planner', 'Eval Harness — soon', 'Cost Sentinel — soon']],
            ['Studio', ['Newsletter', 'Consultancy', 'About']],
            ['Resources', ['Archive', 'Press', 'Contact']],
          ].map(([h, items]) => (
            <div key={h}>
              <div className="cm-mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em', marginBottom: 14 }}>{h.toUpperCase()}</div>
              {items.map((i) => <div key={i} style={{ marginBottom: 8 }}>{i}</div>)}
            </div>
          ))}
        </div>
      </footer>
      <div className="cm-mono" style={{ padding: '0 56px 32px', fontSize: 11, color: 'var(--ink-3)', display: 'flex', justifyContent: 'space-between' }}>
        <span>© 2026 CLUSTERMIND</span>
        <span>BUILT IN PUBLIC · APR 2026</span>
      </div>

      {/* TWEAKS */}
      <TweaksPanel>
        <TweakSection title="Logo">
          <TweakRadio label="Mark" value={tweaks.logoVariant} onChange={(v) => setTweak('logoVariant', v)}
            options={[
              { value: 'synaptic', label: 'Synaptic' },
              { value: 'probabilistic', label: 'Probabilistic' },
            ]} />
        </TweakSection>
        <TweakSection title="Accent">
          <TweakSlider label="Hue" value={tweaks.accentHue} min={0} max={360} step={1}
            onChange={(v) => setTweak('accentHue', v)} />
          <div style={{ marginTop: 8, display: 'flex', gap: 6 }}>
            {[215, 250, 145, 75, 25].map((h) => (
              <button key={h} onClick={() => setTweak('accentHue', h)}
                style={{
                  width: 28, height: 28, borderRadius: 6, border: '1px solid rgba(255,255,255,0.15)',
                  background: `oklch(0.84 0.14 ${h})`, cursor: 'pointer', padding: 0,
                  outline: tweaks.accentHue === h ? '2px solid white' : 'none',
                }} />
            ))}
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

function FloatingChip({ style, tag, title, sub, stat, accent, muted, ghost, hover, onEnter, onLeave, href }) {
  const Comp = href ? 'a' : 'div';
  return (
    <Comp onMouseEnter={onEnter} onMouseLeave={onLeave} href={href} target={href ? '_blank' : undefined} rel={href ? 'noopener noreferrer' : undefined}
      style={{
        position: 'absolute', ...style,
        background: ghost ? 'transparent' : 'var(--bg-1)',
        border: `1px solid ${accent ? 'var(--accent)' : 'var(--line)'}`,
        borderRadius: 14,
        padding: '14px 18px',
        minWidth: 220,
        boxShadow: accent ? '0 0 0 4px var(--accent-glow), 0 12px 30px rgba(0,0,0,0.35)' : '0 8px 24px rgba(0,0,0,0.25)',
        transition: 'transform .25s ease, box-shadow .25s ease',
        transform: hover ? 'translateY(-4px) scale(1.02)' : 'translateY(0)',
        opacity: muted && !accent ? 0.85 : 1,
        animation: 'cm-drift 7s ease-in-out infinite',
        textDecoration: 'none',
      }}>
      <div className="cm-mono" style={{ fontSize: 10, color: accent ? 'var(--accent)' : 'var(--ink-3)', letterSpacing: '0.1em' }}>
        {tag}
      </div>
      <div style={{ marginTop: 8, fontSize: 17, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--ink-0)' }}>{title}</div>
      <div className="cm-mono" style={{ marginTop: 4, fontSize: 11, color: 'var(--ink-3)' }}>{sub}</div>
      <div style={{ marginTop: 10, fontSize: 12, color: 'var(--ink-2)' }}>{stat}</div>
    </Comp>
  );
}

function ProductCard({ num, title, url, desc, features, sample }) {
  return (
    <div className="cm-card" style={{ padding: 32, background: 'var(--bg-1)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <div className="cm-mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.1em' }}>{num} · LIVE</div>
        <div className="cm-mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>↗ {url}</div>
      </div>
      <div style={{ marginTop: 20, fontSize: 32, fontWeight: 500, letterSpacing: '-0.025em' }}>{title}</div>
      <div style={{ marginTop: 12, fontSize: 14.5, color: 'var(--ink-2)', lineHeight: 1.55, maxWidth: 460 }}>{desc}</div>
      <div style={{ marginTop: 22, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
        {features.map((f) => <span key={f} className="cm-chip" style={{ fontSize: 11 }}>{f}</span>)}
      </div>
      <div style={{ marginTop: 22, padding: 18, background: 'var(--bg-0)', borderRadius: 10, border: '1px solid var(--line-soft)' }}>
        {sample.map(([k, v]) => (
          <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', fontSize: 13, borderBottom: '1px dashed var(--line-soft)' }}>
            <span className="cm-mono" style={{ color: k.startsWith('→') ? 'var(--accent)' : 'var(--ink-3)', letterSpacing: '0.04em', fontSize: 11 }}>{k}</span>
            <span style={{ color: 'var(--ink-1)' }}>{v}</span>
          </div>
        ))}
      </div>
      <a className="cm-btn cm-btn-accent" style={{ marginTop: 22, textDecoration: 'none' }} href={`https://${url}`} target="_blank" rel="noopener noreferrer">Open tool →</a>
    </div>
  );
}

Object.assign(window, { ClustermindHome });