/* App shell — header, footer, router, tweaks */

const { useState: useS, useEffect: useE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "forest",
  "voice": "warm",
  "density": "default",
  "crisisBanner": false,
  "founderProminent": true,
  "headlineFont": "Fraunces"
}/*EDITMODE-END*/;

const PALETTES = {
  forest:    { forest: "#2A3D34", forestDeep: "#1E2D26", terracotta: "#C8674A", terracottaDeep: "#A64E36", cream: "#F4EFE6", creamWarm: "#EFE8DA", line: "#D9D2C2" },
  sage:      { forest: "#5A6B58", forestDeep: "#3F4C3E", terracotta: "#D49B95", terracottaDeep: "#B57A74", cream: "#F8F2EA", creamWarm: "#F1EADC", line: "#DCD4C4" },
  olive:     { forest: "#5B5A2F", forestDeep: "#3F3E1F", terracotta: "#C99B4D", terracottaDeep: "#A07A33", cream: "#F2EEE2", creamWarm: "#EDE7D5", line: "#D6CDB6" },
};

const NAV = [
  { id: "home", label: "Home" },
  { id: "iic", label: "IIC Services" },
  { id: "outpatient", label: "Outpatient" },
  { id: "team", label: "Our Team" },
  { id: "about", label: "About" },
  { id: "join", label: "Join Us" },
];

function Header({ page, navigate, crisisBanner }) {
  const [open, setOpen] = useS(false);

  // Close sheet whenever the page changes
  useE(() => { setOpen(false); }, [page]);

  const go = (id) => { setOpen(false); navigate(id); };

  return (
    <React.Fragment>
      {crisisBanner && (
        <div className="crisis-banner">
          <div className="container">
            <span className="crisis-dot"></span>
            <span>If you or someone you love is in crisis, call or text <strong>988</strong> (Suicide & Crisis Lifeline) — available 24/7.</span>
          </div>
        </div>
      )}
      <header className="site-header">
        <div className="container">
          <div className="logo" style={{ cursor: "pointer" }} onClick={() => go('home')}>
            <span className="logo-mark">EDNI</span>
            <span className="logo-tag">Counseling Services</span>
          </div>
          <nav className="primary">
            {NAV.map(n => (
              <a key={n.id} className={page === n.id ? "active" : ""} onClick={() => go(n.id)}>{n.label}</a>
            ))}
            <a className="nav-cta" onClick={() => go('contact')}>Consultation</a>
          </nav>
          <button
            className={`nav-toggle ${open ? 'open' : ''}`}
            aria-label={open ? 'Close menu' : 'Open menu'}
            aria-expanded={open}
            onClick={() => setOpen(o => !o)}
          >
            <span className="nav-toggle-bar"></span>
            <span className="nav-toggle-bar"></span>
            <span className="nav-toggle-bar"></span>
          </button>
          <div className={`nav-mobile-sheet ${open ? 'open' : ''}`}>
            {NAV.map(n => (
              <a key={n.id} className={page === n.id ? "active" : ""} onClick={() => go(n.id)}>{n.label}</a>
            ))}
            <a className="nav-cta" onClick={() => go('contact')}>Consultation</a>
          </div>
        </div>
      </header>
    </React.Fragment>
  );
}

