const MK_TIERS = [
{
  name: "SEO Starter",
  price: "$500",
  note: "/ month",
  blurb: "Slow-burn organic growth. Best for local businesses competing on a few core search terms.",
  features: ["Keyword strategy + monthly tuning", "On-page SEO across key pages", "Google Business optimisation", "Backlink outreach", "Monthly report + 30-min review"],
  cta: "Start with SEO",
  featured: false
},
{
  name: "Paid Ads",
  price: "$100",
  note: "/ week + ad spend",
  blurb: "Capture demand from people actively searching. Lead-quality tracking, not vanity clicks.",
  features: ["Google + Meta campaigns", "Conversion tracking setup", "Creative testing (static + reels)", "Lookalike & remarketing audiences", "Monthly tuning + reporting", "Real-time dashboard"],
  cta: "Start with Ads",
  featured: true
}];


const MK_OFFERS = [
{
  num: "01",
  title: "Google Search Ads",
  body: "Capture people actively searching for what you do. Tight match types, conversion tracking, monthly tuning. No wasted budget.",
  icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7" /><line x1="21" y1="21" x2="16" y2="16" /></svg>
},
{
  num: "02",
  title: "Meta Ads (Facebook & Instagram)",
  body: "Creative-first campaigns built around your offer, not the algorithm. Static + reels, lookalikes, remarketing, and real testing.",
  icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" /><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /><line x1="17.5" y1="6.5" x2="17.51" y2="6.5" /></svg>
},
{
  num: "03",
  title: "SEO strategy",
  body: "Google SEO so your best pages draw traffic over the next 12 months — not the next 12 days. Built on real keyword research.",
  icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 17l6-6 4 4 8-8" /><path d="M21 7v5h-5" /></svg>
},
{
  num: "04",
  title: "Conversion tracking",
  body: "Calls, form submissions, bookings, sales — all wired to GA4 and your ad accounts. So the numbers in your dashboard mean something.",
  icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M2 12a10 10 0 1 0 10-10" /><path d="M12 2v10l8 4" /></svg>
},
{
  num: "05",
  title: "Google Business",
  body: "Map pack, reviews, photos, posts. The fastest win for local businesses — and the one most agencies forget about.",
  icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 21s-7-7.5-7-12a7 7 0 1 1 14 0c0 4.5-7 12-7 12z" /><circle cx="12" cy="9" r="2.5" /></svg>
},
{
  num: "06",
  title: "Reporting that talks",
  body: "One dashboard. Five numbers that matter. A monthly call to talk about what to change next. No jargon, no fluff.",
  icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M8 17V9M12 17v-5M16 17v-3" /></svg>
}];


const MK_PROCESS = [
{ num: "Step 01", title: "Audit & strategy", body: "We pull data from your site, ad accounts, GA4, and Google Business. Then a clear 90-day plan: channels, keywords, audiences, and what we expect each to return." },
{ num: "Step 02", title: "Launch", body: "We build the campaigns, write the copy, design the creative, and wire up tracking. You sign off; we go live." },
{ num: "Step 03", title: "Tune monthly", body: "Real reporting, real meetings, real tweaks. Cost-per-lead drops, ROAS climbs. We earn the retainer." }];


function MarketingApp() {
  return (
    <div>
      <SPNav activeService="mkt" />

      {/* Offers */}
      <section className="sp-section sp-head-only">
        <div className="sp-inner">
          <div className="sp-section-head">
            <div>
              <div className="sp-eyebrow"><span className="sp-eyebrow-dot"></span> Marketing &amp; SEO</div>
              <h2 className="sp-h2">Marketing that <em>earns its keep.</em></h2>
            </div>
            <p className="sp-lede"></p>
          </div>
        </div>
      </section>
      <section className="sp-section">
        <div className="sp-inner">
          <div className="sp-offer-grid">
            {MK_OFFERS.map((it, i) => <SPOfferCard key={i} item={it} />)}
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section id="pricing" className="sp-section sp-section-alt">
        <div className="sp-inner">
          <div className="sp-section-head-stacked">
            <div className="sp-eyebrow" style={{ justifyContent: "center" }}><span className="sp-eyebrow-dot"></span> Marketing &amp; SEO packages</div>
            <h2 className="sp-h2">Retainers. <em>No lock-ins.</em></h2>
            <p className="sp-lede" style={{ margin: "20px auto 0" }}>Month-to-month. Ad spend is paid directly to Google / Meta — we don't mark it up.</p>
          </div>
          <div className="sp-pricing-grid cols-2">
            {MK_TIERS.map((tier, i) => <SPPriceCard key={i} tier={tier} />)}
          </div>
        </div>
      </section>

      {/* Process */}
      <section className="sp-section">
        <div className="sp-inner">
          <div className="sp-section-head">
            <div>
              <div className="sp-eyebrow"><span className="sp-eyebrow-dot"></span> How it runs</div>
              <h2 className="sp-h2">Three steps. <em>One funnel.</em></h2>
            </div>
            <p className="sp-lede">We don't disappear after launch. The work is in the monthly tuning — that's where the cost-per-lead actually drops.</p>
          </div>
          <div className="sp-process-grid">
            {MK_PROCESS.map((s, i) => <SPProcessStep key={i} step={s} />)}
          </div>
        </div>
      </section>

      <SPCTA />
      <SPFooter />
    </div>);
}

ReactDOM.createRoot(document.getElementById('root')).render(<MarketingApp />);