// Nav + Hero + Trust strip
const { useState, useEffect } = React;

function Logo() {
  return (
    <a href="#top" className="logo">
      <img src="assets/logo-mark.png" alt="" className="logo-mark-img" />
      <span><b>we</b><span>care</span></span>
    </a>
  );
}
window.Logo = Logo;

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [active, setActive] = useState('home');
  useEffect(() => {
    const on = () => {
      setScrolled(window.scrollY > 20);
      const sections = ['services','how','caregivers','stories','pricing','faq'];
      let cur = 'home';
      for (const id of sections) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top < 160) cur = id;
      }
      setActive(cur);
    };
    window.addEventListener('scroll', on);
    on();
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <nav className={'nav' + (scrolled ? ' scrolled' : '')}>
      <div className="container nav-inner">
        <Logo />
        <div className="nav-links">
          <a href="#services" className={active==='services'?'active':''}>Services</a>
          <a href="#how" className={active==='how'?'active':''}>How it works</a>
          <a href="#caregivers" className={active==='caregivers'?'active':''}>Caregivers</a>
          <a href="#stories" className={active==='stories'?'active':''}>Stories</a>
          <a href="#pricing" className={active==='pricing'?'active':''}>Pricing</a>
          <a href="#faq" className={active==='faq'?'active':''}>FAQ</a>
        </div>
        <div className="nav-cta">
          <div className="phone-pill"><span className="dot" />647‑492‑4630</div>
          <a href="tel:6474924630" className="btn btn-primary">Call us now <Ic.Arrow /></a>
        </div>
      </div>
    </nav>
  );
}
window.Nav = Nav;

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="container hero-grid">
        <div>
          <span className="eyebrow">Companionship &amp; Homecare</span>
          <h1>
            Company when you want it.
            <span className="italic">Help when you need it.</span>
          </h1>
          <p className="hero-lede">
            A trained caregiver who's great company <em>and</em> happy to tidy up, cook a proper meal, or lend a hand with the little things that make the day easier.
          </p>
          <div className="hero-actions">
            <a href="tel:6474924630" className="btn btn-primary">Call us now <Ic.Arrow /></a>
            <a href="#services" className="btn btn-ghost">See what we do</a>
          </div>
          <div className="pill-row">
            <span className="tag">Conversation</span>
            <span className="tag">Housekeeping</span>
            <span className="tag">Meals</span>
            <span className="tag">Errands</span>
            <span className="tag">Outings</span>
          </div>
        </div>
        <div className="hero-visual">
          <div className="stat-card tl">
            <div className="num">12<sup>yrs</sup></div>
            <div className="lbl"><strong>Serving families</strong><br/>across the Greater Toronto Area</div>
          </div>
          <div className="portrait">
            <div className="portrait-caption">
              "She brings the sunshine<br/>with her, honestly."
            </div>
          </div>
          <div className="stat-card br">
            <div className="num">4.9<sup>/5</sup></div>
            <div className="lbl"><strong>Family rating</strong><br/>over 840 verified reviews from clients &amp; caregivers</div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;

function Trust() {
  return (
    <section className="trust">
      <div className="container trust-inner" style={{justifyContent:'center'}}>
        <span className="trust-label">Trusted caregivers · Reliable visits · The same familiar face, every time</span>
      </div>
    </section>
  );
}
window.Trust = Trust;