function Footer({ navigate }) {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div className="brand-block">
            <span className="logo-mark">EDNI</span>
            <p>Family-built mental health care since 2016. Serving Bergen, Passaic, Hudson, Essex, Union, Monmouth, Ocean, Morris and Sussex counties.</p>
          </div>
          <div>
            <h4>Services</h4>
            <ul>
              <li><a onClick={() => navigate('iic')}>IIC Services</a></li>
              <li><a onClick={() => navigate('iic-request')}>Request IIC</a></li>
              <li><a onClick={() => navigate('outpatient')}>Outpatient</a></li>
            </ul>
          </div>
          <div>
            <h4>About</h4>
            <ul>
              <li><a onClick={() => navigate('team')}>Our Team</a></li>
              <li><a onClick={() => navigate('about')}>About</a></li>
              <li><a onClick={() => navigate('join')}>Join Us</a></li>
              <li><a onClick={() => navigate('contact')}>Contact</a></li>
            </ul>
          </div>
          <div>
            <h4>Contact</h4>
            <ul>
              <li><a>IIC: 201-575-9458</a></li>
              <li><a>Outpatient: 201-546-5634</a></li>
              <li><a>Fax: 201-880-5058</a></li>
              <li><a>110 Kinderkamack, Suite 2D</a></li>
              <li><a>Emerson, NJ 07630</a></li>
              <li style={{ marginTop: 8 }}>
                <a
                  href="https://www.psychologytoday.com/us/therapists/edni-counseling-outpatient-services-emerson-nj/1465938"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Psychology Today profile →
                </a>
              </li>
              <li>
                <a
                  href="https://www.instagram.com/ednicounseling/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Instagram @ednicounseling →
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2016–2026 EDNI Counseling Services, LLC</span>
          <span>Privacy · Terms · Accessibility</span>
        </div>
      </div>
    </footer>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = useS('home');

  // Apply palette
  useE(() => {
    const p = PALETTES[tweaks.palette] || PALETTES.forest;
    const r = document.documentElement;
    r.style.setProperty('--forest', p.forest);
    r.style.setProperty('--forest-deep', p.forestDeep);
    r.style.setProperty('--terracotta', p.terracotta);
    r.style.setProperty('--terracotta-deep', p.terracottaDeep);
    r.style.setProperty('--cream', p.cream);
    r.style.setProperty('--cream-warm', p.creamWarm);
    r.style.setProperty('--line', p.line);
    document.body.style.background = p.cream;
  }, [tweaks.palette]);

  // Apply font
  useE(() => {
    const link = document.getElementById('headline-font');
    if (!link && tweaks.headlineFont !== 'Fraunces') {
      const l = document.createElement('link');
      l.id = 'headline-font';
      l.rel = 'stylesheet';
      l.href = `https://fonts.googleapis.com/css2?family=${tweaks.headlineFont.replace(/ /g, '+')}:wght@300;400;500;600&display=swap`;
      document.head.appendChild(l);
    }
    document.querySelectorAll('h1,h2,h3,h4,h5').forEach(el => {
      el.style.fontFamily = `'${tweaks.headlineFont}', Georgia, serif`;
    });
  }, [tweaks.headlineFont, page]);

  const navigate = (id) => {
    setPage(id);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  let PageEl;
  switch(page) {
    case 'iic': PageEl = <IICPage navigate={navigate} />; break;
    case 'iic-request': PageEl = <IICRequestPage navigate={navigate} />; break;
    case 'outpatient': PageEl = <OutpatientPage navigate={navigate} />; break;
    case 'team': PageEl = <TeamPage navigate={navigate} />; break;
    case 'about': PageEl = <AboutPage navigate={navigate} />; break;
    case 'join': PageEl = <JoinPage navigate={navigate} />; break;
    case 'contact': PageEl = <ContactPage navigate={navigate} />; break;
    default: PageEl = <HomePage navigate={navigate} voice={tweaks.voice} />;
  }

  return (
    <React.Fragment>
      <Header page={page} navigate={navigate} crisisBanner={tweaks.crisisBanner} />
      <main key={page}>{PageEl}</main>
      <Footer navigate={navigate} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Palette">
          <TweakRadio label="Color system" value={tweaks.palette} onChange={v => setTweak('palette', v)}
            options={[
              { value: 'forest', label: 'Forest' },
              { value: 'sage', label: 'Sage' },
              { value: 'olive', label: 'Olive' },
            ]} />
        </TweakSection>

        <TweakSection title="Typography">
          <TweakSelect label="Headline font" value={tweaks.headlineFont} onChange={v => setTweak('headlineFont', v)}
            options={[
              { value: 'Fraunces', label: 'Fraunces (default)' },
              { value: 'Cormorant Garamond', label: 'Cormorant Garamond' },
              { value: 'Lora', label: 'Lora' },
              { value: 'Source Serif Pro', label: 'Source Serif Pro' },
              { value: 'Playfair Display', label: 'Playfair Display' },
            ]} />
        </TweakSection>

        <TweakSection title="Voice">
          <TweakRadio label="Hero headline tone" value={tweaks.voice} onChange={v => setTweak('voice', v)}
            options={[
              { value: 'warm', label: 'Warm' },
              { value: 'clinical', label: 'Clinical' },
              { value: 'poetic', label: 'Poetic' },
            ]} />
        </TweakSection>

        <TweakSection title="Layout">
          <TweakToggle label="Crisis banner (988)" value={tweaks.crisisBanner} onChange={v => setTweak('crisisBanner', v)} />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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