// ============================================================
// autoclient.io — additional service pages (config-driven)
// SEO · Lead Generation · Automation & AI · Paid Social
// Composes the reusable building blocks from services.jsx / email.jsx
// ============================================================

function ServicePage({ cfg }) {
  useReveal();
  return (
    <main>
      <PageHero overline={cfg.overline} title={cfg.title} sub={cfg.sub} primary={cfg.primary || "Start Now"} secondary={cfg.secondary || "Book a Call"} />
      {cfg.grid && <TypeGrid overline={cfg.grid.overline} title={cfg.grid.title} sub={cfg.grid.sub} cards={cfg.grid.cards} cols={cfg.grid.cols || 4} />}
      {cfg.diff && <DiffBand />}
      {cfg.value && <ValueProps {...cfg.value} />}
      {cfg.value2 && <ValueProps {...cfg.value2} />}
      {cfg.platforms && <PlatformGrid items={cfg.platforms} overline={cfg.platformsOverline} title={cfg.platformsTitle} />}
      {cfg.steps && <ProcessTimeline steps={cfg.steps} title={cfg.stepsTitle} overline={cfg.stepsOverline} />}
      <FaqSection items={cfg.faq || SERVICE_FAQ} />
      <CtaBanner title={cfg.cta.title} sub={cfg.cta.sub} primary={cfg.cta.primary || cfg.primary || "Start Now"} secondary={cfg.cta.secondary || "Book a Call"} />
    </main>
  );
}

/* ============================== SEO ============================== */
const SEO_CFG = {
  overline: "Advanced SEO",
  title: 'Advanced SEO that<br/><span class="gt" style="font-weight:300">dominates search.</span>',
  sub: "Technical, content, and local SEO that compounds month over month, so you rank for the searches your next clients are already making.",
  grid: {
    overline: "Specializations", title: "SEO built for your vertical.",
    sub: "Search behavior differs by industry. We bring playbooks proven in the verticals where ranking is hardest, and most valuable.",
    cols: 3,
    cards: [
      { icon: "stethoscope", name: "Healthcare SEO", d: "Rank for procedures and conditions while staying compliant and credible." },
      { icon: "scale", name: "Law Firm SEO", d: "Win practice-area and local searches that signed cases actually come from." },
      { icon: "shopping-cart", name: "Ecommerce SEO", d: "Category, product, and content SEO that captures high-intent buyers at scale." },
      { icon: "gavel", name: "Criminal Defense SEO", d: "Dominate urgent, high-value defense searches in your jurisdiction." },
      { icon: "code-2", name: "Technical SEO", d: "Site speed, crawlability, schema, and Core Web Vitals, the foundation that makes content rank." },
      { icon: "map-pin", name: "Local SEO", d: "Own the map pack with Google Business Profile, citations, and review velocity." },
    ],
  },
  value: {
    overline: "On-page", title: "On-page, off-page, and content, handled.",
    body: "Ranking isn't one lever. We work all three together so each reinforces the others, and report against the searches that drive revenue.",
    points: ["Technical audits that fix what's holding you back", "Content engine targeting high-intent keywords", "Authority building through earned, relevant links", "Local signals tuned for the map pack"],
    hue: "violet", label: "Organic ▲",
    img: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1200&q=80",
    imgAlt: "Analytics dashboard showing organic traffic growth on a laptop",
  },
  steps: [
    { t: "Audit", d: "Full technical, content, and competitor audit to find the fastest path to page one." },
    { t: "Strategy", d: "Keyword and content roadmap mapped to your highest-value searches and buyer intent." },
    { t: "Execute", d: "On-page fixes, new content, technical work, and authority building, shipped continuously." },
    { t: "Optimize", d: "Rankings, traffic, and conversions tracked in a live dashboard, then iterated every month." },
  ],
  stepsTitle: "A clear path from invisible to inevitable.",
  faq: [
    { q: "How long until we see SEO results?", a: "Technical wins can move rankings in weeks; content and authority compound over 3–6 months. We set realistic milestones up front and report progress against them every month." },
    { q: "Do you do local SEO and Google Business Profile?", a: "Yes — local SEO is a core specialization. We optimize your Google Business Profile, build citations, and drive review velocity to win the map pack in your service area." },
    { q: "Will you write the content or do we?", a: "Either. We have a content engine that researches, writes, and optimizes for you — or we'll create briefs and edit your team's drafts. Whatever moves fastest for your business." },
    { q: "How do you measure SEO success?", a: "Rankings matter, but we report against organic traffic, qualified leads, and revenue influenced — not vanity keyword counts. You get a live dashboard from day one." },
  ],
  cta: { title: "Ready to climb the rankings?", sub: "Get a free SEO audit with a prioritized roadmap and projected timeline." },
};
function SeoPage() { return <ServicePage cfg={SEO_CFG} />; }

