// ============================================================
// autoclient.io — HOME
// ============================================================
const { useState: useHS, useEffect: useHE, useRef: useHR } = React;

/* ---------- Hero ---------- */
function HomeHero() {
  const heroRef = useHR(null);
  useHE(() => {
    const el = heroRef.current;
    if (!el) return;
    const reduce = matchMedia("(prefers-reduced-motion: reduce)");
    let raf, tx = 0, ty = 0, cx = 0, cy = 0, running = false;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      tx = ((e.clientX - r.left) / r.width - 0.5) * 2;
      ty = ((e.clientY - r.top) / r.height - 0.5) * 2;
      if (!running) { running = true; raf = requestAnimationFrame(tick); }
    };
    const tick = () => {
      cx += (tx - cx) * 0.12; cy += (ty - cy) * 0.12;
      el.style.setProperty("--px", cx.toFixed(3));
      el.style.setProperty("--py", cy.toFixed(3));
      raf = requestAnimationFrame(tick);
    };
    window.addEventListener("pointermove", onMove);
    return () => { cancelAnimationFrame(raf); window.removeEventListener("pointermove", onMove); };
  }, []);

  const tweaks = React.useContext(window.TweakCtx);
  const useSpline = tweaks && tweaks.heroBg === "Spline";

  return (
    <section ref={heroRef} className={"hero-3d" + (useSpline ? " hero-spline-on" : "")} style={{ textAlign: "center" }}>
      <Aura color="#8784FD" size={620} top={-180} left={-120} opacity={0.5} drift={1} />
      <Aura color="#FF6666" size={520} top={20} right={-160} opacity={0.36} drift={2} />
      <Aura color="#CC99FF" size={440} bottom={-260} left={"36%"} opacity={0.3} drift={1} />
      {useSpline ? <SplineHeroScene /> : <HeroScene />}
      <div className="hero-vignette" aria-hidden="true" />
      <div className="wrap" style={{ position: "relative", zIndex: 1, width: "100%" }}>
        <span className="pill pill-outline fade-up" style={{ marginBottom: 28 }}>
          <span style={{ width: 7, height: 7, borderRadius: 99, background: "var(--auto-coral)" }} />
          AI-powered performance marketing
        </span>
        <h1 className="fade-up" style={{ fontWeight: 300, fontSize: "clamp(2.9rem,6.2vw,4.9rem)", lineHeight: 1.06, letterSpacing: "-0.03em", margin: "0 auto", maxWidth: 1200 }}>
          Elevate your business<br />with intelligent <span className="gt" style={{ fontWeight: 300 }}>marketing&nbsp;&amp;&nbsp;AI</span>.
        </h1>
        <p className="fade-up" style={{ fontSize: 19, lineHeight: 1.65, color: "var(--fg-on-dark-2)", maxWidth: 640, margin: "30px auto 0", fontWeight: 400 }}>
          Targeted campaigns. Smarter automation. Maximum growth. We expand your customer acquisition across Google, Meta, TikTok, and more, engineered by senior marketers who've run enterprise budgets.
        </p>
        <div className="fade-up" style={{ display: "flex", gap: 14, justifyContent: "center", marginTop: 40, flexWrap: "wrap" }}>
          <Button variant="primary" size="lg" icon="arrow-right" href="#/contact">Free Strategy Session</Button>
          <Button variant="secondary" size="lg" icon="arrow-up-right" href="#/works">View Our Work</Button>
        </div>
        <div className="fade-up hero-kpis" style={{ marginTop: 60, display: "flex", gap: 52, justifyContent: "center", flexWrap: "wrap", width: "fit-content", marginLeft: "auto", marginRight: "auto" }}>
          {[["4.7", "×", "average ROAS", 1], ["38", "%", "lower cost per lead", 0], ["28", "+", "projects delivered", 0], ["44", "+", "years combined", 0]].map(([n, s, l, d]) => (
            <div key={l} style={{ textAlign: "center" }}>
              <div className="gt" style={{ fontWeight: 700, fontSize: 46, letterSpacing: "-0.02em" }}>
                <CountUp to={Number(n)} suffix={s} decimals={d} />
              </div>
              <div className="overline" style={{ marginTop: 8 }}>{l}</div>
            </div>
          ))}
        </div>
        <p className="fade-up" style={{ fontSize: 12.5, color: "var(--fg-on-dark-3)", marginTop: 22, letterSpacing: "0.01em" }}>Representative client results. Your plan and projections are scoped in your free strategy session.</p>
      </div>
    </section>
  );
}

