// Top-level App — switches between Phone (iOS frame, 402×840) and
// Desktop (full-viewport, max-width 1240 inside sections) views.
// State lives in tweaks; copy/components are unchanged across views.

const TONES = ['Confident · Direct', 'Technical · Spec', 'Warmer · Conversational'];
const PALETTES = ['Ink + Orange', 'Navy + Aqua', 'Pure Black', 'Inverted Light'];
const HERO_LAYOUTS = ['Typographic', 'Split', 'Video Frame'];
const SERVICE_MODES = ['Icons · Grid', 'Plain · Grid', 'Icons · Stacked', 'Plain · Stacked'];
const VIEWS = ['Phone', 'Desktop'];

function PageBody({ tone, palette, heroLayout, serviceCards, scrollTo, view }) {
  const copy = window.OAV_COPY[tone] || window.OAV_COPY[TONES[0]];
  return (
    <div className="oav-page" data-palette={palette} data-view={view}>
      <Nav scrollTo={scrollTo} />
      <Hero copy={copy.hero} layout={heroLayout} scrollTo={scrollTo} />
      <Problem copy={copy.problem} />
      <Services copy={copy.services} mode={serviceCards} />
      <Gallery />
      <Process copy={copy.process} />
      <USP copy={copy.usp} />
      <Where copy={copy.where} />
      <Sectors copy={copy.sectors} />
      <Why copy={copy.why} />
      <FAQ copy={copy.faq} />
      <Enquiry copy={copy.enquiry} />
      <Footer />
      <StickyCTA />
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(window.OAV_TWEAKS);
  const scrollRootRef = React.useRef(null);

  // Toggle a body class so we can hide the dark stage background in desktop view.
  React.useEffect(() => {
    document.body.dataset.view = t.view;
  }, [t.view]);

  const scrollTo = (id) => {
    const root = scrollRootRef.current
      || document.querySelector('.oav-scroll-root')
      || document.scrollingElement
      || document.documentElement;
    const target = root.querySelector ? root.querySelector(`[id="${id}"]`) : document.getElementById(id);
    if (!target) return;
    if (root === document.scrollingElement || root === document.documentElement) {
      const rect = target.getBoundingClientRect();
      window.scrollTo({ top: window.scrollY + rect.top - 16, behavior: 'smooth' });
    } else {
      root.scrollTo({ top: target.offsetTop - 12, behavior: 'smooth' });
    }
  };

  const body = (
    <PageBody
      view={t.view}
      tone={t.tone}
      palette={t.palette}
      heroLayout={t.heroLayout}
      serviceCards={t.serviceCards}
      scrollTo={scrollTo}
    />
  );

  return (
    <>
      {t.view === 'Phone' ? (
        <div className="stage">
          <IOSDevice width={402} height={840} dark={true}>
            <div style={{ height: '100%' }}>
              <div
                ref={scrollRootRef}
                className="oav-scroll-root"
                style={{ height: '100%', overflowY: 'auto', WebkitOverflowScrolling: 'touch', paddingTop: 58, paddingBottom: 34 }}>
                {body}
              </div>
            </div>
          </IOSDevice>
          <div className="stage-meta">
            <div className="stage-meta-row">
              <span className="stage-meta-dot" />
              <span>oxfordshireav.co.uk</span>
            </div>
            <div className="stage-meta-row stage-meta-faint">
              <span>iPhone · 402 × 840 · scrollable</span>
            </div>
          </div>
        </div>
      ) : (
        <div className="desktop-stage">
          {body}
        </div>
      )}

      <TweaksPanel title="Oxfordshire AV · Tweaks">
        <TweakSection label="Preview">
          <TweakRadio
            label="View"
            value={t.view}
            options={VIEWS}
            onChange={(v) => setTweak('view', v)}
          />
        </TweakSection>

        <TweakSection label="Visual">
          <TweakRadio
            label="Hero"
            value={t.heroLayout}
            options={HERO_LAYOUTS}
            onChange={(v) => setTweak('heroLayout', v)}
          />
          <TweakSelect
            label="Palette"
            value={t.palette}
            options={PALETTES}
            onChange={(v) => setTweak('palette', v)}
          />
          <TweakSelect
            label="Service cards"
            value={t.serviceCards}
            options={SERVICE_MODES}
            onChange={(v) => setTweak('serviceCards', v)}
          />
        </TweakSection>

        <TweakSection label="Copy">
          <TweakSelect
            label="Tone of voice"
            value={t.tone}
            options={TONES}
            onChange={(v) => setTweak('tone', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

// Stage styles (the bit outside the phone bezel + desktop chrome).
const stageCSS = document.createElement('style');
stageCSS.textContent = `
  /* When in desktop view, drop the centered #root padding so the page bleeds full-width. */
  body[data-view="Desktop"] #root {
    display: block;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background: #0b0f14;
  }

  .stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .stage-meta {
    color: rgba(255,255,255,0.6);
    font-family: var(--m3-font-sans);
    font-size: 12px;
    text-align: center;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .stage-meta-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
  }
  .stage-meta-faint { color: rgba(255,255,255,0.35); font-size: 11px; letter-spacing: 0.02em; }
  .stage-meta-dot {
    width: 6px; height: 6px; border-radius: 999px;
    background: var(--m3-orange);
    box-shadow: 0 0 0 3px rgba(247,173,92,0.25);
  }
  .oav-scroll-root::-webkit-scrollbar { width: 0; background: transparent; }

  /* ── Desktop stage: browser-chrome bar + full-bleed page ── */
  .desktop-stage {
    width: 100%;
    min-height: 100vh;
    background: var(--m3-ink);
  }
  .desktop-chrome {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: #14191f;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-family: var(--m3-font-sans);
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .desktop-dot {
    width: 12px; height: 12px; border-radius: 999px;
    display: inline-block;
  }
  .desktop-dot.r { background: #ff5f57; }
  .desktop-dot.y { background: #febc2e; }
  .desktop-dot.g { background: #28c840; }
  .desktop-url {
    margin-left: 12px;
    padding: 4px 14px;
    background: rgba(255,255,255,0.05);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
    font-size: 12px;
  }
  /* Desktop nav must clear browser chrome (which is also sticky). */
  body[data-view="Desktop"] .oav-page[data-view="Desktop"] .nav { top: 44px; }
`;
document.head.appendChild(stageCSS);

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