/* ========================= LEAD GENERATION ========================= */
const LEADGEN_CFG = {
  overline: "Lead Generation",
  title: 'Lead generation that<br/><span class="gt" style="font-weight:300">fills your pipeline.</span>',
  sub: "Full-funnel capture, scoring, and routing — so your sales team only ever talks to people who are ready to buy.",
  grid: {
    overline: "What we build", title: "Every part of the funnel.",
    cols: 3,
    cards: [
      { icon: "layout-template", name: "Landing Pages & Funnels", d: "High-converting pages built and tested to turn traffic into qualified leads." },
      { icon: "gift", name: "Lead Magnets", d: "Guides, calculators, and offers that earn the opt-in worth following up." },
      { icon: "list-checks", name: "Form & Quiz Capture", d: "Smart, low-friction capture that qualifies as it collects." },
      { icon: "gauge", name: "Lead Scoring", d: "AI scores every lead on fit and intent so sales prioritizes the hottest ones." },
      { icon: "route", name: "CRM Routing", d: "Leads flow instantly to the right rep with full context attached." },
      { icon: "repeat", name: "Nurture Sequences", d: "Automated email and SMS that warms the not-yet-ready until they are." },
    ],
  },
  value: {
    overline: "From click to client", title: "Qualified leads, not just form fills.",
    body: "Volume is easy; quality is the game. We engineer the whole path so what reaches your team is ready to convert — and everything is measured to cost per signed client.",
    points: ["Cost per qualified lead, tracked end to end", "Instant routing so no lead goes cold", "AI scoring that focuses sales on closers", "Nurture that recovers the leads others lose"],
    hue: "purple", label: "CPL ↓",
    img: "https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=1200&q=80",
    imgAlt: "Two business people closing a deal with a handshake",
  },
  diff: true,
  steps: [
    { t: "Audit", d: "We map your funnel and find where leads leak, stall, or go unworked." },
    { t: "Strategy", d: "Offer, capture, scoring, and routing plan tied to your unit economics." },
    { t: "Build", d: "Pages, forms, automations, and CRM wiring shipped and tested live." },
    { t: "Optimize", d: "Continuous testing on offers and flows to drive cost per client down." },
  ],
  faq: SERVICE_FAQ,
  cta: { title: "Ready to fill your pipeline?", sub: "Get a free funnel teardown with the three fastest wins for your business." },
};
function LeadGenPage() { return <ServicePage cfg={LEADGEN_CFG} />; }

