// ============================================================
// autoclient.io — PRICING
// ============================================================
const { useState: usePxS } = React;

const TIERS = [
  {
    name: "Launch", price: "2,500", cadence: "/mo", tagline: "For local businesses getting serious about growth.",
    features: ["One primary channel (paid or SEO)", "Landing page & conversion tracking", "AI lead follow-up", "Monthly reporting dashboard", "Email support"],
    cta: "Start with Launch", featured: false,
  },
  {
    name: "Growth", price: "5,000", cadence: "/mo", tagline: "For businesses ready to compound across channels.",
    features: ["Up to three channels, fully managed", "SEO + paid + email & SMS", "AI scoring, routing & nurture", "Dedicated specialist", "Live dashboard & bi-weekly calls"],
    cta: "Start with Growth", featured: true,
  },
  {
    name: "Scale", price: "10k+", cadence: "/mo", tagline: "For brands spending at enterprise volume.",
    features: ["Unlimited channels & creative", "Full automation & AI build-out", "Custom attribution modeling", "Senior strategist + pod", "Weekly calls & priority support"],
    cta: "Talk to Sales", featured: false,
  },
];

const COMPARE = [
  ["Managed channels", "1", "Up to 3", "Unlimited"],
  ["Paid advertising", "•", "•", "•"],
  ["SEO & local SEO", "Add-on", "•", "•"],
  ["Email & SMS marketing", "—", "•", "•"],
  ["Marketing automation & AI", "Basic", "•", "Advanced"],
  ["Dedicated specialist", "—", "•", "Senior pod"],
  ["Reporting dashboard", "Monthly", "Live", "Live + custom"],
  ["Strategy calls", "—", "Bi-weekly", "Weekly"],
  ["Custom attribution modeling", "—", "—", "•"],
];

function PricingHero() {
  return (
    <section style={{ position: "relative", overflow: "hidden", padding: "172px 0 30px", textAlign: "center" }}>
      <Aura color="#8784FD" size={560} top={-200} left={"28%"} opacity={0.42} drift={1} />
      <Aura color="#FF6666" size={420} top={-20} right={-150} opacity={0.28} drift={2} />
      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <span className="overline-grad fade-up">Pricing</span>
        <h1 className="fade-up" style={{ fontWeight: 300, fontSize: "clamp(2.6rem,5.2vw,4.4rem)", lineHeight: 1.05, letterSpacing: "-0.03em", margin: "20px auto 0", maxWidth: 880 }}>
          Plans that scale with <span className="gt" style={{ fontWeight: 300 }}>your growth.</span>
        </h1>
        <p className="fade-up" style={{ fontSize: 18, lineHeight: 1.65, color: "var(--fg-on-dark-2)", maxWidth: 560, margin: "26px auto 0" }}>
          Transparent starting points, every engagement is scoped to your goals after a free strategy session. No long-term lock-in.
        </p>
      </div>
    </section>
  );
}

