const CALC_SHELL_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": 215
}/*EDITMODE-END*/;

function CalcApp() {
  const [tweaks, setTweak] = useTweaks(CALC_SHELL_TWEAK_DEFAULTS);
  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)`,
  };

  return (
    <div className="cm-root" style={{ ...accentStyle, width: '100%', minHeight: '100vh', overflow: 'visible' }}>
      <div style={{
        position: 'fixed', 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 className="cm-nav" style={{ maxWidth: 1280, margin: '0 auto' }}>
        <a href="index.html" style={{ textDecoration: 'none', color: 'var(--ink-0)' }}><Wordmark Mark={LogoSynapticOrbital} size={26} accent="currentColor" /></a>
        <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="index.html#products">Products</a>
          <a href="index.html#newsletter">Newsletter</a>
          <a href="index.html#consultancy">Consultancy</a>
          <a href="index.html#about">About</a>
          <a className="cm-btn cm-btn-accent" href="https://calculator.clustermind.io" style={{ padding: '6px 14px', fontSize: 13, marginLeft: 8, textDecoration: 'none' }}>Live tool</a>
        </div>
        <div className="cm-chip"><span className="cm-chip-dot" /> calculator.clustermind.io</div>
      </nav>

      <section style={{ padding: '48px 56px 24px', position: 'relative', zIndex: 1, maxWidth: 1280, margin: '0 auto' }}>
        <div className="cm-eyebrow">Tool · 01 · Live</div>
        <h1 className="cm-h1" style={{ fontSize: 76, maxWidth: 980, marginTop: 18 }}>
          AI <span style={{ color: 'var(--accent)' }}>Calculator</span>.<br/>
          Hardware footprint & TCO, with the full planner intact.
        </h1>
        <p className="cm-lead" style={{ marginTop: 22, fontSize: 19, maxWidth: 760 }}>
          This page uses your supplied calculator design shell, while the embedded tool keeps the richer fields and developed calculator logic we already built.
        </p>
      </section>

      <section style={{ padding: '0 56px 72px', position: 'relative', zIndex: 1, maxWidth: 1280, margin: '0 auto' }}>
        <div className="cm-card" style={{ padding: 0, overflow: 'hidden', background: 'var(--bg-1)', borderRadius: 22 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 20px', borderBottom: '1px solid var(--line-soft)' }}>
            <div className="cm-mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em' }}>ADVANCED CALCULATOR · EMBEDDED</div>
            <a href="calculator-core.html" className="cm-btn" style={{ padding: '8px 12px', fontSize: 12, textDecoration: 'none' }}>Open raw page ↗</a>
          </div>
          <iframe
            title="Clustermind Calculator"
            src="calculator-core.html"
            style={{ width: '100%', height: '2200px', border: 'none', display: 'block', background: 'transparent' }}
            loading="eager"
          />
        </div>
      </section>

      <TweaksPanel>
        <TweakSection title="Accent">
          <TweakSlider label="Hue" value={tweaks.accentHue} min={0} max={360} step={1}
            onChange={(v) => setTweak('accentHue', v)} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}