/* ========================= AUTOMATION & AI ========================= */
const AUTOMATION_CFG = {
  overline: "Automation & AI",
  title: 'Your CRM on<br/><span class="gt" style="font-weight:300">autopilot.</span>',
  sub: "AI agents handle the follow-up, nurturing, scheduling, and reporting that eats your team's time — so growth compounds without new headcount.",
  grid: {
    overline: "What we automate", title: "The busywork, gone.",
    sub: "We deploy AI agents and workflows across your stack so the repetitive, revenue-critical work happens instantly — day and night.",
    cols: 3,
    cards: [
      { icon: "bot", name: "AI Lead Follow-up", d: "Every lead gets an instant, on-brand response — in seconds, around the clock." },
      { icon: "calendar-check", name: "Appointment Scheduling", d: "AI books, confirms, and reschedules so your calendar fills without back-and-forth." },
      { icon: "workflow", name: "CRM Workflows", d: "Triggers, tagging, and handoffs that keep your pipeline clean automatically." },
      { icon: "sparkles", name: "Smart Nurture", d: "Behavior-triggered email and SMS that adapt to where each lead actually is." },
      { icon: "bar-chart-3", name: "AI Reporting", d: "Dashboards and digests that assemble themselves — no manual spreadsheets." },
      { icon: "database", name: "Data Enrichment", d: "Leads enriched and deduped on entry so every record is sales-ready." },
    ],
  },
  value: {
    overline: "Why it matters", title: "Humans set strategy. AI handles the grind.",
    body: "Your team is too valuable to spend on copy-paste follow-up and reporting. We automate the repetitive layer so your people focus on closing and creative.",
    points: ["Speed-to-lead measured in seconds, not hours", "No dropped follow-ups, ever", "Reporting that's always current", "Capacity to scale without hiring"],
    hue: "mix", label: "24 / 7",
    img: "https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1200&q=80",
    imgAlt: "Close-up of a computer chip powering automation",
  },
  diff: true,
  steps: [
    { t: "Map", d: "We map every manual, repetitive touchpoint across your sales and marketing." },
    { t: "Build", d: "AI agents and workflows built to your process — not a rigid template." },
    { t: "Connect", d: "Wired into your CRM, calendar, and channels so everything talks to everything." },
    { t: "Optimize", d: "We monitor, tune, and expand automations as your pipeline grows." },
  ],
  stepsOverline: "How we work",
  faq: [
    { q: "Will this replace my team?", a: "No — it frees them. AI handles the repetitive, time-sensitive grind (instant follow-up, scheduling, reporting) so your people spend their time on strategy, relationships, and closing." },
    { q: "What tools do you integrate with?", a: "Most modern CRMs and stacks — GoHighLevel, HubSpot, Salesforce, and the calendar, email, and SMS tools you already use. If it has an API, we can usually wire it in." },
    { q: "How is AI actually used?", a: "AI agents respond to leads instantly, qualify and score them, book appointments, adapt nurture based on behavior, and assemble reporting — the work that's too slow or too repetitive for humans to do well at scale." },
    { q: "Is it safe and on-brand?", a: "Yes. We configure tone, guardrails, and escalation rules so AI sounds like you and hands off to a human the moment a conversation needs one." },
  ],
  cta: { title: "Put your growth on autopilot.", sub: "Get a free automation audit — we'll map the workflows that'll save your team the most time." },
};
/* ---- AI Chatbot / Voice / Agents spotlight section ---- */
const AI_PRODUCTS = [
  {
    icon: "message-square",
    name: "AI Chatbot",
    tag: "Website & CRM",
    color: "#8784FD",
    headline: "Conversations that convert, around the clock.",
    body: "We deploy on-brand AI chatbots on your website and CRM that qualify leads, answer common questions, and book appointments the moment a visitor shows intent — no human required at 2 am.",
    pts: ["Trained on your services, FAQs, and brand voice", "Qualifies and routes leads instantly", "Books directly into your calendar", "Hands off to a human when the conversation needs one"],
  },
  {
    icon: "phone-call",
    name: "AI Voice",
    tag: "Inbound & Outbound",
    color: "#CC99FF",
    headline: "A phone rep that never drops a call.",
    body: "AI voice agents answer inbound calls, run outbound follow-up sequences, and handle appointment reminders with a natural, human-sounding voice — so no lead ever goes to voicemail.",
    pts: ["Answers inbound calls and qualifies callers in real time", "Outbound sequences for new leads and reactivation", "Automated appointment reminders and confirmations", "Full call transcripts and summaries in your CRM"],
  },
  {
    icon: "cpu",
    name: "AI Agents",
    tag: "Workflows & Automation",
    color: "#FF99CC",
    headline: "Autonomous agents that run your growth workflows.",
    body: "Beyond single tasks — we build multi-step AI agents that monitor your pipeline, trigger the right action at the right time, enrich records, and report back without anyone touching a keyboard.",
    pts: ["Multi-step workflows that run end to end without prompting", "Pipeline monitoring with automatic anomaly alerts", "Lead enrichment, scoring, and CRM hygiene on autopilot", "Daily digests and reports assembled without manual work"],
  },
];

