// Long-form footer pages

const CONTENT_PAGES = {
  "free-site-audit": {
    navTitle: "Free site audit",
    eyebrow: "Free site audit",
    title: <>Find the gaps costing you calls, bookings, and map-pack visibility.</>,
    lead: "A focused 30-minute walkthrough of your current site, Google presence, and booking path. You leave with a plain-English punch list, even if we never work together.",
    primary: { label: "Book the audit", href: "#contact" },
    secondary: { label: "See our process", href: "#process" },
    panel: {
      label: "Live audit score",
      title: "What we check first",
      rows: [
        ["Mobile speed", "Core Web Vitals, image weight, tap targets"],
        ["Search visibility", "Maps ranking, service pages, metadata"],
        ["Conversion path", "Calls, forms, bookings, trust signals"],
        ["Brand signal", "First impression, photography, copy clarity"],
      ],
    },
    stats: [
      { value: "30 min", label: "live screenshare" },
      { value: "12 point", label: "local site review" },
      { value: "0 fluff", label: "just clear next steps" },
    ],
    highlightsTitle: "The audit is built around the way local customers actually choose.",
    highlightsLead: "We look at the moments that matter: how fast you load, how quickly visitors trust you, and whether Google understands exactly what you do.",
    highlights: [
      {
        title: "First-screen clarity",
        text: "We check whether a cold visitor can tell what you do, where you are, and how to book in the first five seconds.",
      },
      {
        title: "Google Business Profile",
        text: "Categories, services, reviews, photos, posts, and location signals get reviewed against your actual neighborhood competitors.",
      },
      {
        title: "Booking friction",
        text: "We walk the full path from search result to confirmed appointment and flag every click, redirect, or missing trust cue.",
      },
      {
        title: "Technical drag",
        text: "Speed, mobile layout, broken links, metadata, schema, analytics, and indexability all get a practical pass.",
      },
    ],
    stepsTitle: "What happens on the call",
    steps: [
      ["Map the goal", "We start with the service line, location, or booking problem you most want to fix."],
      ["Review the current site", "We inspect the homepage, key service pages, forms, calls, and mobile flow together."],
      ["Compare the local field", "We look at the competitors already winning search and note what Google is rewarding."],
      ["Leave with a punch list", "You get a ranked set of fixes: quick wins, bigger rebuild items, and what to ignore."],
    ],
    checklistTitle: "You will leave with",
    checklist: [
      "A prioritized repair list for your current website",
      "Specific Google Business Profile improvements",
      "A local SEO content map for the next 30 days",
      "Conversion fixes for calls, forms, and bookings",
      "A realistic read on whether you need a rebuild",
    ],
    asideTitle: "Good fit for",
    asideText: "Owners who know the site is underperforming but want a sharper diagnosis before spending on a redesign, ads, or SEO retainers.",
    ctaTitle: "Want us to look under the hood?",
    ctaText: "Send the URL and the service area you care about most. We will come prepared.",
    ctaLabel: "Book a free site audit",
  },

  "local-seo-guide": {
    navTitle: "Local SEO guide",
    eyebrow: "Local SEO guide",
    title: <>A practical local SEO guide for shops, clinics, and service businesses.</>,
    lead: "No jargon pile. This is the playbook we use to help neighborhood businesses show up in Maps, organic search, and AI answers when nearby customers are ready to act.",
    primary: { label: "Get an SEO audit", href: "#contact" },
    secondary: { label: "View packages", href: "#packages" },
    panel: {
      label: "Ranking signals",
      title: "The local stack",
      rows: [
        ["Proximity", "Your location and service area alignment"],
        ["Relevance", "Pages, categories, services, and schema"],
        ["Prominence", "Reviews, citations, links, and mentions"],
        ["Experience", "Speed, helpful content, and conversions"],
      ],
    },
    stats: [
      { value: "3 pack", label: "the map result that matters" },
      { value: "60 days", label: "typical early movement" },
      { value: "Monthly", label: "refresh cadence" },
    ],
    highlightsTitle: "The local SEO work that compounds.",
    highlightsLead: "Strong local search is less about tricks and more about making your business unmistakably clear to customers, Google, and AI engines.",
    highlights: [
      {
        title: "Build service pages",
        text: "Each high-value service needs a useful page with location context, proof, FAQs, and a clear booking action.",
      },
      {
        title: "Tune your profile",
        text: "Google Business Profile categories, services, photos, posts, and review responses should match how customers search.",
      },
      {
        title: "Earn local proof",
        text: "Reviews, neighborhood links, directory consistency, and partner mentions help search engines trust your place in the market.",
      },
      {
        title: "Structure the data",
        text: "LocalBusiness schema, service markup, clean headings, and consistent NAP data make your site easier to cite.",
      },
    ],
    stepsTitle: "A simple 30-day local SEO sprint",
    steps: [
      ["Week 1", "Fix the basics: metadata, headings, speed, indexation, GBP categories, services, and tracking."],
      ["Week 2", "Publish or rewrite the core service pages that map to your highest-value searches."],
      ["Week 3", "Add review prompts, local proof, FAQ schema, and citations across the places customers already check."],
      ["Week 4", "Measure map rank, calls, bookings, and search queries, then turn the winning pages into a cadence."],
    ],
    checklistTitle: "Use this checklist",
    checklist: [
      "One clear page for every major service and location",
      "Consistent name, address, and phone everywhere",
      "Fresh photos and posts on Google Business Profile",
      "Reviews requested after every successful visit",
      "Schema and FAQ content that answer real search questions",
    ],
    asideTitle: "How Barrage handles it",
    asideText: "We wire local SEO into the site build first, then keep it moving with monthly profile updates, content refreshes, review wiring, and ranking reports.",
    ctaTitle: "Need the guide turned into action?",
    ctaText: "We can audit the current setup and show you the fastest path to better local visibility.",
    ctaLabel: "Audit my local SEO",
  },

  "booking-integrations": {
    navTitle: "Booking integrations",
    eyebrow: "Booking integrations",
    title: <>Make booking feel like part of your site, not a detour.</>,
    lead: "We connect the scheduling, intake, payment, and reminder tools your business already runs on so visitors can move from interest to appointment without friction.",
    primary: { label: "Plan my booking flow", href: "#contact" },
    secondary: { label: "See care plans", href: "#care-plans" },
    panel: {
      label: "Common tools",
      title: "We integrate with",
      rows: [
        ["Service businesses", "Calendly, Acuity, Square Appointments"],
        ["Wellness and salons", "Mindbody, Fresha, Vagaro, Boulevard"],
        ["Clinics", "Jane, SimplePractice, Healthie, intake forms"],
        ["Restaurants and retail", "Toast, Shopify, waitlists, payments"],
      ],
    },
    stats: [
      { value: "1 tap", label: "from mobile CTA to schedule" },
      { value: "24/7", label: "self-serve booking path" },
      { value: "CRM", label: "handoff ready" },
    ],
    highlightsTitle: "The integration should support the way your team actually works.",
    highlightsLead: "A booking button is easy. A booking system that respects your schedule, services, staff, intake needs, and follow-up is the real work.",
    highlights: [
      {
        title: "Embedded scheduling",
        text: "Keep the booking flow visually connected to your site so visitors do not feel bounced to a random third party.",
      },
      {
        title: "Smart calls to action",
        text: "Sticky mobile buttons, service-specific booking links, click-to-call fallbacks, and emergency routing where needed.",
      },
      {
        title: "Intake and reminders",
        text: "Pre-visit forms, deposits, SMS reminders, confirmation emails, and calendar invites can all be wired into the flow.",
      },
      {
        title: "Tracking and attribution",
        text: "We tag booking starts and completions so you can see which pages, searches, and campaigns create appointments.",
      },
    ],
    stepsTitle: "How we wire it up",
    steps: [
      ["Inventory", "We document services, staff, calendars, locations, forms, payment rules, and current tool limitations."],
      ["Flow design", "We map the shortest path for each visitor type: new patient, returning client, consultation, pickup, or waitlist."],
      ["Implementation", "We embed or link the right booking surface, match the brand, and add analytics events."],
      ["QA and handoff", "We test mobile, desktop, reminders, staff notifications, and edge cases before launch."],
    ],
    checklistTitle: "Integration details we confirm",
    checklist: [
      "Which services can be booked online",
      "Which staff or locations should be selectable",
      "Whether deposits, intake forms, or waivers are required",
      "How cancellations and reschedules should work",
      "Where booking data should appear in analytics",
    ],
    asideTitle: "Already have a tool?",
    asideText: "Great. We usually keep the operational system you trust and make the website layer around it faster, clearer, and better tracked.",
    ctaTitle: "Have a booking flow that keeps leaking visitors?",
    ctaText: "We will map it, simplify it, and make sure every important action is measurable.",
    ctaLabel: "Fix my booking flow",
  },

  "care-plans": {
    navTitle: "Care plans",
    eyebrow: "Care plans",
    title: <>Keep the site healthy after launch without hiring a marketing department.</>,
    lead: "Hosting, edits, performance checks, SEO upkeep, review wiring, and conversion tuning on a month-to-month plan built for busy local owners.",
    primary: { label: "Choose a care plan", href: "#pricing" },
    secondary: { label: "Book a call", href: "#contact" },
    panel: {
      label: "Care coverage",
      title: "What stays handled",
      rows: [
        ["Site health", "Hosting, SSL, backups, uptime, speed checks"],
        ["Content edits", "Hours, staff, service, photo, and promo updates"],
        ["Local visibility", "GBP updates, SEO refreshes, review support"],
        ["Conversion tuning", "CTA tests, booking checks, analytics notes"],
      ],
    },
    stats: [
      { value: "Monthly", label: "site and search check-in" },
      { value: "48 hr", label: "typical edit turnaround" },
      { value: "No lock-in", label: "cancel anytime" },
    ],
    highlightsTitle: "A good website is a living system.",
    highlightsLead: "Hours change. Services change. Competitors move. Google shifts. Care plans make sure the site keeps earning its keep after the launch excitement fades.",
    highlights: [
      {
        title: "Maintenance without tickets everywhere",
        text: "Small edits, plugin-free upkeep, monitoring, backups, and security checks live in one predictable monthly lane.",
      },
      {
        title: "SEO that does not go stale",
        text: "We refresh key pages, add local proof, update Google Business Profile, and watch the search terms that drive calls.",
      },
      {
        title: "Review engine support",
        text: "Post-visit review asks, response guidance, homepage review feeds, and negative-review escalation keep reputation moving.",
      },
      {
        title: "Quarterly improvements",
        text: "We look for small conversion wins: better buttons, clearer pages, stronger photos, faster load times, and cleaner analytics.",
      },
    ],
    stepsTitle: "How care works month to month",
    steps: [
      ["Start with a baseline", "We confirm site health, rankings, analytics, content priorities, and access to the tools we maintain."],
      ["Handle the small edits", "You send changes as they come up. We batch, polish, and publish them without making you manage a queue."],
      ["Review the signals", "Each month we check traffic, calls, bookings, speed, forms, rankings, and profile activity."],
      ["Recommend the next move", "You get a short note with what changed, what we handled, and what deserves attention next."],
    ],
    checklistTitle: "Common care requests",
    checklist: [
      "Add a new service or promotion",
      "Swap photos, staff bios, pricing, or hours",
      "Publish seasonal landing pages",
      "Update Google Business Profile posts and services",
      "Investigate drops in calls, bookings, or rankings",
    ],
    asideTitle: "Built for owners",
    asideText: "You do not need to learn the CMS, debug hosting, chase plugin updates, or wonder if forms are broken. We keep the lights on and the funnel tuned.",
    ctaTitle: "Want the site looked after?",
    ctaText: "Pick the support level that matches how often your business changes.",
    ctaLabel: "Compare care plans",
  },

  process: {
    navTitle: "Process",
    eyebrow: "Our process",
    title: <>A fast, focused build process that gets local businesses live without drama.</>,
    lead: "Barrage projects move in clear weekly passes: strategy, design, build, launch, and post-launch tuning. You stay involved where your judgment matters and out of the weeds everywhere else.",
    primary: { label: "Start a project", href: "#contact" },
    secondary: { label: "See pricing", href: "#pricing" },
    panel: {
      label: "Typical timeline",
      title: "From kickoff to launch",
      rows: [
        ["Day 1", "Kickoff, access, goals, examples"],
        ["Days 2-5", "Copy, brand pass, homepage direction"],
        ["Week 2", "Page build, integrations, local SEO"],
        ["Week 3", "QA, launch, tracking, handoff"],
      ],
    },
    stats: [
      { value: "2-3 wks", label: "most local site launches" },
      { value: "1 owner", label: "clear point of contact" },
      { value: "90 days", label: "optional tuning window" },
    ],
    highlightsTitle: "Every step is designed to reduce owner homework.",
    highlightsLead: "We need your taste, your goals, and the truth about the business. We do not need you to become a designer, copywriter, SEO, or web developer.",
    highlights: [
      {
        title: "Strategy before screens",
        text: "We align on the customer, the offer, the neighborhoods, the services that matter, and what a win looks like.",
      },
      {
        title: "Design with real content",
        text: "No lorem ipsum. We write around your actual services, proof, photos, reviews, and booking needs from the start.",
      },
      {
        title: "Build and integrate",
        text: "Pages, responsive layouts, local SEO, analytics, booking tools, forms, review widgets, and launch details come together in one pass.",
      },
      {
        title: "Launch and tune",
        text: "After go-live, we watch speed, forms, search visibility, and early behavior so the first version can get sharper quickly.",
      },
    ],
    stepsTitle: "The five project phases",
    steps: [
      ["1. Kickoff", "We gather goals, access, competitors, offers, assets, and the decision criteria for the project."],
      ["2. Direction", "We create the structure, homepage direction, core copy, and brand pass so everyone can see the shape."],
      ["3. Build", "We produce the full site, wire integrations, add SEO foundations, and prepare launch infrastructure."],
      ["4. Polish", "We run edits, mobile QA, performance checks, booking tests, form tests, and content cleanup."],
      ["5. Launch", "We connect the domain, confirm analytics, submit search updates, and document what changed."],
    ],
    checklistTitle: "What we need from you",
    checklist: [
      "Access to your domain, current site, and Google Business Profile",
      "A point person who can approve direction quickly",
      "Photos, reviews, service details, and any must-keep copy",
      "Booking, form, payment, or CRM tools you already use",
      "Honest feedback when something does not sound like you",
    ],
    asideTitle: "Speed with standards",
    asideText: "Fast does not mean careless. It means fewer handoffs, sharper decisions, reusable systems, and a clear launch checklist.",
    ctaTitle: "Ready for a clean build?",
    ctaText: "Tell us what you run, where you serve, and what needs to improve first.",
    ctaLabel: "Start the process",
  },
};

