/* heroes.jsx — top nav + three hero directions */
const { I, Stars, Logo, Ph, PHONE } = window;

/* ----------------------------- NAV ----------------------------- */
function Nav({ onQuote, heroDark }) {
  const [solid, setSolid] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const h = () => setSolid(window.scrollY > 64);
    h();window.addEventListener("scroll", h, { passive: true });
    return () => window.removeEventListener("scroll", h);
  }, []);
  /* header theme: solid state is always light; at the top it mirrors the hero behind it */
  const theme = solid ? "light" : heroDark ? "dark" : "light";
  const links = [["Services", "#services"], ["How it works", "#how"], ["Reviews", "#reviews"], ["Areas", "#areas"]];
  return (
    <header className={`nav ${solid ? "nav--solid" : ""}`} data-theme={theme}>
      <div className="wrap nav__inner">
        <a className="nav__logo" href="#top" aria-label="AfterMoving — home">
          <img className="nav__logo-img nav__logo-img--dark" src="assets/logo-on-light.png" alt="AfterMoving" />
          <img className="nav__logo-img nav__logo-img--light" src="assets/logo-on-dark.png" alt="" aria-hidden="true" />
        </a>
        <nav className="nav__links">
          {links.map(([l, h]) => <a key={h} href={h}>{l}</a>)}
        </nav>
        <div className="nav__right">
          <a className="tel nav__tel" href={`tel:${PHONE}`}><I.phone />{PHONE}</a>
          <button className="btn nav__cta" onClick={onQuote}>Get a free quote</button>
          <button className="nav__burger" aria-label="Menu" onClick={() => setOpen((o) => !o)}><I.menu /></button>
        </div>
      </div>
      {open &&
      <div className="nav__mobile">
          {links.map(([l, h]) => <a key={h} href={h} onClick={() => setOpen(false)}>{l}</a>)}
          <a className="tel" href={`tel:${PHONE}`}><I.phone />{PHONE}</a>
        </div>
      }
    </header>);

}

/* trust pills reused across heroes */
function HeroTrust({ navy }) {
  const items = [
  { icon: I.leaf, t: "Eco-friendly hauling" },
  { icon: I.clock, t: "Same-day available" },
  { icon: I.recycle, t: "Donate & recycle first" }];

  return (
    <div className="chips hero__trust">
      {items.map((x, i) =>
      <span className={`chip ${navy ? "" : ""}`} key={i}><x.icon style={{ color: "var(--accent)" }} />{x.t}</span>
      )}
    </div>);

}

/* rating glass card reused */
function RatingCard({ float }) {
  return (
    <div className={`ratecard ${float ? "ratecard--float" : ""}`}>
      <div className="ratecard__top">
        <Stars />
        <strong>4.9</strong>
      </div>
      <p>Rated <b>4.9/5</b> across <b>200+</b> Georgia jobs</p>
      <div className="ratecard__avatars">
        {["#016FEF", "#101922", "#3D5366", "#5FA3FF"].map((c, i) =>
        <span key={i} style={{ background: c }} />
        )}
        <em>+ join 600 happy movers</em>
      </div>
    </div>);

}

/* ====================== HERO A — split editorial ====================== */
function HeroA({ t, onQuote }) {
  return (
    <section className="hero heroA" id="top">
      <div className="wrap heroA__grid">
        <div className="heroA__copy">
          <span className="eyebrow reveal in">Junk removal · post-move cleaning</span>
          <h1 className="hero__h1 reveal in d1"><span className="sr-only">Atlanta Junk Removal &amp; Post-Move Cleaning — </span>{t.headline}</h1>
          <p className="lead hero__sub reveal in d2">{t.subhead}</p>
          <div className="hero__cta reveal in d3">
            <button className="btn btn--lg" onClick={onQuote}>{t.ctaPrimary}<I.arrow /></button>
            <a className="btn btn--ghost btn--lg" href={`tel:${PHONE}`}><I.phone />{t.ctaSecondary}</a>
          </div>
          <HeroTrust />
        </div>
        <div className="heroA__art reveal in d2">
          <Ph eager label="hero photo — crew loading truck + spotless room" className="heroA__img" src="photo-1567767292278-a4f21aa2d36e" w={1100} alt="Bright, spotless, staged living room after a move" />
          <RatingCard float />
          <div className="heroA__badge">
            <span className="heroA__badge-n">1 day</span>
            <span className="heroA__badge-l">hauled + cleaned</span>
          </div>
        </div>
      </div>
    </section>);

}

