// Pricing section
function Pricing() {
  const [billing, setBilling] = React.useState("oneoff"); // oneoff | care

  const oneoff = [
    {
      name: "Storefront",
      desc: "For brand-new businesses that need a clean digital front door.",
      price: "$1499",
      per: "one-time",
      cta: "Start a project",
      features: [
        "5-page custom website",
        "Mobile-first design",
        "Google Business setup",
        "Basic local SEO",
        "Same week turnaround",
      ],
    },
    {
      name: "Studio",
      feature: true,
      desc: "Our most popular — for established shops ready to look the part.",
      price: "$2499",
      per: "one-time",
      cta: "Book a call",
      features: [
        "Up to 12 custom pages",
        "Full brand pass (logo, type, color)",
        "Online booking integration",
        "Advanced local SEO + schema",
        "Review automation wiring",
        "Copy by our writers",
        "Same week turnaround",
      ],
    },
    {
      name: "Flagship",
      desc: "For multi-location businesses and serious local players.",
      price: "$4999",
      per: "one-time",
      cta: "Talk to us",
      features: [
        "Unlimited pages, multi-location",
        "Custom CMS for staff edits",
        "Booking + payments integration",
        "Programmatic SEO pages",
        "Same week turnaround",
        "90-day post-launch tuning",
      ],
    },
  ];

  const care = [
    {
      name: "Light",
      desc: "Hosting + edits for businesses who just need the lights on.",
      price: "$95",
      per: "/month",
      cta: "Get started",
      features: [
        "Hosting + SSL + backups",
        "Up to 2 content edits / mo",
        "Uptime monitoring",
        "Email support",
      ],
    },
    {
      name: "Care",
      feature: true,
      desc: "Most clients pick this — we keep the site, SEO, and reviews moving.",
      price: "$320",
      per: "/month",
      cta: "Book a call",
      features: [
        "Everything in Light",
        "Unlimited small edits",
        "Monthly Google check-in",
        "Review request automation",
        "Quarterly SEO refresh",
        "Priority Slack channel",
      ],
    },
    {
      name: "Concierge",
      desc: "We're effectively your marketing team. Full ownership of the funnel.",
      price: "$1.2k",
      per: "/month",
      cta: "Talk to us",
      features: [
        "Everything in Care",
        "Monthly campaign + landing page",
        "Google + Meta ad management",
        "Monthly photography",
        "Direct line to the founders",
      ],
    },
  ];

  const plans = billing === "oneoff" ? oneoff : care;

  return (
    <section className="section shell" id="pricing">
      <div className="headed">
        <span className="eyebrow">$ &nbsp;Engagement</span>
        <h2 className="h2 h2--sans" style={{marginTop:18}}>Honest pricing,<br/>no annual contracts.</h2>
        <p className="lede" style={{margin:"18px auto 0"}}>
          Build the site once, keep it tuned forever. Or just build it — we don't mind.
        </p>
        <div className="pricing-toggle" role="tablist">
          <button aria-pressed={billing==="oneoff"} onClick={()=>setBilling("oneoff")}>Build the site</button>
          <button aria-pressed={billing==="care"} onClick={()=>setBilling("care")}>Keep it running</button>
        </div>
      </div>

      <div className="pricing">
        {plans.map((p) => (
          <div className={`plan ${p.feature ? "plan--feature" : ""}`} key={p.name}>
            <h3>{p.name}</h3>
            <p className="plan__desc">{p.desc}</p>
            <div className="plan__price">{p.price}<small>&nbsp;{p.per}</small></div>
            <a className={`btn ${p.feature ? "btn--invert" : "btn--primary"}`} href="#contact">{p.cta}</a>
            <ul className="plan__features">
              {p.features.map((f, i) => (
                <li key={i}><Icon.check />{f}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

function Packages() {
  const packages = [
    {
      key: "seo",
      icon: <Icon.search />,
      name: "SEO Package",
      desc: "Local + AI search optimization that keeps you in the answer when neighbors look — on Google, in Maps, and in AI Overviews.",
      price: "$450",
      per: "/mo",
      features: [
        "Monthly Google Business updates",
        "Schema + entity tuning for AI engines",
        "Local backlink building",
        "Quarterly ranking + visibility report",
      ],
    },
    {
      key: "social",
      icon: <Icon.chat />,
      name: "Social Media Content",
      desc: "Reels, photos, and captions on a steady cadence. Your feed stops being a chore and starts being a channel.",
      price: "$650",
      per: "/mo",
      features: [
        "12 posts/mo across IG + Facebook",
        "Remote content production every 6 weeks",
        "Caption writing + hashtag strategy",
        "Comment + DM management",
      ],
    },
    {
      key: "ads",
      icon: <Icon.bolt />,
      name: "Paid Ads",
      desc: "Google + Meta campaigns built to fill the appointment book this week, not next quarter.",
      price: "$550",
      per: "/mo + spend",
      features: [
        "Search + Performance Max campaigns",
        "Meta retargeting + lookalike audiences",
        "Landing pages built to convert",
        "Monthly creative refresh",
      ],
    },
    {
      key: "email",
      icon: <Icon.mail />,
      name: "Email Marketing",
      desc: "Newsletters and lifecycle automations that bring regulars back without you lifting a finger.",
      price: "$320",
      per: "/mo",
      features: [
        "Monthly newsletter writing + send",
        "Win-back + birthday automations",
        "Booking abandonment flow",
        "List growth wiring on the site",
      ],
    },
    {
      key: "reviews",
      icon: <Icon.star />,
      name: "Review Engine",
      desc: "Automated review asks after every visit, plus professional response writing to every star.",
      price: "$220",
      per: "/mo",
      features: [
        "Post-visit SMS + email asks",
        "Pro responses to every review",
        "Negative review escalation",
        "Auto-embedded on your homepage",
      ],
    },
  ];

  return (
    <section className="section shell" id="packages">
      <div className="headed">
        <span className="eyebrow"><Icon.spark style={{width:13,height:13,color:"var(--accent)"}}/>Add-ons & ongoing</span>
        <h2 className="h2" style={{marginTop:18}}>Pick the engines<br/>you want us to run.</h2>
        <p className="lede" style={{margin:"18px auto 0"}}>
          The build is just the launch. Stack any of these monthly packages onto a Care plan — or stand them up on their own. Month-to-month, cancel anytime.
        </p>
      </div>

      <div className="packages">
        {packages.map((p) => (
          <div className="package" key={p.key}>
            <span className="package__icon">{p.icon}</span>
            <h3 className="package__name">{p.name}</h3>
            <p className="package__desc">{p.desc}</p>
            <div className="package__price">{p.price}<small>{p.per}</small></div>
            <ul className="package__list">
              {p.features.map((f, i) => (
                <li key={i}><Icon.check />{f}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Pricing, Packages });