const WD_BUILD_TIERS = [
{
  name: "Starter",
  price: "$400",
  note: "one-time build fee",
  then: "Hosting from $35/mo",
  blurb: "A single-page site that gets you online and looking legit. Perfect for sole traders.",
  features: ["One-page scrolling website", "All key sections — home, about, services, contact", "Tap-to-call button", "Mobile-first design", "Contact form + Google Business setup", "1 round of revisions", "1 week turnaround"],
  cta: "Start with Starter",
  featured: false
},
{
  name: "Foundation",
  price: "$750",
  note: "one-time build fee",
  then: "Hosting from $35/mo",
  blurb: "A clean, well-built site for service businesses ready to look the part (perfect for tradies).",
  features: ["Up-to 5-page website", "Mobile-first design", "Project gallery/portfolio to showcase your work", "Contact form + Google Business setup", "Basic on-page SEO", "Copywriting for every page", "1 round of revisions", "2 week turnaround"],
  cta: "Start with Foundation",
  featured: true
},
{
  name: "Foundation Plus",
  price: "$1,250",
  note: "one-time build fee",
  then: "Hosting from $35/mo",
  blurb: "Built to showcase your work, convert visitors, and win bigger jobs.",
  features: ["Up to 8 pages, custom layout", "Mobile-first design", "Project gallery/portfolio to showcase your work", "Contact form + Google Business setup", "Advanced local SEO", "Copywriting for every page", "Google Reviews pulled live onto your site", "Custom icons & graphics to match your brand", "2 rounds of revisions", "30 days of free tweaks after launch", "2-4 week turnaround"],
  cta: "Start with Plus",
  featured: false
}];


const WD_CARE_TIERS = [
{
  name: "Essential Care",
  price: "$35",
  note: "/mo",
  blurb: "Set it and forget it. Your site kept live, fast and secure.",
  features: ["Managed hosting on enterprise infrastructure", "SSL certificate & DDoS protection", "Automatic backups", "Uptime monitoring", "A local person monitoring your website"],
  cta: "Keep mine running",
  featured: false
},
{
  name: "Standard Care",
  price: "$70",
  note: "/mo",
  blurb: "For when your work changes and your site needs to keep up.",
  features: ["Everything in Essential Care", "Up to 1 hour of content updates each month including:", "sub:Adding/removing text & photos", "sub:Updating prices or service listings", "sub:Adding new projects to the gallery", "sub:Swapping testimonials or reviews", "sub:Updating hours, contact details or service areas", "sub:Seasonal changes & banners", "sub:Adding or updating team member profiles", "sub:Updating certifications & association badges", "sub:Posting a news item or announcement", "sub:Minor layout tweaks", "Priority response"],
  cta: "Stay looked after",
  featured: true
},
{
  name: "Priority Care",
  price: "$130",
  note: "/mo",
  blurb: "For businesses on the grow.",
  features: ["Everything in Standard Care", "Up to 3 hours of updates each month including:", "sub:Adding/removing text & photos", "sub:Updating prices or service listings", "sub:Adding new projects to the gallery", "sub:Swapping testimonials or reviews", "sub:Updating hours, contact details or service areas", "sub:Seasonal changes & banners", "sub:Adding or updating team member profiles", "sub:Updating certifications & association badges", "sub:Posting a news item or announcement", "sub:Minor layout tweaks", "First-in-line support"],
  cta: "Go Priority",
  featured: false
}];


const WD_OFFERS = [
{
  num: "01",
  title: "Custom-built, not templated",
  body: "Every site is custom-built to fit your business — fast, clean, and made to do a job, not chase trends.",
  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="4" width="18" height="14" rx="2" /><path d="M3 10h18" /><path d="M8 14h3" /></svg>
},
{
  num: "02",
  title: "Mobile-first design",
  body: "Over 70% of visitors land on mobile. We design for thumbs first, then scale up to desktop — never the other way around.",
  icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="6" y="2" width="12" height="20" rx="2.5" /><line x1="12" y1="18" x2="12" y2="18" /></svg>
},
{
  num: "03",
  title: "Built for conversion",
  body: "Every page has a job. Clear hierarchy, sharp copy, and CTAs that actually get clicked. No more bouncing visitors.",
  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: "On-page SEO",
  body: "Clean structure, fast loads, proper meta — the technical foundation Google needs to actually rank your pages.",
  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: "05",
  title: "Copywriting",
  body: "Words that read like a person wrote them. We turn what makes your business special into pages that sell, not stall.",
  icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M4 7h16M4 12h16M4 17h10" /></svg>
},
{
  num: "06",
  title: "Hosting & care plans",
  body: "Hosting, SSL, monthly updates and content swaps — handled. Keep your site fresh without lifting a finger.",
  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 22s8-4 8-12V5l-8-3-8 3v5c0 8 8 12 8 12z" /></svg>
}];


const WD_PROCESS = [
{ num: "Step 01", title: "Get in touch", body: "Tell us about your business and what you're looking for - we'll take it from there." },
{ num: "Step 02", title: "Design & build", body: "With your branding, colours, and direction locked in, we get to work. You'll review as we go so the final result feels exactly like yours." },
{ num: "Step 03", title: "Launch & go live!", body: "Once you're happy and everything's signed off, we push it live. Your site is out in the world and working for you." }];


function WebDesignApp() {
  return (
    <div>
      <SPNav activeService="web" />

      {/* What's included */}
      <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> Web Design</div>
              <h2 className="sp-h2">Everything a small business needs to <em>look the part.</em></h2>
            </div>
            <p className="sp-lede"></p>
          </div>
        </div>
      </section>
      <section className="sp-section">
        <div className="sp-inner">
          <div className="sp-offer-grid">
            {WD_OFFERS.map((it, i) => <SPOfferCard key={i} item={it} />)}
          </div>
        </div>
      </section>

      {/* Pricing — Web Design */}
      <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> Website Design packages</div>
            <h2 className="sp-h2">Pick your build. <em>We handle the rest.</em></h2>
            <p className="sp-lede" style={{ margin: "20px auto 0" }}>One time build fee, then a simple monthly plan to keep it live and looked after.</p>
          </div>
          <div className="sp-pricing-grid">
            {WD_BUILD_TIERS.map((tier, i) => <SPPriceCard key={i} tier={tier} />)}
          </div>
          <p className="sp-price-line">Every build includes your first month of care free.</p>
        </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> Process</div>
              <h2 className="sp-h2">Three steps. <em>No mysteries.</em></h2>
            </div>
            <p className="sp-lede"></p>
          </div>
          <div className="sp-process-grid">
            {WD_PROCESS.map((s, i) => <SPProcessStep key={i} step={s} />)}
          </div>
        </div>
      </section>

      {/* Pricing — Web Management */}
      <section id="management" 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> Web Hosting packages</div>
            <h2 className="sp-h2">Then we <em>keep it running.</em></h2>
            <p className="sp-lede" style={{ margin: "20px auto 0" }}>Hosting, security and a local person you can actually talk to — so you never have to worry about your website again.</p>
          </div>
          <div className="sp-pricing-grid">
            {WD_CARE_TIERS.map((tier, i) => <SPPriceCard key={i} tier={tier} />)}
          </div>
          <p className="sp-price-line">Save two months — pay annually.</p>
          <p className="sp-price-footnote">All prices NZD, excl. GST.</p>
        </div>
      </section>

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

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