// app.jsx — root composition

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "navy-gold",
  "displayFont": "Cinzel",
  "cursorAccent": true,
  "heroVideos": true
}/*EDITMODE-END*/;

const PALETTES = {
  'navy-gold': {
    navy: '#0B1E3F', navyDeep: '#061229', navySoft: '#16305A',
    gold: '#C9A55B', goldLight: '#E3C788', goldDeep: '#9C7E3F',
    cream: '#F5EFE4', creamDeep: '#ECE3D2', creamSoft: '#FAF6EE',
  },
  'charcoal-champagne': {
    navy: '#1F1F22', navyDeep: '#0F0F11', navySoft: '#2E2E33',
    gold: '#C9B380', goldLight: '#E2D2A4', goldDeep: '#9F8A56',
    cream: '#F2EEE6', creamDeep: '#E6E0D1', creamSoft: '#F8F4ED',
  },
  'forest-brass': {
    navy: '#0F2A22', navyDeep: '#071810', navySoft: '#173A30',
    gold: '#B69558', goldLight: '#D9BD83', goldDeep: '#8E7240',
    cream: '#F1ECDE', creamDeep: '#E2DAC6', creamSoft: '#F7F2E7',
  },
  'aubergine-rose': {
    navy: '#2A1B33', navyDeep: '#170A1D', navySoft: '#3E2A4A',
    gold: '#C99B8C', goldLight: '#E2BFB3', goldDeep: '#9D6F60',
    cream: '#F4EBE5', creamDeep: '#E8D8CE', creamSoft: '#FAF3EE',
  },
};

const FONT_OPTIONS = {
  display: {
    'Cinzel':    "'Cinzel', serif",
    'Cormorant': "'Cormorant Garamond', serif",
  },
  serif: {
    'Cormorant Garamond': "'Cormorant Garamond', serif",
  },
};

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

  // Apply tweaks via :root custom properties
  useEffect(() => {
    const pal = PALETTES[t.palette] || PALETTES['navy-gold'];
    const root = document.documentElement;
    root.style.setProperty('--navy', pal.navy);
    root.style.setProperty('--navy-deep', pal.navyDeep);
    root.style.setProperty('--navy-soft', pal.navySoft);
    root.style.setProperty('--gold', pal.gold);
    root.style.setProperty('--gold-light', pal.goldLight);
    root.style.setProperty('--gold-deep', pal.goldDeep);
    root.style.setProperty('--gold-faint', pal.gold + '2D');
    root.style.setProperty('--cream', pal.cream);
    root.style.setProperty('--cream-deep', pal.creamDeep);
    root.style.setProperty('--cream-soft', pal.creamSoft);

    root.style.setProperty('--f-display', FONT_OPTIONS.display[t.displayFont] || FONT_OPTIONS.display['Cinzel']);
  }, [t.palette, t.displayFont]);

  // Nav background mode based on scroll position
  const [navMode, setNavMode] = useState('dark');
  useEffect(() => {
    const compute = () => {
      const y = window.scrollY;
      const vh = window.innerHeight;
      // Hero: 320vh dark video; Philosophy: 260vh dark navy; Heritage: cream;
      // Doctors: cream; Stats: dark; Services: cream; Experience: dark;
      // Trust: cream; Visit: dark; Footer: dark.
      const ranges = [
        [0,           3.2 * vh,  'dark'],   // hero (video)
        [3.2 * vh,    5.8 * vh,  'dark'],   // philosophy
        [5.8 * vh,    7.4 * vh,  'light'],  // heritage
        [7.4 * vh,    9.4 * vh,  'light'],  // doctors
        [9.4 * vh,   10.6 * vh,  'dark'],   // stats
        [10.6 * vh, 14.2 * vh,   'light'],  // services
        [14.2 * vh, 15.8 * vh,   'dark'],   // experience
        [15.8 * vh, 17.6 * vh,   'light'],  // trust
      ];
      let mode = 'dark';
      for (const [a, b, m] of ranges) if (y >= a && y < b) mode = m;
      if (y >= 17.6 * vh) mode = 'dark';
      setNavMode(mode);
    };
    compute();
    window.addEventListener('scroll', compute, { passive: true });
    window.addEventListener('resize', compute);
    return () => { window.removeEventListener('scroll', compute); window.removeEventListener('resize', compute); };
  }, []);

  return (
    <>
      <TopNav mode={navMode} />
      {t.cursorAccent && <CursorDot enabled={true} />}

      <main>
        <HeroScene />
        <PhilosophyScene />
        <HeritageScene />
        <DoctorsScene />
        <StatsScene />
        <ServicesScene />
        <ExperienceScene />
        <TrustScene />
        <VisitScene />
      </main>

      <Footer />

      {/* Floating WhatsApp button */}
      <a className="fab-whatsapp"
         href="https://wa.me/917004610860?text=Hi%2C%20I%27d%20like%20to%20book%20an%20appointment%20at%20Dental%20Avenue."
         target="_blank" rel="noopener"
         aria-label="Chat with Dental Avenue on WhatsApp">
        <svg width="30" height="30" viewBox="0 0 32 32" fill="currentColor">
          <path d="M16 3C9.4 3 4 8.4 4 15c0 2.3.6 4.5 1.8 6.4L4 29l7.8-1.8C13.5 28.4 14.7 29 16 29c6.6 0 12-5.4 12-12S22.6 3 16 3zm0 22c-1.2 0-2.3-.3-3.3-.8l-.4-.2-4.4 1 .9-4.3-.3-.4C7.5 18.8 7 16.9 7 15c0-5 4-9 9-9s9 4 9 9-4 10-9 10zm5.4-6.6c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.8.9-1 1.1-.2.2-.3.2-.6 0-.3-.1-1.2-.4-2.4-1.4-.9-.8-1.5-1.7-1.7-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 .9-1 2.3 0 1.4 1 2.7 1.1 2.9.1.2 2 3 4.8 4.3 1.7.7 2.4.8 3.2.7.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.2-.2-.5-.3z" />
        </svg>
        <span className="label">Chat on WhatsApp</span>
      </a>

      {/* Tweaks */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <TweakRadio
          label="Theme"
          value={t.palette}
          options={['navy-gold', 'charcoal-champagne', 'forest-brass', 'aubergine-rose']}
          onChange={v => setTweak('palette', v)}
        />
        <TweakSection label="Atmosphere" />
        <TweakToggle
          label="Gold cursor accent"
          value={t.cursorAccent}
          onChange={v => setTweak('cursorAccent', v)}
        />
        <TweakToggle
          label="Hero videos"
          value={t.heroVideos}
          onChange={v => setTweak('heroVideos', v)}
        />
      </TweaksPanel>
    </>
  );
}

function TopNav({ mode }) {
  return (
    <nav className={'nav ' + mode}>
      <a href="#" className="brand" style={{ textDecoration: 'none' }}>
        <img src="assets/dental-avenue-mark.png" alt="" style={{ width: 32, height: 'auto' }} />
        <span>DENTAL AVENUE</span>
      </a>
      <div className="nav-links">
        <a href="#doctors">Doctors</a>
        <a href="#services">Care</a>
        <a href="#visit">Visit</a>
        <a href="tel:+917004610860" style={{ color: 'var(--gold)' }}>+91 7004 610 860</a>
      </div>
    </nav>
  );
}

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