/* ====================== OKTRA — app shell, nav, tweaks ====================== */

const SECTIONS = [
  { id: 'top', n: '01', label: 'Intro' },
  { id: 'services', n: '02', label: 'Services' },
  { id: 'process', n: '03', label: 'Process' },
  { id: 'approach', n: '04', label: 'Approach' },
  { id: 'work', n: '05', label: 'Work' },
  { id: 'faq', n: '06', label: 'FAQ' },
  { id: 'contact', n: '07', label: 'Contact' },
];

function Nav({ scrolled }) {
  return (
    <nav className={'nav' + (scrolled ? ' scrolled' : '')}>
      <div className="wrap">
        <a className="brand" onClick={() => scrollToId('top')} style={{ cursor: 'pointer' }}>
          <span className="dot"></span>oktra
        </a>
        <div className="nav-links">
          <a onClick={() => scrollToId('services')}>Services</a>
          <a onClick={() => scrollToId('process')}>How we work</a>
          <a onClick={() => scrollToId('work')}>Work</a>
          <a onClick={() => scrollToId('faq')}>FAQ</a>
        </div>
        <div className="nav-right">
          <button className="btn btn-primary" style={{ '--bh': '42px' }} onClick={() => scrollToId('contact')}>
            <span className="label">Book a call</span>
          </button>
        </div>
      </div>
    </nav>
  );
}

function SideIndex({ active }) {
  return (
    <div className="side-index">
      {SECTIONS.map((s) => (
        <div className={'si' + (active === s.id ? ' active' : '')} key={s.id} onClick={() => scrollToId(s.id)}>
          <span className="bar"></span>
          <span>{s.n}</span>
        </div>
      ))}
    </div>
  );
}

const FONT_THEMES = {
  'Archivo':   { head: "'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif",        body: "'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif" },
  'Hanken':    { head: "'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif", body: "'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif" },
  'Editorial': { head: "'Instrument Serif', Georgia, 'Times New Roman', serif",             body: "'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif" },
  'Swiss':     { head: "'Helvetica Neue', Helvetica, Arial, sans-serif",                   body: "'Helvetica Neue', Helvetica, Arial, sans-serif" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1f9d63",
  "motion": 1,
  "fontTheme": "Archivo"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [scrolled, setScrolled] = useState(false);
  const [active, setActive] = useState('top');
  useReveal();

  /* apply tweaks to CSS variables */
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    // derive a lighter companion for eyebrows / small accent text
    root.style.setProperty('--accent-2', `color-mix(in oklab, ${t.accent} 72%, white)`);
    root.style.setProperty('--motion', String(t.motion));
    const theme = FONT_THEMES[t.fontTheme] || FONT_THEMES['Archivo'];
    root.style.setProperty('--font-head', theme.head);
    root.style.setProperty('--font-body', theme.body);
    root.setAttribute('data-font', t.fontTheme);
  }, [t]);

  /* nav background + scroll progress */
  useEffect(() => {
    const bar = document.getElementById('scrollbar');
    const onScroll = () => {
      setScrolled(window.scrollY > 40);
      const h = document.documentElement.scrollHeight - window.innerHeight;
      const p = h > 0 ? (window.scrollY / h) * 100 : 0;
      if (bar) bar.style.width = p + '%';
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  /* active section tracking */
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) setActive(e.target.id);
      });
    }, { rootMargin: '-45% 0px -45% 0px' });
    SECTIONS.forEach((s) => { const el = document.getElementById(s.id); if (el) io.observe(el); });
    return () => io.disconnect();
  }, []);

  return (
    <React.Fragment>
      <div className="scroll-progress" id="scrollbar"></div>
      <Nav scrolled={scrolled} />
      <SideIndex active={active} />
      <main>
        <Hero />
        <Ticker />
        <Services />
        <Process />
        <RightWay />
        <Cases />
        <FAQ />
        <Contact />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Brand accent" />
        <TweakColor label="Accent color" value={t.accent}
          options={['#1f9d63', '#4d6bff', '#5b8def', '#c9683a', '#8b5cf6', '#e0e2e8']}
          onChange={(v) => setTweak('accent', v)} />
        <TweakSection label="Feel" />
        <TweakSlider label="Motion intensity" value={t.motion} min={0} max={2} step={0.1}
          onChange={(v) => setTweak('motion', v)} />
        <TweakSection label="Typeface" />
        <TweakSelect label="Font theme" value={t.fontTheme}
          options={['Archivo', 'Hanken', 'Editorial', 'Swiss']}
          onChange={(v) => setTweak('fontTheme', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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