// Apex Overhead Doors — Homepage prototype
// Designed to spec: industrial premium, steel blue + safety orange accent.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#004890",
  "headline": "Garage Doors Done Right. The First Time.",
  "subhead": "Honest service, quality workmanship, and dependable results — for homes and businesses across Northern Montana. Whether it's a broken spring or a new commercial install, we treat every job like it's our own home or business.",
  "heroVariant": "exterior",
  "showTodos": false,
  "showFloatingCall": true
}/*EDITMODE-END*/;

const App = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Sync TODO flag visibility
  React.useEffect(() => {
    document.body.dataset.todos = t.showTodos ? 'on' : 'off';
  }, [t.showTodos]);

  // Scroll reveal (polling-based; handles dynamically swapped DOM too)
  useReveal();

  const accent = t.accent;

  return (
    <>
      <TopBar accent={accent} />
      <Nav accent={accent} />
      <Hero
        accent={accent}
        headline={t.headline}
        subhead={t.subhead}
        heroVariant={t.heroVariant}
      />
      <Services accent={accent} />
      <WhyApex accent={accent} />
      <Process accent={accent} />
      <ServiceArea accent={accent} />
      <FAQ accent={accent} />
      <FinalCTA accent={accent} />
      <Footer accent={accent} />

      {/* Floating call CTA (mobile-style; visible at all viewports here for demo) */}
      {t.showFloatingCall && (
        <a href={PHONE_TEL} className="float-call pulse" aria-label={`Call ${PHONE_DISPLAY}`}>
          <Icon name="phone" size={22} />
        </a>
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand">
          <TweakColor
            label="Accent color"
            value={t.accent}
            onChange={v => setTweak('accent', v)}
            options={['#004890', '#0E2B45', '#1E7A52', '#FF6B1A']}
          />
        </TweakSection>
        <TweakSection label="Hero">
          <TweakText
            label="Headline"
            value={t.headline}
            onChange={v => setTweak('headline', v)}
          />
          <TweakRadio
            label="Hero image variant"
            value={t.heroVariant}
            onChange={v => setTweak('heroVariant', v)}
            options={[
              { value: 'exterior', label: 'Exterior' },
              { value: 'tech', label: 'Technician' },
            ]}
          />
        </TweakSection>
        <TweakSection label="QA">
          <TweakToggle
            label="Show TODO flags"
            value={t.showTodos}
            onChange={v => setTweak('showTodos', v)}
          />
          <TweakToggle
            label="Floating call button"
            value={t.showFloatingCall}
            onChange={v => setTweak('showFloatingCall', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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