/* ---------- Trust bar (marquee) ---------- */
function TrustBar({ light }) {
  const row = [...CLIENTS, ...CLIENTS];
  return (
    <section style={{ padding: "30px 0 8px" }}>
      <div className="wrap" style={{ textAlign: "center", marginBottom: 30 }}>
        <span className="overline" style={{ color: light ? "var(--fg-on-light-3)" : "var(--fg-on-dark-3)" }}>Experience across industries like</span>
      </div>
      <div className="marquee-mask">
        <div className="marquee-track" style={{ gap: 64, alignItems: "center" }}>
          {row.map((c, i) => <ClientWordmark key={i} name={c} light={light} />)}
        </div>
      </div>
    </section>
  );
}

/* ---------- Core services grid (8) ---------- */
const CORE_SERVICES = [
  { icon: "target", name: "Performance Advertising", d: "Paid acquisition across Meta, TikTok, and the open web, optimized continuously by AI bidding agents.", hash: "#/services/paid-social" },
  { icon: "search", name: "SEO & Local SEO", d: "Technical, content, and local SEO that compounds organic pipeline month over month.", hash: "#/services/seo" },
  { icon: "mouse-pointer-click", name: "Google Ads", d: "Search, Shopping, Display, and Discovery campaigns built to reach 2.6B+ users.", hash: "#/services/google-ads" },
  { icon: "workflow", name: "Automation & AI", d: "Nurture, follow-up, and reporting on autopilot, your CRM does the busywork.", hash: "#/services/automation" },
  { icon: "magnet", name: "Lead Generation", d: "Full-funnel capture, scoring, and routing so sales only ever touches ready buyers.", hash: "#/services/lead-generation" },
  { icon: "mail", name: "Email, SMS & Social", d: "Automated sequences and campaigns that reach your audience where they already are.", hash: "#/services/email-marketing" },
  { icon: "compass", name: "Strategy & Analytics", d: "Unit-economics modeling and a live dashboard, so every dollar is accountable to a number.", hash: "#/case-studies" },
  { icon: "palette", name: "Brand & Web Design", d: "Identity and high-converting websites that make the first impression do real work.", hash: "#/works" },
];

function ServiceCard({ s, i }) {
  const [hover, setHover] = useHS(false);
  return (
    <a href={s.hash} className="card reveal" data-delay={(i % 4) * 60} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "block", padding: 28, transform: hover ? "translateY(-4px)" : "none", boxShadow: hover ? "var(--shadow-glow)" : "none", borderColor: hover ? "var(--line-strong-dark)" : "var(--line-on-dark)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <div className="icon-grad" style={{ width: 48, height: 48, borderRadius: 12, display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 22 }}>
          <Icon name={s.icon} size={22} />
        </div>
        <Icon name="arrow-up-right" size={18} style={{ color: "var(--fg-on-dark-3)", opacity: hover ? 1 : 0, transform: hover ? "none" : "translate(-4px,4px)", transition: "all .2s" }} />
      </div>
      <h3 style={{ fontWeight: 500, fontSize: 19.5, margin: "0 0 9px" }}>{s.name}</h3>
      <p style={{ fontSize: 14.5, lineHeight: 1.6, color: "var(--fg-on-dark-2)", margin: 0 }}>{s.d}</p>
    </a>
  );
}

