// ============================================================
// autoclient.io — SERVICE TEMPLATE (Google Ads)
// ============================================================
const { useState: useSvcS } = React;

/* ---------- reusable: inner page hero ---------- */
function PageHero({ overline, title, sub, primary = "Start Now", secondary = "Book a Call", align = "left" }) {
  return (
    <section style={{ position: "relative", overflow: "hidden", padding: "172px 0 84px", textAlign: align }}>
      <Aura color="#8784FD" size={560} top={-200} left={align === "center" ? "30%" : -160} opacity={0.4} drift={1} />
      <Aura color="#FF6666" size={420} top={-40} right={-160} opacity={0.3} drift={2} />
      <div className={align === "center" ? "wrap" : "wrap-wide"} style={{ position: "relative", zIndex: 1 }}>
        <div style={{ maxWidth: align === "center" ? 860 : 880, margin: align === "center" ? "0 auto" : 0 }}>
          <span className="overline-grad fade-up">{overline}</span>
          <h1 className="fade-up" style={{ fontWeight: 300, fontSize: "clamp(2.6rem,5.4vw,4.6rem)", lineHeight: 1.05, letterSpacing: "-0.03em", margin: "20px 0 0" }}
            dangerouslySetInnerHTML={{ __html: title }} />
          {sub && <p className="fade-up" style={{ fontSize: 19, lineHeight: 1.65, color: "var(--fg-on-dark-2)", maxWidth: 600, margin: align === "center" ? "26px auto 0" : "26px 0 0" }}>{sub}</p>}
          <div className="fade-up" style={{ display: "flex", gap: 14, marginTop: 36, justifyContent: align === "center" ? "center" : "flex-start", flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" icon="arrow-right" href="#/contact">{primary}</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- reusable: feature/type cards grid ---------- */
function TypeGrid({ overline, title, sub, cards, cols = 4 }) {
  return (
    <section className="sec">
      <div className="wrap-wide">
        <div className="reveal" style={{ maxWidth: 640, marginBottom: 50 }}>
          <Overline grad>{overline}</Overline>
          <h2 style={{ fontWeight: 300, fontSize: "clamp(2rem,3.4vw,2.9rem)", lineHeight: 1.12, letterSpacing: "-0.02em", margin: "16px 0 0" }}>{title}</h2>
          {sub && <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--fg-on-dark-2)", margin: "18px 0 0", maxWidth: 560 }}>{sub}</p>}
        </div>
        <div className={cols === 3 ? "grid-3" : "grid-4"} style={{ display: "grid", gridTemplateColumns: `repeat(${cols},1fr)`, gap: 18 }}>
          {cards.map((c, i) => <FeatureCard key={c.name} c={c} i={i} cols={cols} />)}
        </div>
      </div>
    </section>
  );
}
function FeatureCard({ c, i, cols }) {
  const [hover, setHover] = useSvcS(false);
  const Tag = c.hash ? "a" : "div";
  const linkProps = c.hash ? { href: c.hash } : {};
  return (
    <Tag {...linkProps} className="card reveal" data-delay={(i % cols) * 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 style={{ width: 48, height: 48, borderRadius: 12, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(135,132,253,0.14)", color: "var(--auto-violet)", marginBottom: 20 }}>
          <Icon name={c.icon} size={22} />
        </div>
        {c.hash && <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, margin: "0 0 9px" }}>{c.name}</h3>
      <p style={{ fontSize: 14.5, lineHeight: 1.6, color: "var(--fg-on-dark-2)", margin: 0 }}>{c.d}</p>
    </Tag>
  );
}

/* ---------- reusable: process timeline (4 steps) ---------- */
function ProcessTimeline({ steps, overline = "How we work", title = "A clear path from spend to signed clients." }) {
  return (
    <section className="sec">
      <div className="wrap-wide">
        <div className="reveal" style={{ maxWidth: 620, marginBottom: 52 }}>
          <Overline grad>{overline}</Overline>
          <h2 style={{ fontWeight: 300, fontSize: "clamp(2rem,3.4vw,2.9rem)", lineHeight: 1.12, letterSpacing: "-0.02em", margin: "16px 0 0" }}>{title}</h2>
        </div>
        <div className="grid-4" style={{ display: "grid", gridTemplateColumns: `repeat(${steps.length},1fr)`, gap: 18 }}>
          {steps.map((s, i) => (
            <div key={s.t} className="reveal" data-delay={i * 70} style={{ paddingTop: 28, borderTop: "1px solid var(--line-on-dark)", position: "relative" }}>
              <span style={{ position: "absolute", top: -1, left: 0, width: 48, height: 2, background: "var(--auto-gradient)" }} />
              <div className="gt" style={{ fontWeight: 300, fontSize: 46, letterSpacing: "-0.02em" }}>{String(i + 1).padStart(2, "0")}</div>
              <h4 style={{ fontWeight: 500, fontSize: 19, margin: "16px 0 9px" }}>{s.t}</h4>
              <p style={{ fontSize: 14.5, lineHeight: 1.6, color: "var(--fg-on-dark-2)", margin: 0 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- reusable: value-props split (alternating list) ---------- */
function ValueProps({ overline, title, body, points, hue = "purple", label = "ROAS", reverse, img, imgAlt }) {
  return (
    <section className="sec">
      <div className="wrap-wide" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }} >
        <div className="reveal" style={{ order: reverse ? 2 : 1 }}>
          <Overline grad>{overline}</Overline>
          <h2 style={{ fontWeight: 300, fontSize: "clamp(1.9rem,3vw,2.6rem)", lineHeight: 1.14, letterSpacing: "-0.02em", margin: "16px 0 18px" }}>{title}</h2>
          {body && <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--fg-on-dark-2)", margin: "0 0 26px", maxWidth: 460 }}>{body}</p>}
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {points.map((p) => (
              <div key={p} style={{ display: "flex", gap: 13, alignItems: "flex-start" }}>
                <span style={{ width: 24, height: 24, borderRadius: 99, flexShrink: 0, marginTop: 1, background: "rgba(135,132,253,0.16)", color: "var(--auto-violet)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="check" size={14} /></span>
                <span style={{ fontSize: 15.5, lineHeight: 1.5, color: "var(--fg-on-dark-1)" }}>{p}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="reveal" data-delay={80} style={{ order: reverse ? 1 : 2 }}>
          <div className="card-grad" style={{ padding: 1 }}>
            <div style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", position: "relative", paddingTop: "62%" }}>
              {img ? (
                <img src={img} alt={imgAlt || ""} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
              ) : (
                <ValueThumb hue={hue} label={label} />
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Differentiator band ---------- */
function DiffBand() {
  return (
    <section className="sec-sm">
      <div className="wrap">
        <div className="reveal card" style={{ padding: "48px 48px", position: "relative", overflow: "hidden" }}>
          <Aura color="#FF6666" size={360} top={-160} right={-80} opacity={0.28} drift={2} />
          <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 48, alignItems: "center" }}>
            <div>
              <h3 style={{ fontWeight: 300, fontSize: "clamp(1.7rem,2.6vw,2.3rem)", lineHeight: 1.2, letterSpacing: "-0.02em", margin: 0 }}>
                Run by senior, <span className="gt">former Fortune 500</span> marketers.
              </h3>
              <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--fg-on-dark-2)", margin: "18px 0 0", maxWidth: 460 }}>
                We've managed enterprise budgets for Fortune 500 technology and retail brands, and we bring that same rigor to local and growing businesses. No guesswork, no vanity metrics.
              </p>
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
              {CLIENTS.slice(0, 6).map((c) => (
                <span key={c} className="pill pill-outline" style={{ fontSize: 13.5 }}>{c}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const GOOGLE_TYPES = [
  { icon: "search", name: "Search Ads", d: "Capture high-intent demand the moment someone searches for what you offer." },
  { icon: "shopping-bag", name: "Shopping Ads", d: "Put your products, with price and image, at the top of relevant results." },
  { icon: "layout-grid", name: "Display Network", d: "Stay top-of-mind across 35M+ sites and apps with rich visual creative." },
  { icon: "compass", name: "Discovery Ads", d: "Reach ready-to-engage audiences across YouTube, Gmail, and Discover." },
];
const GOOGLE_STEPS = [
  { t: "Audit", d: "We map your funnel, model unit economics, and find where Google can win." },
  { t: "Strategy", d: "Channel mix, keyword and audience plan, and projected CPL and ROAS, in days." },
  { t: "Launch", d: "Campaigns go live with AI agents testing creative, audiences, and bids 24/7." },
  { t: "Optimize", d: "Winners scale, losers get cut. You watch clients and revenue compound." },
];

function GoogleAdsPage() {
  useReveal();
  return (
    <main>
      <PageHero
        overline="Google Ads"
        title={'Google advertising for<br/><span class="gt" style="font-weight:300">enterprise &amp; local.</span>'}
        sub="Reach 2.6B+ users at the exact moment they're searching. We build, manage, and optimize Google campaigns that turn intent into signed clients."
      />
      <TypeGrid overline="Campaign types" title="Every way to win on Google." cards={GOOGLE_TYPES} />
      <DiffBand />
      <ValueProps
        overline="Why it works"
        title="Real-time targeting, measured to the dollar."
        body="We don't just spend your budget, we engineer it. Every campaign is wired to first-party data and reported against the metrics that matter to your business."
        points={["Real-time bid and audience targeting", "ROAS measured against signed revenue, not clicks", "First-party data and conversion tracking baked in", "Similar-audience modeling to find your next buyer"]}
        hue="violet" label="ROAS 4.7×"
        img="https://images.unsplash.com/photo-1533750349088-cd871a92f312?auto=format&fit=crop&w=1200&q=80"
        imgAlt="Hand holding a phone showing rising performance graphs"
      />
      <ProcessTimeline steps={GOOGLE_STEPS} />
      <FaqSection items={SERVICE_FAQ} />
      <CtaBanner title="Ready to dominate search?" sub="Get a free Google Ads plan with projected CPL and ROAS in 48 hours." primary="Start Now" secondary="Book a Call" />
    </main>
  );
}

Object.assign(window, { GoogleAdsPage, PageHero, TypeGrid, ProcessTimeline, ValueProps, DiffBand });