function ContentPage({ page }) {
  return (
    <main className="content-page" id="top">
      <header className="content-hero shell">
        <div className="content-hero__copy">
          <a className="page-back" href="#top"><Icon.chevL /> Home</a>
          <span className="eyebrow"><span className="dot"/>{page.eyebrow}</span>
          <h1 className="display content-hero__title">{page.title}</h1>
          <p className="content-hero__lede">{page.lead}</p>
          <div className="content-hero__actions">
            <a className="btn btn--primary btn--lg" href={page.primary.href}>{page.primary.label} <Icon.arrow /></a>
            <a className="btn btn--ghost btn--lg" href={page.secondary.href}>{page.secondary.label}</a>
          </div>
        </div>

        <div className="content-hero__panel">
          <div className="panel-kicker">{page.panel.label}</div>
          <h2>{page.panel.title}</h2>
          <div className="panel-list">
            {page.panel.rows.map(([label, text]) => (
              <div className="panel-list__row" key={label}>
                <span>{label}</span>
                <p>{text}</p>
              </div>
            ))}
          </div>
        </div>
      </header>

      <section className="page-stats shell" aria-label={`${page.navTitle} highlights`}>
        <div className="page-stats__grid">
          {page.stats.map((stat) => (
            <div className="page-stat" key={stat.label}>
              <strong>{stat.value}</strong>
              <span>{stat.label}</span>
            </div>
          ))}
        </div>
      </section>

      <section className="section shell">
        <div className="page-section-head">
          <span className="eyebrow"><Icon.spark style={{width:13,height:13,color:"var(--accent)"}}/>The work</span>
          <h2 className="h2">{page.highlightsTitle}</h2>
          <p className="lede">{page.highlightsLead}</p>
        </div>
        <div className="page-card-grid">
          {page.highlights.map((item) => (
            <article className="page-card" key={item.title}>
              <span className="page-card__icon"><Icon.check /></span>
              <h3>{item.title}</h3>
              <p>{item.text}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="section shell section--tight">
        <div className="page-timeline">
          <div className="page-timeline__intro">
            <span className="eyebrow"><span className="dot"/>Sequence</span>
            <h2 className="h2 h2--sans">{page.stepsTitle}</h2>
          </div>
          <div className="page-timeline__list">
            {page.steps.map(([label, text], index) => (
              <div className="page-step" key={label}>
                <span className="page-step__num">{String(index + 1).padStart(2, "0")}</span>
                <div>
                  <h3>{label}</h3>
                  <p>{text}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section shell section--tight">
        <div className="page-split">
          <div>
            <span className="eyebrow"><Icon.bolt style={{width:14,height:14}}/>Details</span>
            <h2 className="h2">{page.checklistTitle}</h2>
            <ul className="page-checklist">
              {page.checklist.map((item) => (
                <li key={item}><Icon.check />{item}</li>
              ))}
            </ul>
          </div>
          <aside className="page-aside">
            <div className="kicker">Worth knowing</div>
            <h3>{page.asideTitle}</h3>
            <p>{page.asideText}</p>
          </aside>
        </div>
      </section>

      <section className="page-cta">
        <div className="page-cta__inner">
          <span className="eyebrow"><span className="dot"/>{page.navTitle}</span>
          <h2 className="h2">{page.ctaTitle}</h2>
          <p className="lede">{page.ctaText}</p>
          <a className="btn btn--primary btn--lg" href="#contact">{page.ctaLabel} <Icon.arrow /></a>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { CONTENT_PAGES, ContentPage });
