/* global React */
const { useState, useEffect, useRef } = React;

// ---------- TWEAK DEFAULTS (shared, mirrored across pages) ----------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2A3FA0",
  "dark": false,
  "showKeenDigital": true
}/*EDITMODE-END*/;

function useTheme(tweaks) {
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--brand', tweaks.accent);
    root.style.setProperty('--brand-soft', tweaks.accent + '22');
    root.style.setProperty('--brand-line', tweaks.accent + '55');
    root.dataset.theme = tweaks.dark ? 'dark' : 'light';
  }, [tweaks.accent, tweaks.dark]);
}

function useInView(threshold = 0.15) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setInView(true); obs.disconnect(); }
    }, { threshold });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, inView];
}

function TopBar({ active }) {
  const links = [
    ['Platform', 'Platform.html'],
    ['Ordering', 'Ordering.html'],
    ['Intelligence', 'Intelligence.html'],
    ['Operations', 'Operations.html'],
    ['Launcher', 'Launcher.html'],
    ['White-label', 'WhiteLabel.html'],
    ['Why us', 'WhyUs.html'],
  ];
  return (
    <header className="topbar">
      <div className="topbar__inner">
        <a className="brand" href="index.html">
          <span className="brand__mark" aria-hidden>
            <img src="favicon-source.png" alt="" />
          </span>
          <span className="brand__name">keen<span className="brand__name-accent">FRANCHISE</span></span>
        </a>
        <nav className="topnav">
          {links.map(([l, h]) => (
            <a key={h} href={h} className={active === l ? 'is-active' : ''}>{l}</a>
          ))}
        </nav>
        <div className="topbar__cta">
          <a className="btn btn--ghost" href="Contact.html">Sign in</a>
          <a className="btn btn--primary" href="Contact.html">Book a demo <span aria-hidden>→</span></a>
        </div>
      </div>
    </header>
  );
}

function PageHeader({ eyebrow, title, lede, meta, actions }) {
  return (
    <section className="pagehead">
      <div className="pagehead__meta">
        <span className="eyebrow">
          <span className="eyebrow__dot" />
          <span>{eyebrow}</span>
        </span>
        {meta && <span className="dateline">{meta}</span>}
      </div>
      <h1 className="pagehead__title">{title}</h1>
      {lede && <p className="pagehead__lede">{lede}</p>}
      {actions && <div className="pagehead__actions">{actions}</div>}
    </section>
  );
}

function FeatureBlock({ eyebrow, title, lede, points, art, reverse }) {
  const [ref, inView] = useInView(0.2);
  return (
    <section ref={ref} className={"fblock " + (reverse ? 'fblock--rev ' : '') + (inView ? 'in' : '')}>
      <div className="fblock__text">
        <span className="eyebrow"><span className="eyebrow__dot" />{eyebrow}</span>
        <h2 className="section__title">{title}</h2>
        {lede && <p className="section__lede">{lede}</p>}
        {points && (
          <ul className="fblock__list">
            {points.map(([k, v]) => (
              <li key={k}><b>{k}</b><span>{v}</span></li>
            ))}
          </ul>
        )}
      </div>
      <div className="fblock__art">{art}</div>
    </section>
  );
}

function Benefit({ kw, children }) {
  return (
    <div className="benefit">
      <div className="benefit__kw">{kw}</div>
      <p>{children}</p>
    </div>
  );
}

function CTABand({ title, lede, primary, secondary }) {
  return (
    <section className="ctaband">
      <div className="ctaband__inner">
        <h2 className="ctaband__title">{title}</h2>
        {lede && <p className="ctaband__lede">{lede}</p>}
        <div className="ctaband__actions">
          <a className="btn btn--primary btn--lg" href={primary?.href || 'Contact.html'}>{primary?.label || 'Book a demo'} <span aria-hidden>→</span></a>
          {secondary && <a className="btn btn--ghost btn--lg" href={secondary.href}>{secondary.label}</a>}
        </div>
      </div>
    </section>
  );
}

function Footer({ tweaks }) {
  return (
    <footer className="footer">
      <div className="footer__inner">
        <div className="footer__brand">
          <span className="brand">
            <span className="brand__mark"><img src="favicon-source.png" alt="" /></span>
            <span className="brand__name">keen<span className="brand__name-accent">FRANCHISE</span></span>
          </span>
          <p className="footer__tag">The franchise operations platform.</p>
        </div>
        <div className="footer__cols">
          <div><h5>Platform</h5>
            <a href="Platform.html">Overview</a>
            <a href="Ordering.html">Ordering</a>
            <a href="Operations.html">Operations</a>
            <a href="Intelligence.html">Intelligence</a>
            <a href="Launcher.html">Launcher</a>
          </div>
          <div><h5>Company</h5>
            <a href="WhyUs.html">Why us</a>
            <a href="WhiteLabel.html">White-label</a>
            <a href="Contact.html">Contact</a>
          </div>
          <div><h5>Resources</h5>
            <a href="#">Docs</a>
            <a href="#">Security</a>
            <a href="#">Status</a>
            <a href="#">Changelog</a>
          </div>
          <div><h5>Contact</h5>
            <a href="Contact.html">Sales</a>
            <a href="Contact.html">Support</a>
            <a href="Contact.html">Partnerships</a>
          </div>
        </div>
      </div>
      <div className="footer__bar">
        <span className="footer__legal">© 2026 KeenFranchise · All rights reserved</span>
        {(tweaks?.showKeenDigital ?? true) && (
          <span className="footer__keen">
            <span className="footer__keen-dot" />
            A <a href="#">KeenDigital</a> service
          </span>
        )}
      </div>
    </footer>
  );
}

function SiteTweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme">
        <TweakToggle label="Dark mode" value={tweaks.dark} onChange={v => setTweak('dark', v)} />
        <TweakColor label="Accent color" value={tweaks.accent} onChange={v => setTweak('accent', v)} />
        <div className="tw-swatches">
          {[
            ['#2A3FA0', 'Indigo ink'],
            ['#1F4D3A', 'Deep forest'],
            ['#0F3D6E', 'Deep ocean'],
            ['#6E2E3E', 'Bordeaux'],
            ['#7A5A2E', 'Bronze'],
            ['#1A1A1A', 'Charcoal'],
          ].map(([c, name]) => (
            <button
              key={c}
              type="button"
              className="tw-swatch"
              style={{ background: c, outline: tweaks.accent.toLowerCase() === c.toLowerCase() ? '2px solid var(--text)' : 'none', outlineOffset: '2px' }}
              onClick={() => setTweak('accent', c)}
              aria-label={`Use ${name}`}
              title={name}
            />
          ))}
        </div>
      </TweakSection>
      <TweakSection label="KeenDigital lockup">
        <TweakToggle label="Show in footer" value={tweaks.showKeenDigital} onChange={v => setTweak('showKeenDigital', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

// Expose globals so per-page scripts can use them
Object.assign(window, {
  KF: { TWEAK_DEFAULTS, useTheme, useInView, TopBar, PageHeader, FeatureBlock, Benefit, CTABand, Footer, SiteTweaks },
});