function ServicesGrid() {
  return (
    <section className="sec">
      <div className="wrap-wide">
        <div className="reveal" style={{ maxWidth: 620, marginBottom: 52 }}>
          <Overline grad>What we do</Overline>
          <h2 style={{ fontWeight: 300, fontSize: "clamp(2rem,3.6vw,3.1rem)", lineHeight: 1.1, letterSpacing: "-0.02em", margin: "16px 0 0" }}>
            One team for every<br />growth channel.
          </h2>
        </div>
        <div className="grid-4" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 18 }}>
          {CORE_SERVICES.map((s, i) => <ServiceCard key={s.name} s={s} i={i} />)}
        </div>
      </div>
    </section>
  );
}

/* ---------- Results ticker band ---------- */
function ResultsTicker() {
  const items = [
    { n: 2.6, suf: "B+", dec: 1, l: "Google users reachable" },
    { n: 28, suf: "+", dec: 0, l: "projects delivered" },
    { n: 44, suf: "+", dec: 0, l: "years combined experience" },
    { n: 6, suf: "", dec: 0, l: <>specialists on<br />your account</> },
  ];
  return (
    <section style={{ position: "relative", overflow: "hidden", padding: "10px 0 30px" }}>
      <div className="wrap-wide">
        <div className="reveal" style={{ position: "relative", overflow: "hidden", borderRadius: "var(--radius-xl)", border: "1px solid var(--line-on-dark)", background: "var(--bg-elevated)", padding: "52px 48px" }}>
          <Aura color="#8784FD" size={400} top={-180} left={"20%"} opacity={0.3} drift={2} />
          <div className="grid-4" style={{ position: "relative", display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 24 }}>
            {items.map((it, i) => (
              <div key={i} style={{ textAlign: "center", borderLeft: i ? "1px solid var(--line-on-dark)" : "none" }}>
                <div style={{ fontWeight: 300, fontSize: "clamp(2.6rem,4vw,3.6rem)", letterSpacing: "-0.025em" }} className="gt">
                  <CountUp to={it.n} suffix={it.suf} decimals={it.dec} />
                </div>
                <div className="overline" style={{ marginTop: 10 }}>{it.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Industry selector (interactive) ---------- */
const INDUSTRIES = {
  "Law Firms": { icon: "scale", tag: "Legal", phrase: "law firm", hash: "#/industries/law-firms", line: "Sign more qualified cases, not more clicks.", pts: ["Rank for high-intent practice-area and local searches before your competitors", "Turn anonymous clicks into booked consultations with intake-ready forms", "See cost per signed case, with call tracking tied back to spend"] },
  "Medical & Dental": { icon: "stethoscope", tag: "Healthcare", phrase: "medical or dental practice", hash: "#/industries/medical", line: "Fill your chairs with the right patients.", pts: ["Patient-focused campaigns that drive consult and procedure demand, not tire-kickers", "Cut no-shows with automated reminders and confirmations", "Build the reviews and reputation new patients choose you on"] },
  "Local Business": { icon: "store", tag: "Local", phrase: "local business", hash: "#/industries/local-business", line: "Own the map pack in your neighborhood.", pts: ["Win the Google map pack with profile optimization and local SEO", "Reach nearby buyers the moment they search, with geo-targeted ads", "Turn one-time customers into regulars with email and SMS"] },
  "Tech & SaaS": { icon: "cpu", tag: "Technology", phrase: "tech or SaaS company", hash: "#/case-studies", line: "Lower CAC and grow pipeline that converts.", pts: ["Intent-based search and account-targeted social that reach real buyers", "Content and SEO engineered to capture high-difficulty, high-value terms", "Attribution wired to qualified pipeline, not top-of-funnel vanity metrics"] },
  "Ecommerce": { icon: "shopping-cart", tag: "Retail", phrase: "ecommerce brand", hash: "#/industries/ecommerce", line: "Scale profitable revenue, not just spend.", pts: ["Catalog SEO and Shopping campaigns tuned to profitable ROAS targets", "Creative-led paid social that finds buyers and scales winners fast", "Email and SMS flows that lift repeat purchase and compound lifetime value"] },
};
function IndustrySelector() {
  const keys = Object.keys(INDUSTRIES);
  const [active, setActive] = useHS(keys[0]);
  const cur = INDUSTRIES[active];
  return (
    <section className="sec">
      <div className="wrap">
        <div className="reveal" style={{ textAlign: "center", marginBottom: 44 }}>
          <Overline grad>Built for your industry</Overline>
          <h2 style={{ fontWeight: 300, fontSize: "clamp(2rem,3.4vw,2.9rem)", lineHeight: 1.12, letterSpacing: "-0.02em", margin: "16px auto 0", maxWidth: 720 }}>
            I run a <span className="gt">{cur.phrase}</span>. Show me how this works.
          </h2>
        </div>
        <div className="reveal" style={{ display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap", marginBottom: 36 }}>
          {keys.map((k) => (
            <button key={k} onClick={() => setActive(k)} className="pill" style={{
              cursor: "pointer", border: 0, fontSize: 14.5, padding: "11px 22px",
              background: active === k ? "var(--auto-gradient)" : "transparent",
              color: active === k ? "#fff" : "var(--fg-on-dark-2)",
              boxShadow: active === k ? "var(--shadow-glow)" : "inset 0 0 0 1px var(--line-on-dark)",
              transition: "all .2s",
            }}>{k}</button>
          ))}
        </div>
        <div className="card" style={{ padding: "44px 44px", display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 44, alignItems: "center" }} key={active}>
          <div className="fade-up">
            <span className="pill pill-soft" style={{ marginBottom: 18 }}><Icon name={cur.icon} size={15} />{cur.tag}</span>
            <h3 style={{ fontWeight: 300, fontSize: 28, lineHeight: 1.2, letterSpacing: "-0.015em", margin: "16px 0 0" }}>{cur.line}</h3>
            <Button variant="secondary" icon="arrow-right" href={cur.hash} style={{ marginTop: 28 }}>See how we help</Button>
          </div>
          <div className="fade-up" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {cur.pts.map((p, i) => (
              <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start", paddingBottom: 16, borderBottom: i < cur.pts.length - 1 ? "1px solid var(--line-on-dark)" : "none" }}>
                <span style={{ width: 26, height: 26, borderRadius: 99, flexShrink: 0, marginTop: 1, background: "var(--auto-gradient)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="check" size={15} color="#fff" /></span>
                <span style={{ fontSize: 16, lineHeight: 1.5, color: "var(--fg-on-dark-1)" }}>{p}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Featured projects ---------- */
const FEATURED = [
  { client: "Enterprise SaaS Platform", tag: "Enterprise · Paid + Web", hue: "purple", label: "SaaS", icon: "cloud", img: "assets/work-saas.gif?v=2", result: "Enterprise demand-gen across search and social", slug: "saas" },
  { client: "Cloud Infrastructure Brand", tag: "Enterprise · SEO + Content", hue: "violet", label: "Cloud", icon: "server", img: "assets/work-cloud.gif", result: "Organic pipeline built on technical content", slug: "cloud" },
  { client: "National Cosmetic-Surgery Group", tag: "Medical · Lead Gen + CRM", hue: "coral", label: "Medical", icon: "stethoscope", img: "assets/work-medical.png", result: "Consult bookings up via email and automation", slug: "cosmetic" },
];
function FeaturedProjects() {
  return (
    <section className="sec">
      <div className="wrap-wide">
        <div className="reveal" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48, flexWrap: "wrap", gap: 20 }}>
          <div style={{ maxWidth: 560 }}>
            <Overline grad>Selected work</Overline>
            <h2 style={{ fontWeight: 300, fontSize: "clamp(2rem,3.6vw,3.1rem)", lineHeight: 1.1, letterSpacing: "-0.02em", margin: "16px 0 0" }}>
              Work that gets<br />measurable results.
            </h2>
          </div>
          <a href="#/case-studies" className="arrow-link">View all case studies <Icon name="arrow-right" size={17} /></a>
        </div>
        <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20 }}>
          {FEATURED.map((p, i) => <ProjectCard key={p.client} p={p} i={i} />)}
        </div>
      </div>
    </section>
  );
}
function ProjectCard({ p, i }) {
  const [hover, setHover] = useHS(false);
  // fall back to the slug's designed SVG thumb if the media file is missing
  const [imgFailed, setImgFailed] = useHS(false);
  return (
    <a href={`#/case-studies/${p.slug}`} className="reveal" data-delay={i * 70} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: "block" }}>
      <div style={{ position: "relative", borderRadius: "var(--radius-md)", overflow: "hidden", transform: hover ? "translateY(-4px)" : "none", transition: "transform .25s var(--ease-out)", boxShadow: hover ? "var(--shadow-glow)" : "none" }}>
        {p.img && !imgFailed ? (
          <div style={{ position: "relative", width: "100%", paddingTop: "56.25%", background: "var(--surface-2, #2E2A2B)" }}>
            <img src={p.img} alt={p.client} loading="lazy" onError={() => setImgFailed(true)} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
        ) : (
          <ProjectThumb hue={p.hue} label={p.label} icon={p.icon} ratio={66} />
        )}
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(26,23,24,0.7), transparent 55%)", opacity: hover ? 1 : 0, transition: "opacity .25s", display: "flex", alignItems: "flex-end", padding: 20 }}>
          <span className="arrow-link" style={{ color: "#fff" }}>View Project <Icon name="arrow-right" size={16} /></span>
        </div>
      </div>
      <div style={{ marginTop: 18 }}>
        <span className="overline" style={{ color: "var(--auto-violet)" }}>{p.tag}</span>
        <h3 style={{ fontWeight: 500, fontSize: 20, margin: "12px 0 6px" }}>{p.client}</h3>
        <p style={{ fontSize: 14.5, color: "var(--fg-on-dark-2)", margin: 0, lineHeight: 1.5 }}>{p.result}</p>
      </div>
    </a>
  );
}

/* ---------- Testimonials carousel (on light) ---------- */
function Testimonials() {
  const [idx, setIdx] = useHS(0);
  const n = TESTIMONIALS.length;
  const go2 = (d) => setIdx((i) => (i + d + n) % n);
  useHE(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % n), 7000);
    return () => clearInterval(t);
  }, [n]);
  const t = TESTIMONIALS[idx];
  return (
    <section className="sec on-light">
      <div className="wrap-narrow" style={{ textAlign: "center" }}>
        <div className="reveal"><Overline dot style={{ color: "var(--fg-on-light-3)" }}>What clients say</Overline></div>
        <blockquote key={idx} className="fade-up" style={{ margin: "30px 0 0", fontWeight: 300, fontSize: "clamp(1.5rem,2.8vw,2.3rem)", lineHeight: 1.35, letterSpacing: "-0.015em", color: "var(--fg-on-light-1)" }}>
          &ldquo;{t.quote}&rdquo;
        </blockquote>
        <div className="fade-up" style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 14, marginTop: 34 }}>
          <Avatar name={t.name} hue={t.hue} size={50} />
          <div style={{ textAlign: "left" }}>
            <div style={{ fontWeight: 600, fontSize: 15.5, color: "var(--fg-on-light-1)" }}>{t.name}</div>
            <div style={{ fontSize: 13.5, color: "var(--fg-on-light-2)" }}>{t.role}</div>
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 18, marginTop: 36 }}>
          <button onClick={() => go2(-1)} aria-label="Previous" style={navBtnLight}><Icon name="arrow-left" size={18} /></button>
          <div style={{ display: "flex", gap: 8 }}>
            {TESTIMONIALS.map((_, i) => (
              <button key={i} onClick={() => setIdx(i)} aria-label={`Go to ${i + 1}`} style={{ width: i === idx ? 26 : 8, height: 8, borderRadius: 99, border: 0, cursor: "pointer", padding: 0, background: i === idx ? "var(--auto-gradient)" : "rgba(35,31,32,0.18)", transition: "all .3s" }} />
            ))}
          </div>
          <button onClick={() => go2(1)} aria-label="Next" style={navBtnLight}><Icon name="arrow-right" size={18} /></button>
        </div>
      </div>
    </section>
  );
}
const navBtnLight = { width: 46, height: 46, borderRadius: 99, border: "1px solid var(--line-on-light)", background: "transparent", color: "var(--fg-on-light-1)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", transition: "background .15s" };

/* ---------- Blog preview ---------- */
const POSTS = [
  { tag: "Paid Media", title: "The end of manual bidding: what AI agents actually change", read: "6 min read", hue: "purple" },
  { tag: "SEO", title: "Local SEO in 2026: how service businesses win the map pack", read: "8 min read", hue: "violet" },
  { tag: "Automation", title: "From lead to client: the follow-up sequence that books calls", read: "5 min read", hue: "coral" },
];
function BlogPreview() {
  return (
    <section className="sec">
      <div className="wrap-wide">
        <div className="reveal" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 44, flexWrap: "wrap", gap: 20 }}>
          <div>
            <Overline grad>From the blog</Overline>
            <h2 style={{ fontWeight: 300, fontSize: "clamp(2rem,3.4vw,2.9rem)", lineHeight: 1.12, letterSpacing: "-0.02em", margin: "16px 0 0" }}>Ideas that compound.</h2>
          </div>
          <a href="#/" className="arrow-link">All articles <Icon name="arrow-right" size={17} /></a>
        </div>
        <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20 }}>
          {POSTS.map((p, i) => <BlogCard key={p.title} p={p} i={i} />)}
        </div>
      </div>
    </section>
  );
}
function BlogCard({ p, i }) {
  const [hover, setHover] = useHS(false);
  return (
    <a href="#/" className="card reveal" data-delay={i * 70} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "block", overflow: "hidden", borderColor: hover ? "var(--line-strong-dark)" : "var(--line-on-dark)", transform: hover ? "translateY(-4px)" : "none" }}>
      <ProjectThumb hue={p.hue} label="" ratio={48} />
      <div style={{ padding: "22px 24px 26px" }}>
        <span className="overline" style={{ color: "var(--auto-violet)" }}>{p.tag}</span>
        <h3 style={{ fontWeight: 500, fontSize: 18.5, lineHeight: 1.3, margin: "12px 0 14px", letterSpacing: "-0.01em" }}>{p.title}</h3>
        <span style={{ fontSize: 13, color: "var(--fg-on-dark-3)" }}>{p.read}</span>
      </div>
    </a>
  );
}

