// Main shell — nav, tweaks, top bar

const PALETTES = {
  lime: {
    label: 'Atronics Lime',
    accent: '#D4FF3A',
    onLight: '#4A6600',
    ink: '#3D5200',
    tint: 'rgba(212, 255, 58, 0.16)',
    tint2: 'rgba(212, 255, 58, 0.28)',
  },
  teal: {
    label: 'Signal Teal',
    accent: '#0F766E',
    onLight: '#0F766E',
    ink: '#0B4F49',
    tint: 'rgba(15, 118, 110, 0.08)',
    tint2: 'rgba(15, 118, 110, 0.14)',
  },
  sienna: {
    label: 'Deep Sienna',
    accent: '#C2410C',
    onLight: '#C2410C',
    ink: '#7C2D0A',
    tint: 'rgba(194, 65, 12, 0.08)',
    tint2: 'rgba(194, 65, 12, 0.14)',
  },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "lime"
}/*EDITMODE-END*/;

function App() {
  // Public prototype: palette is locked to the Atronics brand lime.
  // (The in-browser editor "Tweaks" panel is intentionally omitted here.)
  const tweaks = TWEAK_DEFAULTS;
  const [active, setActive] = React.useState('story');

  // Apply palette to CSS vars
  React.useEffect(() => {
    const p = PALETTES[tweaks.palette] || PALETTES.lime;
    document.documentElement.style.setProperty('--accent', p.accent);
    document.documentElement.style.setProperty('--accent-on-light', p.onLight);
    document.documentElement.style.setProperty('--accent-on-dark', p.accent);
    document.documentElement.style.setProperty('--accent-ink', p.ink);
    document.documentElement.style.setProperty('--accent-tint', p.tint);
    document.documentElement.style.setProperty('--accent-tint-2', p.tint2);
  }, [tweaks.palette]);

  // Scroll spy
  React.useEffect(() => {
    const sections = ['story', 'patient', 'care', 'detail', 'engine', 'access'];
    const onScroll = () => {
      for (let i = sections.length - 1; i >= 0; i--) {
        const el = document.getElementById(sections[i]);
        if (el && el.getBoundingClientRect().top < 200) {
          setActive(sections[i]);
          return;
        }
      }
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop, behavior: 'smooth' });
  };

  const items = [
    { id: 'story', label: 'The 10-second story' },
    { id: 'patient', label: 'Patient app' },
    { id: 'care', label: 'Care team dashboard' },
    { id: 'detail', label: 'Patient detail' },
    { id: 'engine', label: 'Continuity Engine' },
    { id: 'access', label: 'Multiple access points' },
  ];

  return (
    <div className="shell">
      {/* Side nav */}
      <aside className="side-nav">
        <div className="side-nav__brand">
          <div className="side-nav__wordmark">Atronics<span style={{ color: 'var(--accent-fg)' }}>.</span></div>
          <div className="side-nav__sub">Jessie · Product mockup</div>
        </div>

        <div className="side-nav__section-label">Prototype</div>
        {items.map((it, i) => (
          <button
            key={it.id}
            className={`side-nav__item ${active === it.id ? 'is-active' : ''}`}
            onClick={() => scrollTo(it.id)}
          >
            <span className="side-nav__num">0{i+1}</span>
            <span>{it.label}</span>
          </button>
        ))}

        <div className="side-nav__foot">
          <div style={{ fontWeight: 600, color: 'var(--ink-2)', fontSize: 12, marginBottom: 4 }}>Confidential draft</div>
          <div>Pre-seed 2026 · Interactive product prototype.</div>
        </div>
      </aside>

      {/* Main */}
      <main className="main">
        <StoryHero />
        <PatientApp />
        <CareTeam />
        <PatientDetail />
        <Architecture />
        <MultiAccess />
        <Closer />
      </main>

    </div>
  );
}

/* ============================================
   Custom color tweak — swatch cards with labels
   ============================================ */

function TweakColor({ k, value, onChange, options }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
      {options.map(opt => {
        const active = value === opt.value;
        return (
          <button
            key={opt.value}
            onClick={() => onChange(k, opt.value)}
            style={{
              padding: 10,
              borderRadius: 10,
              border: `1.5px solid ${active ? opt.color : 'rgba(0,0,0,0.1)'}`,
              background: active ? `${opt.color}12` : 'white',
              cursor: 'pointer',
              textAlign: 'left',
              fontFamily: 'inherit',
              transition: 'all 120ms ease',
            }}
          >
            <div style={{
              width: '100%', height: 36, borderRadius: 6, background: opt.color, marginBottom: 8,
            }}></div>
            <div style={{ fontSize: 11, fontWeight: 600, color: '#0E1116', lineHeight: 1.2 }}>{opt.label}</div>
            <div style={{ fontSize: 10, color: '#666', fontFamily: 'monospace', marginTop: 2 }}>{opt.color}</div>
          </button>
        );
      })}
    </div>
  );
}

/* ============================================
   Closer / footer
   ============================================ */

function Closer() {
  return (
    <section className="section section--warm" style={{ padding: '80px 72px 100px' }} data-screen-label="Closer">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'end' }}>
        <div>
          <div className="section__eyebrow">
            <span className="section__eyebrow-dot"></span>
            <span>The thesis</span>
          </div>
          <h2 className="serif" style={{ fontSize: 60, lineHeight: 1.02, letterSpacing: '-0.02em', margin: 0, marginBottom: 24 }}>
            Care happens in moments.<br/>
            <em style={{ color: 'var(--accent-fg)' }}>Jessie maintains continuity between them.</em>
          </h2>
          <p style={{ fontSize: 17, color: 'var(--ink-3)', lineHeight: 1.55, maxWidth: '52ch', margin: 0 }}>
            One connected product ecosystem — patient app, continuity engine, care team priority layer, EHR integration. Built to pilot in the ED. Built to scale to every gap between encounters.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          <StatBlock value="4hr" label="Average U.S. ED wait" />
          <StatBlock value="$1M+" label="Lost per hospital annually to LWBS" />
          <StatBlock value="9/10" label="Clinicians confirm the gap" />
          <StatBlock value="25+" label="ED interviews across 5 Chicago health systems" />
        </div>
      </div>

      <div style={{
        marginTop: 100, paddingTop: 24, borderTop: '1px solid var(--line-1)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontSize: 11, color: 'var(--ink-4)', fontFamily: 'var(--mono)', letterSpacing: '0.06em', textTransform: 'uppercase',
      }}>
        <span>Atronics Labs, Inc. · Confidential draft</span>
        <span>Product design mockup · 2026</span>
      </div>
    </section>
  );
}

function StatBlock({ value, label }) {
  return (
    <div style={{ paddingTop: 20, borderTop: '1px solid var(--line-2)' }}>
      <div className="serif" style={{ fontSize: 56, lineHeight: 1, letterSpacing: '-0.02em', color: 'var(--ink-1)', marginBottom: 10 }}>{value}</div>
      <div style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.4, maxWidth: '24ch' }}>{label}</div>
    </div>
  );
}

// Mount
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);