function TierCard({ t, i }) {
  const [hover, setHover] = usePxS(false);
  const body = (
    <div style={{ padding: "38px 34px 34px", height: "100%", display: "flex", flexDirection: "column" }}>
      {t.featured && <span className="pill" style={{ alignSelf: "flex-start", background: "var(--auto-gradient)", color: "#fff", marginBottom: 16, boxShadow: "var(--shadow-glow)" }}>Most popular</span>}
      <h3 style={{ fontWeight: 500, fontSize: 23, margin: t.featured ? 0 : "0 0 0" }}>{t.name}</h3>
      <p style={{ fontSize: 14.5, color: "var(--fg-on-dark-2)", margin: "10px 0 22px", lineHeight: 1.5, minHeight: 44 }}>{t.tagline}</p>
      <div style={{ display: "flex", alignItems: "baseline", gap: 4, marginBottom: 6 }}>
        <span style={{ fontSize: 16, color: "var(--fg-on-dark-3)" }}>from</span>
        <span style={{ fontWeight: 300, fontSize: 50, letterSpacing: "-0.03em" }} className={t.featured ? "gt" : ""}>${t.price}</span>
        <span style={{ fontSize: 16, color: "var(--fg-on-dark-3)" }}>{t.cadence}</span>
      </div>
      <div style={{ height: 1, background: "var(--line-on-dark)", margin: "24px 0" }} />
      <div style={{ display: "flex", flexDirection: "column", gap: 13, marginBottom: 30 }}>
        {t.features.map((f) => (
          <div key={f} style={{ display: "flex", gap: 11, alignItems: "flex-start" }}>
            <span style={{ width: 20, height: 20, borderRadius: 99, flexShrink: 0, marginTop: 1, background: t.featured ? "var(--auto-gradient)" : "rgba(135,132,253,0.16)", color: t.featured ? "#fff" : "var(--auto-violet)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="check" size={12} /></span>
            <span style={{ fontSize: 14.5, lineHeight: 1.45, color: "var(--fg-on-dark-1)" }}>{f}</span>
          </div>
        ))}
      </div>
      <Button variant={t.featured ? "primary" : "secondary"} icon="arrow-right" href="#/contact" style={{ marginTop: "auto", width: "100%" }}>{t.cta}</Button>
    </div>
  );
  const lift = { transform: hover ? "translateY(-6px)" : "none", transition: "transform .25s var(--ease-out), box-shadow .25s" };
  if (t.featured) {
    return (
      <div className="card-grad reveal" data-delay={i * 70} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={Object.assign({ boxShadow: "var(--shadow-glow)" }, lift)}>
        <div style={{ borderRadius: "var(--radius-lg)", background: "var(--bg-elevated)", height: "100%" }}>{body}</div>
      </div>
    );
  }
  return (
    <div className="card reveal" data-delay={i * 70} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={Object.assign({ borderColor: hover ? "var(--line-strong-dark)" : "var(--line-on-dark)", boxShadow: hover ? "var(--shadow-glow)" : "none" }, lift)}>{body}</div>
  );
}

function PricingTiers() {
  return (
    <section className="sec" style={{ paddingTop: 56 }}>
      <div className="wrap">
        <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20, alignItems: "stretch" }}>
          {TIERS.map((t, i) => <TierCard key={t.name} t={t} i={i} />)}
        </div>
        <p className="reveal" style={{ textAlign: "center", fontSize: 14, color: "var(--fg-on-dark-3)", marginTop: 28 }}>
          All plans include unit-economics modeling, conversion tracking, and a no-lock-in monthly agreement.
        </p>
      </div>
    </section>
  );
}

function CompareTable() {
  const cell = (v) => {
    if (v === "•") return <Icon name="check" size={18} style={{ color: "var(--auto-violet)" }} />;
    if (v === "—") return <span style={{ color: "var(--fg-on-dark-3)" }}>—</span>;
    return <span style={{ fontSize: 14, color: "var(--fg-on-dark-1)" }}>{v}</span>;
  };
  return (
    <section className="sec" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div className="reveal" style={{ textAlign: "center", marginBottom: 44 }}>
          <Overline grad>Compare</Overline>
          <h2 style={{ fontWeight: 300, fontSize: "clamp(1.9rem,3vw,2.5rem)", lineHeight: 1.14, letterSpacing: "-0.02em", margin: "16px auto 0", maxWidth: 540 }}>What's in each plan.</h2>
        </div>
        <div className="reveal card" style={{ overflow: "hidden", padding: 0 }}>
          <div className="compare-table">
            <div className="compare-row compare-head">
              <div>Feature</div>
              <div>Launch</div>
              <div style={{ color: "var(--fg-on-dark-1)" }}>Growth</div>
              <div>Scale</div>
            </div>
            {COMPARE.map((row, i) => (
              <div className="compare-row" key={i} style={{ borderTop: "1px solid var(--line-on-dark)" }}>
                <div style={{ fontSize: 14.5, color: "var(--fg-on-dark-2)", textAlign: "left" }}>{row[0]}</div>
                <div>{cell(row[1])}</div>
                <div style={{ background: "rgba(135,132,253,0.06)" }}>{cell(row[2])}</div>
                <div>{cell(row[3])}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const PRICING_FAQ = [
  { q: "Is there a long-term contract?", a: "No. We work on a no-lock-in monthly agreement. We'd rather earn your business with results every month than hold you to a year-long contract." },
  { q: "Is ad spend included in the price?", a: "No — the prices above are our management fee. Your ad spend goes directly to the platforms (Google, Meta, etc.). We'll recommend a spend level during your strategy session and you keep full control of the budget." },
  { q: "Do you require a minimum ad budget?", a: "There's no hard minimum, though paid channels tend to perform best at $10k+/month in media. If paid isn't the right first move, we'll tell you and lead with SEO or automation instead." },
  { q: "Can we change plans as we grow?", a: "Absolutely. Most clients start focused and expand as channels prove out. You can move between plans month to month as your needs change." },
];

function PricingPage() {
  useReveal();
  return (
    <main>
      <PricingHero />
      <PricingTiers />
      <CompareTable />
      <FaqSection items={PRICING_FAQ} />
      <CtaBanner title="Not sure which plan fits?" sub="Book a free strategy session, we'll scope the right plan to your goals and budget." primary="Book a Call" secondary="Start a Project" />
    </main>
  );
}

Object.assign(window, { PricingPage });