// PHP Burleson landing page (v2) — kit-aligned. Assembles all sections + Tweaks.
const HEADLINE_LABELS = {
  burleson: 'Intensive care, right here in Burleson.',
  whole:    'Closer to whole, closer to home.',
  address:  'Healing has an address in Burleson.',
  belongs:  'Care belongs where you do.',
};
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "Form first",
  "heroHeadline": "Intensive care, right here in Burleson.",
  "heroPhoto": "mural",
  "accent": "#e06e5c"
}/*EDITMODE-END*/;

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

  const headlineKey = Object.keys(HEADLINE_LABELS).find(k => HEADLINE_LABELS[k] === t.heroHeadline) || 'burleson';
  const tForHero = {
    heroPhoto: t.heroPhoto,
    heroHeadline: headlineKey,
    heroLayout: t.heroLayout === 'Call first' ? 'call' : 'form',
  };

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    root.style.setProperty('--accent-strong', t.accent === '#1a4035' ? '#12302a' : '#c8543f');
  }, [t.accent]);

  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });

  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    if (!('IntersectionObserver' in window)) { els.forEach(e => e.classList.add('in')); return; }
    const io = new IntersectionObserver(ents => {
      ents.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach(e => io.observe(e));
    return () => io.disconnect();
  });

  return (
    <React.Fragment>
      <LpHeader />
      <main>
        <Hero t={tForHero} />
        <div className="reveal"><StepInside /></div>
        <div className="reveal"><WhatIsPHP /></div>
        <div className="reveal"><WhoFor /></div>
        <div className="reveal"><Features /></div>
        <div className="reveal"><Process /></div>
        <div className="reveal"><Testimonials /></div>
        <div className="reveal"><StatsBand /></div>
        <div className="reveal"><Location /></div>
        <div className="reveal"><FAQ /></div>
        <div className="reveal"><FinalCTA /></div>
      </main>
      <LpFooter />
      <CallBar />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio label="Above-the-fold goal" value={t.heroLayout}
          options={['Form first', 'Call first']}
          onChange={v => setTweak('heroLayout', v)} />
        <TweakSelect label="Headline" value={t.heroHeadline}
          options={Object.values(HEADLINE_LABELS)}
          onChange={v => setTweak('heroHeadline', v)} />
        <TweakSelect label="Feature photo (call-first)" value={t.heroPhoto}
          options={['mural', 'lounge', 'affirmation', 'counseling']}
          onChange={v => setTweak('heroPhoto', v)} />
        <TweakSection label="Brand" />
        <TweakColor label="Accent / CTA" value={t.accent}
          options={['#e06e5c', '#1a4035']}
          onChange={v => setTweak('accent', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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