function AiProductsSection() {
  return (
    <section className="sec">
      <div className="wrap-wide">
        <div className="reveal" style={{ maxWidth: 680, marginBottom: 56 }}>
          <Overline grad>AI-powered tools</Overline>
          <h2 style={{ fontWeight: 300, fontSize: "clamp(2rem,3.4vw,2.9rem)", lineHeight: 1.12, letterSpacing: "-0.02em", margin: "16px 0 0" }}>
            Chatbot, voice, and agents — <span className="gt" style={{ fontWeight: 300 }}>deployed as one system.</span>
          </h2>
          <p style={{ fontSize: 16.5, lineHeight: 1.7, color: "var(--fg-on-dark-2)", margin: "18px 0 0", maxWidth: 560 }}>
            Each tool handles a different moment in the customer journey. Together they cover every channel your leads reach you on, 24 hours a day.
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          {AI_PRODUCTS.map((p, i) => (
            <div key={p.name} className="reveal card" data-delay={i * 70}
              style={{ padding: 0, overflow: "hidden", display: "grid", gridTemplateColumns: "280px 1fr", minHeight: 220 }}>
              <div style={{ background: p.color + "14", borderRight: "1px solid var(--line-on-dark)", padding: "36px 32px", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                <div>
                  <span style={{ width: 52, height: 52, borderRadius: 14, background: p.color + "22", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 20 }}>
                    <Icon name={p.icon} size={26} style={{ color: p.color }} />
                  </span>
                  <div style={{ fontWeight: 700, fontSize: 22, letterSpacing: "-0.01em" }}>{p.name}</div>
                  <div className="pill pill-outline" style={{ marginTop: 10, fontSize: 12, borderColor: p.color + "55", color: p.color, display: "inline-flex" }}>{p.tag}</div>
                </div>
                <div style={{ marginTop: 24, width: "100%", height: 3, borderRadius: 99, background: "linear-gradient(90deg," + p.color + ",transparent)" }} />
              </div>
              <div style={{ padding: "36px 36px" }}>
                <h3 style={{ fontWeight: 400, fontSize: "clamp(1.2rem,1.8vw,1.5rem)", lineHeight: 1.25, letterSpacing: "-0.015em", margin: "0 0 12px" }}>{p.headline}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.65, color: "var(--fg-on-dark-2)", margin: "0 0 22px", maxWidth: 520 }}>{p.body}</p>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px 24px" }}>
                  {p.pts.map((pt) => (
                    <div key={pt} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                      <span style={{ width: 20, height: 20, borderRadius: 99, flexShrink: 0, marginTop: 2, background: p.color + "22", color: p.color, display: "flex", alignItems: "center", justifyContent: "center" }}>
                        <Icon name="check" size={12} />
                      </span>
                      <span style={{ fontSize: 14, lineHeight: 1.5, color: "var(--fg-on-dark-1)" }}>{pt}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AutomationPage() {
  useReveal();
  return (
    <main>
      <PageHero overline={AUTOMATION_CFG.overline} title={AUTOMATION_CFG.title} sub={AUTOMATION_CFG.sub} primary="Book a Call" />
      <TypeGrid overline={AUTOMATION_CFG.grid.overline} title={AUTOMATION_CFG.grid.title} sub={AUTOMATION_CFG.grid.sub} cards={AUTOMATION_CFG.grid.cards} cols={3} />
      <AiProductsSection />
      <DiffBand />
      <ValueProps {...AUTOMATION_CFG.value} />
      <ProcessTimeline steps={AUTOMATION_CFG.steps} overline={AUTOMATION_CFG.stepsOverline} />
      <FaqSection items={AUTOMATION_CFG.faq} />
      <CtaBanner title={AUTOMATION_CFG.cta.title} sub={AUTOMATION_CFG.cta.sub} primary="Book a Call" />
    </main>
  );
}

/* ========================== PAID SOCIAL ========================== */
const PAIDSOCIAL_CFG = {
  overline: "Paid Social",
  title: 'Paid social that<br/><span class="gt" style="font-weight:300">scales profitably.</span>',
  sub: "Meta, TikTok, Snap, and more — creative-led campaigns optimized by AI to turn scrollers into signed clients.",
  grid: {
    overline: "Platforms we run", title: "Every feed your audience lives in.",
    sub: "We build, manage, and optimize paid social across the platforms that move your business — with creative engineered for each one.",
    cols: 3,
    cards: [
      { icon: "thumbs-up", name: "Meta Ads", d: "Facebook & Instagram demand-gen and retargeting at scale.", hash: "#/services/meta-ads" },
      { icon: "music", name: "TikTok Ads", d: "Native, creator-style campaigns that reach new audiences fast.", hash: "#/services/tiktok-ads" },
      { icon: "ghost", name: "Snapchat Ads", d: "Full-screen vertical reach to a hard-to-find younger audience.", hash: "#/services/snapchat-ads" },
      { icon: "camera", name: "Instagram Ads", d: "Feed, Stories, and Reels creative built to stop the scroll.", hash: "#/services/instagram-ads" },
      { icon: "clapperboard", name: "Creative Production", d: "Hooks, edits, and variations produced and tested continuously." },
      { icon: "target", name: "Retargeting", d: "Win back the warm audience that didn't convert the first time." },
    ],
  },
  value: {
    overline: "Why it works", title: "Creative-led, AI-optimized, revenue-measured.",
    body: "On social, the creative is the targeting. We produce volume, let AI find the winners, and scale spend only behind what's actually driving clients.",
    points: ["Continuous creative testing, not set-and-forget", "AI bidding that scales winners and cuts losers", "ROAS measured against signed revenue", "Full-funnel from cold reach to retargeting"],
    hue: "coral", label: "ROAS ▲",
    img: "https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=1200&q=80",
    imgAlt: "Group of friends laughing at content on their phones",
  },
  steps: [
    { t: "Audit", d: "We review past spend, creative, and audiences to find untapped angles." },
    { t: "Strategy", d: "Platform mix, creative concepts, and projected CPA — in days." },
    { t: "Launch", d: "Campaigns go live with AI testing creative, audiences, and bids 24/7." },
    { t: "Optimize", d: "Winning creative scales, the rest gets cut. Clients and revenue compound." },
  ],
  faq: SERVICE_FAQ,
  cta: { title: "Ready to scale paid social?", sub: "Get a free paid-social plan with creative angles and projected CPA." },
};
function PaidSocialPage() { return <ServicePage cfg={PAIDSOCIAL_CFG} />; }

Object.assign(window, { ServicePage, SeoPage, LeadGenPage, AutomationPage, PaidSocialPage });