/* ====================== Logo + Nav + Hero + Stats + Services ====================== */

const NAV_LINKS = [
  ["services", "Services"], ["sales", "Upcoming Sales"], ["gallery", "Past Sales"],
  ["shop", "Shop"], ["about", "About"], ["learn", "Learn"], ["faq", "FAQ"],
];

function Logo({ wordmark = true }) {
  return (
    <a href="#top" className={`logo ${wordmark ? "" : "logo-only"}`} aria-label="Dollye Deals — Estate Sales, home">
      <img className="logo-img" src="assets/dollye-deals-logo.png" alt={wordmark ? "" : "Dollye Deals — Estate Sales"} aria-hidden={wordmark ? "true" : undefined} />
      {wordmark && (
        <span className="logo-words">
          <span className="logo-name">Dollye&nbsp;Deals</span>
          <span className="logo-sub mono">FORT WORTH &amp; DFW · EST. 2024</span>
        </span>
      )}
    </a>
  );
}

function Nav({ active }) {
  const [open, setOpen] = useState(false);
  const [solid, setSolid] = useState(false);
  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <React.Fragment>
      <div className="topbar mono">
        <span><Icon name="star" size={12} /> Family owned & operated · Fort Worth & the DFW Metroplex</span>
        <a href={`tel:${BIZ.phoneRaw}`} className="topbar-phone"><Icon name="phone" size={13} /> {BIZ.phone}</a>
      </div>
      <header className={`nav ${solid ? "solid" : ""}`}>
        <div className="wrap nav-inner">
          <Logo wordmark={false} />
          <nav className="nav-links hide-m">
            {NAV_LINKS.map(([id, label]) => (
              <a key={id} href={`#${id}`} className={active === id ? "on" : ""}>{label}</a>
            ))}
          </nav>
          <div className="nav-cta hide-m">
            <a href="#contact" className="btn btn-primary btn-sm">Free Consultation</a>
          </div>
          <button className="burger" aria-label="Menu" onClick={() => setOpen(o => !o)}>
            <span /><span /><span />
          </button>
        </div>
        {open && (
          <div className="mobile-menu">
            {NAV_LINKS.map(([id, label]) => (
              <a key={id} href={`#${id}`} onClick={() => setOpen(false)}>{label}</a>
            ))}
            <a href="#contact" className="btn btn-primary" onClick={() => setOpen(false)}>Free Consultation</a>
            <a href={`tel:${BIZ.phoneRaw}`} className="mono mm-phone">{BIZ.phone}</a>
          </div>
        )}
      </header>
    </React.Fragment>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="wrap hero-grid">
        <div className="hero-copy">
          <div className="hero-eyebrow mono">
            <Icon name="star" size={13} /> EST. {BIZ.est} · {BIZ.area}
          </div>
          <h1 className="hero-title display">
            A houseful of<br />memories<br /><span className="hl">finds its next home.</span>
          </h1>
          <p className="hero-lede">
            Dollye Deals is Fort Worth’s family-owned estate sale company — full-service
            estate sales, tag sales, liquidations, and downsizing across the DFW Metroplex.
            Twenty years of experience, no upfront fees, free consultation.
          </p>
          <div className="hero-btns">
            <a href="#contact" className="btn btn-primary">Book a free consultation</a>
            <a href="#sales" className="btn btn-ghost">See upcoming sales <Icon name="arrow" size={16} /></a>
          </div>
          <div className="hero-trust">
            <Stamp icon="check">No upfront fees</Stamp>
            <Stamp icon="check">20+ years experience</Stamp>
            <Stamp icon="check">Free walkthrough</Stamp>
          </div>
        </div>

        <div className="hero-art">
          <div className="hero-ph-1"><Slot id="hero-haul" label="estate sale haul" tone="tone-rust" src="https://images.unsplash.com/photo-1661318623294-50de2d5f595e?auto=format&fit=crop&w=900&q=72" /></div>
          <div className="hero-ph-2"><Slot id="hero-find" label="mid-century find" tone="tone-denim" src="https://images.unsplash.com/photo-1544691560-fc2053d97726?auto=format&fit=crop&w=900&q=72" /></div>
          <div className="hero-tag tag">$ PRICED TO SELL</div>
          <LogoSeal size={132} className="hero-seal" />
        </div>
      </div>
    </section>
  );
}

function Stats() {
  return (
    <section className="stats">
      <div className="wrap stats-grid">
        {STATS.map((s, i) => (
          <div className="stat reveal" key={i} style={{ transitionDelay: `${i * 70}ms` }}>
            <div className="stat-big display">{s.big}</div>
            <div className="stat-label mono">{s.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Services() {
  return (
    <section className="section" id="services">
      <div className="wrap">
        <SectionHead
          eyebrow="What we do"
          title="Everything, from first sort to last sale."
          lede="A full toolbox of services so your family can step back and let us do the heavy lifting — literally."
        />
        <div className="svc-grid">
          {SERVICES.map((s, i) => (
            <article className="svc reveal" key={s.n} style={{ transitionDelay: `${(i % 3) * 60}ms` }}>
              <div className="svc-top">
                <span className="svc-num mono">{s.n}</span>
                <span className={`svc-icon ${s.tone}`}><Icon name={s.icon} size={24} /></span>
              </div>
              <h3 className="svc-title">{s.title}</h3>
              <p className="svc-desc">{s.desc}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Logo, Nav, Hero, Stats, Services, NAV_LINKS });