/* ====================== HERO B — full-bleed navy ====================== */
function HeroB({ t, onQuote }) {
  return (
    <section className="hero heroB" id="top">
      <Ph navy eager label="full-bleed photo — empty sunlit living room, post-clean" className="heroB__bg" src="photo-1567767292278-a4f21aa2d36e" w={1920} alt="Bright, spotless, staged living room after a move" />
      <div className="heroB__scrim" />
      <div className="wrap heroB__grid">
        <div className="heroB__copy">
          <span className="eyebrow reveal in" style={{ color: "#5FA3FF" }}>Junk removal · post-move cleaning</span>
          <h1 className="hero__h1 reveal in d1" style={{ color: "#fff" }}><span className="sr-only">Atlanta Junk Removal &amp; Post-Move Cleaning — </span>{t.headline}</h1>
          <p className="lead hero__sub reveal in d2" style={{ color: "#CBD9E8" }}>{t.subhead}</p>
          <div className="hero__cta reveal in d3">
            <button className="btn btn--lg" onClick={onQuote}>{t.ctaPrimary}<I.arrow /></button>
            <a className="btn btn--white btn--lg" href={`tel:${PHONE}`}><I.phone />{t.ctaSecondary}</a>
          </div>
          <div className="heroB__trust reveal in d4">
            <Stars /><span><b style={{ color: "#fff" }}>4.9/5</b> · 200+ jobs completed · Same-day available</span>
          </div>
        </div>
      </div>
    </section>);

}

/* ====================== HERO C — type forward ====================== */
function HeroC({ t, onQuote }) {
  return (
    <section className="hero heroC" id="top">
      <div className="wrap heroC__top">
        <span className="eyebrow reveal in">Atlanta junk removal & post-move cleaning</span>
        <h1 className="heroC__h1 reveal in d1">
          <span className="sr-only">Atlanta Junk Removal &amp; Post-Move Cleaning — </span>{t.headlineBig}
        </h1>
        <p className="lead heroC__sub reveal in d2">{t.subhead}</p>
        <div className="hero__cta heroC__cta reveal in d3">
          <button className="btn btn--lg" onClick={onQuote}>{t.ctaPrimary}<I.arrow /></button>
          <a className="btn btn--ghost btn--lg" href={`tel:${PHONE}`}><I.phone />{t.ctaSecondary}</a>
        </div>
        <HeroTrust />
      </div>
      <div className="wrap heroC__band reveal in d2">
        <Ph label="before — cluttered" className="heroC__cell" src="photo-1502672260266-1c1ef2d93688" w={700} alt="Bright living room" />
        <Ph label="action — crew hauling" className="heroC__cell heroC__cell--tall" src="assets/junk-removal-truck.jpg" alt="Truck loaded with furniture and boxes" />
        <Ph label="after — spotless" className="heroC__cell" src="photo-1567767292278-a4f21aa2d36e" w={700} alt="Spotless living room after cleaning" />
      </div>
    </section>);

}

function Hero({ t, onQuote }) {
  if (t.heroStyle === "B") return <HeroB t={t} onQuote={onQuote} />;
  if (t.heroStyle === "C") return <HeroC t={t} onQuote={onQuote} />;
  return <HeroA t={t} onQuote={onQuote} />;
}

Object.assign(window, { Nav, Hero, RatingCard, HeroTrust });