/* ---------- FAQ section ---------- */
function FaqSection({ items = HOME_FAQ }) {
  return (
    <section className="sec">
      <div className="wrap faq-grid" style={{ display: "grid", gridTemplateColumns: "0.8fr 1.2fr", gap: 56 }}>
        <div className="reveal">
          <Overline grad>FAQ</Overline>
          <h2 style={{ fontWeight: 300, fontSize: "clamp(2rem,3.2vw,2.7rem)", lineHeight: 1.12, letterSpacing: "-0.02em", margin: "16px 0 18px" }}>Questions,<br />answered.</h2>
          <p style={{ fontSize: 15.5, lineHeight: 1.65, color: "var(--fg-on-dark-2)", maxWidth: 300 }}>Still curious? Book a free strategy session and we'll get specific about your business.</p>
          <Button variant="secondary" icon="arrow-right" href="#/contact" style={{ marginTop: 24 }}>Book a Call</Button>
        </div>
        <div className="reveal"><FAQ items={items} /></div>
      </div>
    </section>
  );
}

/* ---------- Page ---------- */
function HomePage() {
  useReveal();
  return (
    <main>
      <HomeHero />
      <ServicesGrid />
      <ResultsTicker />
      <IndustrySelector />
      <FeaturedProjects />
      <Testimonials />
      <FaqSection />
      <CtaBanner title="Let's build your growth engine." sub="Tell us where you want to grow. We'll send back a free, channel-by-channel plan." primary="Book a Call" />
    </main>
  );
}

Object.assign(window, { HomePage, TrustBar, ResultsTicker, Testimonials, FaqSection });