/* Tier page renderer — takes a tierId and renders the full page */

const TIER_DETAILS = {
  launch: {
    color: "var(--green-spring)",
    blobColor: "radial-gradient(circle, rgba(91,186,66,0.5), transparent 65%)",
    features: [
      { t: "Brand-true design", d: "We use your existing visual identity (or build one), so your site looks like you — not a template." },
      { t: "Fast & mobile-first", d: "Builds load in under 2 seconds on a 4G phone. Most of your customers are looking on mobile." },
      { t: "Real copywriting", d: "We write the words too. Plain English, focused on what your customers actually want to know." },
      { t: "Found on Google", d: "On-page SEO baked in. Schema, sitemaps, fast hosting, the lot." },
      { t: "Photography help", d: "We'll either shoot, source, or art-direct photos that don't feel like stock." },
      { t: "Owned by you", d: "You get all the keys: domain, hosting, code, content. No platform lock-in." },
    ],
    timeline: [
      { n: "01", when: "Week 0", t: "Kickoff call", d: "20 minutes to understand your business, your customers, and what success looks like. We leave with everything we need to start." },
      { n: "02", when: "Week 1", t: "Wireframes & content", d: "We sketch the structure, write first-draft copy, and gather assets. You review on a working preview link, not a PDF." },
      { n: "03", when: "Week 2", t: "Design & build", d: "We build the real thing — designed in the browser. You see every screen as it comes together, with daily check-ins." },
      { n: "04", when: "Week 3", t: "Launch & handover", d: "We launch with a smooth DNS cutover, walk you through how to update content, and stick around for two weeks of free tweaks." },
    ],
    pricing: [
      {
        name: "Launch · Essentials",
        price: "£1,800",
        sub: "One-time. Hosting included.",
        features: [
          "Up to 5 pages",
          "Custom design (no templates)",
          "Mobile-first, fast load",
          "On-page SEO + Google setup",
          "Copywriting included",
          "2 weeks free aftercare",
        ],
      },
      {
        name: "Launch · Plus",
        price: "£2,800",
        sub: "One-time. Hosting included.",
        featured: true,
        features: [
          "Up to 10 pages",
          "Photography session (½ day)",
          "Booking or contact integration",
          "Blog / news section",
          "Local SEO for 3 nearby towns",
          "4 weeks free aftercare",
        ],
      },
    ],
    faqs: [
      ["How long does it take?", "Most Launch projects go live in 2–3 weeks. The bottleneck is usually getting copy and photos approved, not us building."],
      ["Do I need to write copy?", "Nope. We do that for you. You give us the facts, we make them sing."],
      ["What if I want to update it myself later?", "We hand over a simple CMS so you can edit text and images without learning anything technical."],
      ["Do you do hosting?", "We do — fast, secure hosting on Vercel or Cloudflare. You can move it whenever, no lock-in."],
    ],
  },
  grow: {
    color: "var(--green)",
    blobColor: "radial-gradient(circle, rgba(30,154,77,0.5), transparent 65%)",
    features: [
      { t: "Lead capture that works", d: "Forms that get filled in. We test, measure, and tune until it pulls its weight." },
      { t: "WhatsApp callback", d: "Customers tap one button, message lands in your pocket. Same response speed as your competitors? No — faster." },
      { t: "Online booking", d: "Calendars, deposits, reminders. Stops no-shows in their tracks." },
      { t: "Smart follow-up", d: "Automated emails and texts so leads don't go cold over the weekend." },
      { t: "Reporting dashboard", d: "Where leads come from, what they cost, what's converting. No more guessing." },
      { t: "Reviews flywheel", d: "Auto-asks happy customers for Google reviews at the right moment." },
    ],
    timeline: [
      { n: "01", when: "Week 0", t: "Find the leaks", d: "We audit your current site/funnel and find where leads are dropping off. Often the fixes are obvious once you see them." },
      { n: "02", when: "Week 1–2", t: "Build the funnel", d: "Lead forms, WhatsApp callbacks, booking flows. Everything wired up to your phone/email/calendar." },
      { n: "03", when: "Week 3", t: "Plug in follow-up", d: "Automated sequences for when leads don't convert immediately. We write these too." },
      { n: "04", when: "Ongoing", t: "Measure & tune", d: "Monthly check-in. We look at the numbers, you tell us what's selling, we sharpen the funnel." },
    ],
    pricing: [
      {
        name: "Grow · Funnel",
        price: "£3,200",
        sub: "One-time project fee.",
        features: [
          "Lead funnel build",
          "WhatsApp + email capture",
          "Booking integration",
          "Follow-up automations",
          "Conversion reporting",
          "4 weeks aftercare",
        ],
      },
      {
        name: "Grow · Engine",
        price: "£4,800",
        sub: "One-time project fee.",
        featured: true,
        features: [
          "Everything in Funnel",
          "A/B testing programme",
          "Paid ads landing pages",
          "Monthly performance review",
          "Reviews automation",
          "Priority WhatsApp support",
        ],
      },
    ],
    faqs: [
      ["Will this work for my industry?", "If you sell to humans, it'll work. We've done it for plumbers, florists, accountants, dance schools. Different shape, same principles."],
      ["How quickly do leads start coming?", "First leads usually within a week of going live. Volume builds over 60–90 days as SEO kicks in."],
      ["Can it work with my existing CRM?", "Almost certainly. We integrate with Zoho, HubSpot, Pipedrive, Notion, or just a tidy spreadsheet."],
      ["Do you do paid ads?", "We build the landing pages and tracking. For ad management we partner with specialists we trust."],
    ],
  },
  scale: {
    color: "var(--navy)",
    blobColor: "radial-gradient(circle, rgba(27,63,115,0.45), transparent 65%)",
    features: [
      { t: "Bespoke to your workflow", d: "We don't bend you to fit the software. We watch how you work and build something that fits that." },
      { t: "Invoicing & quoting", d: "Branded PDFs, send via email or WhatsApp, paid via Stripe link. Reconciles to Xero." },
      { t: "Scheduling & jobs", d: "Drag-and-drop calendar for staff, customers see only what they should." },
      { t: "Customer portal", d: "Customers log in to see their invoices, bookings, files. Removes 80% of \"can you resend that?\" emails." },
      { t: "Roles & permissions", d: "Staff see what they need. Office see everything. Customers see their stuff." },
      { t: "Plays nicely", d: "Talks to Xero, Stripe, Calendly, Google, Zoho — whatever you already use." },
    ],
    timeline: [
      { n: "01", when: "Week 0–1", t: "Watch & map", d: "We sit with your team for a couple of days. We map every workflow, every spreadsheet, every \"oh and then we have to...\" — you'd be amazed how much there is." },
      { n: "02", when: "Week 2–4", t: "Prototype", d: "Working prototype of the core admin. You click around, break things, tell us what's wrong. We iterate fast." },
      { n: "03", when: "Week 5–10", t: "Build & migrate", d: "We build the rest, migrate your data, and train your team. Two systems run in parallel for a week so nothing slips." },
      { n: "04", when: "Ongoing", t: "Look after", d: "Monthly retainer for new features, fixes, and tweaks. Your system grows as your business does." },
    ],
    pricing: [
      {
        name: "Scale · Foundation",
        price: "£6,500",
        sub: "One-time build. Aftercare available.",
        features: [
          "Core admin system",
          "Up to 3 modules (e.g. invoicing, students, scheduling)",
          "Data migration",
          "Team training",
          "Xero + Stripe integration",
          "8 weeks free tweaks",
        ],
      },
      {
        name: "Scale · Full",
        price: "£12,000+",
        sub: "Scoped per business.",
        featured: true,
        features: [
          "Everything in Foundation",
          "Unlimited modules",
          "Customer + staff portals",
          "Custom reporting",
          "Bespoke integrations",
          "Dedicated developer",
        ],
      },
    ],
    faqs: [
      ["Can't I just use Salesforce/HubSpot/etc?", "Sometimes yes — and we'll tell you if so. But for many small businesses, an off-the-shelf platform costs more and does less than something built for you."],
      ["How long does it take?", "8–14 weeks from kickoff to launch for most Scale projects. Bigger ones longer."],
      ["What if my needs change?", "They will. That's what the retainer is for. Most clients add features every quarter."],
      ["Where is the data hosted?", "On UK servers (or wherever you specify). We're GDPR-comfortable and security-first."],
    ],
  },
  "adopt-ai": {
    color: "var(--orange-warm)",
    blobColor: "radial-gradient(circle, rgba(243,156,32,0.5), transparent 65%)",
    features: [
      { t: "Quoting assistants", d: "Reads photos, notes, and measurements; drafts a quote. You check, click send. Three times faster than typing." },
      { t: "Customer chat", d: "AI trained on your business that answers FAQs, books jobs, hands off to a human when it matters." },
      { t: "Auto-drafting emails", d: "Newsletter you've been meaning to send? AI drafts five options based on what's happened this week." },
      { t: "Knowledge base", d: "Searchable AI that knows your business — for training new staff in days, not weeks." },
      { t: "Built on tools you trust", d: "We use Claude, GPT-4, Gemini — whichever fits. No lock-in, no funny business with your data." },
      { t: "AI that says \"no\"", d: "We tune AI to escalate when it isn't sure. No hallucinated quotes. No confidently wrong answers." },
    ],
    timeline: [
      { n: "01", when: "Week 0", t: "Find the right job", d: "Most AI rollouts fail because they try to do everything. We pick one repetitive task that eats hours every week." },
      { n: "02", when: "Week 1–2", t: "Build the assistant", d: "We build, train on your data, and ship a prototype. You play with it, we tune the prompts and behaviour." },
      { n: "03", when: "Week 3–4", t: "Test in your business", d: "Soft launch to a small group of staff/customers. Measure. Fix what's awkward. Roll out fully." },
      { n: "04", when: "Ongoing", t: "Improve every week", d: "AI gets better the more it's used. We watch the logs, refine prompts, add features. Quarterly model upgrades." },
    ],
    pricing: [
      {
        name: "Adopt AI · Pilot",
        price: "£250",
        sub: "Three 1-hour sessions over one week.",
        features: [
          "Guided Claude or ChatGPT setup",
          "Find your highest-value use cases",
          "Build your first prompts together",
          "Written prompt library to keep",
          "30-day follow-up by email",
        ],
      },
      {
        name: "Adopt AI · Assistant",
        price: "£4,500",
        sub: "One-time build. Aftercare available.",
        featured: true,
        features: [
          "Custom AI assistant, built for your business",
          "Trained on your documents & processes",
          "Web + WhatsApp interface",
          "Human handoff when it matters",
          "Usage analytics",
          "8 weeks free tuning",
        ],
      },
      {
        name: "Adopt AI · Programme",
        price: "From £9,500",
        sub: "Scoped per business.",
        features: [
          "Multiple AI assistants",
          "Custom workflows end-to-end",
          "Internal + customer-facing use",
          "Integration with your admin systems",
          "Staff training & adoption",
          "Quarterly model upgrades",
        ],
      },
    ],
    faqs: [
      ["Is my data safe?", "We use enterprise APIs with no training opt-in. Your data stays your data. Never used to train public models."],
      ["What if the AI gets it wrong?", "We design with that as a given. AI suggests, humans approve — for anything that goes to a customer or affects money."],
      ["Which AI model?", "We pick the right one for the job. Claude, GPT, Gemini, open-source — they all have strengths. We're not religious about it."],
      ["Can it really save 5 hours a week?", "Yes — for the right task. Quoting, drafting emails, customer service, data entry. We're honest about which tasks AI is good at and which it isn't."],
    ],
  },
};

function TierPage({ tierId, basePath }) {
  const tier = TIERS.find((t) => t.id === tierId);
  const detail = TIER_DETAILS[tierId];
  const [openFaq, setOpenFaq] = React.useState(0);

  // related tier for next-up CTA
  const idx = TIERS.findIndex((t) => t.id === tierId);
  const next = TIERS[(idx + 1) % TIERS.length];

  return (
    <>
      <SiteNav current="tiers" basePath={basePath} />
      <main>
        <section className="tier-hero" data-screen-label={`01 ${tier.label}: Hero`}>
          <div className="tier-hero-bg">
            <div className="tier-hero-blob" style={{ background: detail.blobColor }} />
          </div>
          <div className="container tier-hero-inner">
            <div>
              <div className="tier-crumb">
                <a href={basePath + "index.html"}>Home</a>
                <Icon.chevron />
                <a href={basePath + "index.html#journey"}>Tiers</a>
                <Icon.chevron />
                <span style={{color: tier.color}}>{tier.label}</span>
              </div>
              <div className="tier-num-big">{tier.num}</div>
              <div className="tier-meta">
                <span className="tier-meta-label">Tier {tier.num}</span>
                <span className="chip chip-green"><span className="dot" /> {tier.price}</span>
              </div>
              <h1 className="tier-h1">{tier.headline}</h1>
              <p className="tier-blurb">{tier.blurb}</p>
              <div className="tier-cta-row">
                <a className="btn btn-accent btn-lg" href={basePath + "contact.html"}>Start a project <Icon.arrow /></a>
                <a className="btn btn-ghost btn-lg" href={`https://wa.me/447939188385?text=Hi%20SMBeMore%2C%20I%27d%20like%20to%20chat%20about%20the%20${encodeURIComponent(tier.label)}%20tier`} target="_blank" rel="noreferrer">
                  <Icon.whatsapp /> Chat about {tier.label}
                </a>
              </div>
            </div>
            <div className="tier-hero-art">
              <TierHeroArt tierId={tierId} />
            </div>
          </div>
        </section>

        <section className="tier-included" data-screen-label={`02 ${tier.label}: Included`}>
          <div className="container">
            <div className="tier-included-grid">
              <div>
                <span className="eyebrow">What's included</span>
                <h2 className="h-1" style={{marginTop: "16px"}}>Everything you need, nothing you don't.</h2>
                <p className="lede" style={{marginTop: "16px"}}>The {tier.label} tier is designed to solve one big problem brilliantly — not to be a Swiss Army knife.</p>
              </div>
              <div className="tier-feature-list reveal-stagger">
                {detail.features.map((f, i) => (
                  <div className="tier-feature" key={i}>
                    <div className="tier-feature-num">{String(i+1).padStart(2,"0")}</div>
                    <h4>{f.t}</h4>
                    <p>{f.d}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section className="tier-timeline" data-screen-label={`03 ${tier.label}: Timeline`}>
          <div className="container">
            <div className="section-head">
              <span className="eyebrow">How it goes</span>
              <h2 className="h-1">From kickoff to live, in four moves.</h2>
            </div>
            <div className="timeline">
              {detail.timeline.map((s, i) => (
                <div className="tl-row" key={i}>
                  <div className="tl-dot">{s.n}</div>
                  <div>
                    <div className="tl-when">{s.when}</div>
                    <h3 className="tl-title">{s.t}</h3>
                  </div>
                  <p className="tl-body">{s.d}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="tier-pricing" data-screen-label={`04 ${tier.label}: Pricing`}>
          <div className="container">
            <div className="section-head" style={{textAlign: "center", margin: "0 auto 0", maxWidth: "640px"}}>
              <span className="eyebrow" style={{justifyContent: "center"}}>Pricing</span>
              <h2 className="h-1" style={{marginTop: "16px"}}>Honest prices for honest work.</h2>
              <p className="lede" style={{marginTop: "16px"}}>Fixed prices, no surprises. We scope thoroughly so you know exactly what you're getting.</p>
            </div>
            <div className="tier-pricing-grid">
              {detail.pricing.map((p, i) => (
                <div key={i} className={"tier-pricing-card" + (p.featured ? " featured" : "")}>
                  {p.featured && <span className="tpc-tag">Most popular</span>}
                  <h3 className="tpc-title">{p.name}</h3>
                  <div className="tpc-price">{p.price}</div>
                  <p className="tpc-price-sub">{p.sub}</p>
                  <ul className="tpc-list">
                    {p.features.map((f, j) => (
                      <li key={j}><Icon.check /> {f}</li>
                    ))}
                  </ul>
                  <a className={"btn " + (p.featured ? "btn-accent" : "btn-ghost") + " btn-lg"} href={basePath + "contact.html"} style={{width: "100%", justifyContent: "center", marginTop: "16px"}}>
                    Get started <Icon.arrow />
                  </a>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="tier-faqs" data-screen-label={`05 ${tier.label}: FAQs`}>
          <div className="container">
            <div className="section-head" style={{textAlign: "center", margin: "0 auto", maxWidth: "640px"}}>
              <span className="eyebrow" style={{justifyContent: "center"}}>Questions</span>
              <h2 className="h-1" style={{marginTop: "16px"}}>Things people ask us.</h2>
            </div>
            <div className="faq-list">
              {detail.faqs.map(([q, a], i) => (
                <div key={i} className={"faq-item" + (openFaq === i ? " open" : "")}>
                  <button className="faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                    <span>{q}</span>
                    <Icon.chevron />
                  </button>
                  <div className="faq-a"><p>{a}</p></div>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="tier-cta" data-screen-label={`06 ${tier.label}: CTA`}>
          <div className="container">
            <div className="tier-cta-inner">
              <div>
                <span className="eyebrow" style={{color: "var(--green-bright)"}}>Ready when you are</span>
                <h2 className="h-1" style={{marginTop: "16px"}}>Let's build your <span style={{color: "var(--green-bright)"}}>{tier.label}</span>.</h2>
                <p className="lede">A free 20-minute call. We'll listen, ask good questions, and tell you honestly if we're the right fit.</p>
                <div className="tier-cta-buttons">
                  <a className="btn btn-whatsapp btn-lg" href={`https://wa.me/447939188385?text=Hi%20-%20I%27d%20like%20to%20chat%20about%20the%20${encodeURIComponent(tier.label)}%20tier`} target="_blank" rel="noreferrer">
                    <Icon.whatsapp /> Chat now
                  </a>
                  <a className="btn btn-ghost btn-lg" href={basePath + "contact.html"}>Send a form <Icon.arrow /></a>
                </div>
              </div>
              <div className="tier-cta-side">
                <h3>What happens next</h3>
                <ul>
                  <li><Icon.check /> We reply within a few hours</li>
                  <li><Icon.check /> Quick call to understand your situation</li>
                  <li><Icon.check /> Written proposal with fixed price</li>
                  <li><Icon.check /> If we're not the right fit, we'll say so</li>
                </ul>
              </div>
            </div>
          </div>
        </section>
      </main>
      <SiteFooter basePath={basePath} />
    </>
  );
}

/* Distinct stylized art for each tier hero */
function TierHeroArt({ tierId }) {
  if (tierId === "launch") {
    return (
      <div style={{position: "absolute", inset: 0, background: "linear-gradient(160deg, #faf8f2, #f3f5ee)", padding: "40px"}}>
        <div style={{position: "absolute", top: "40px", left: "40px", right: "40px", bottom: "40px", background: "white", borderRadius: "16px", boxShadow: "var(--shadow-md)", overflow: "hidden"}}>
          {/* mock browser */}
          <div style={{height: "32px", background: "#f3f5ee", display: "flex", alignItems: "center", padding: "0 14px", gap: "8px", borderBottom: "1px solid var(--line)"}}>
            <span style={{width: "10px", height: "10px", borderRadius: "50%", background: "#ed7b1f"}} />
            <span style={{width: "10px", height: "10px", borderRadius: "50%", background: "#f39c20"}} />
            <span style={{width: "10px", height: "10px", borderRadius: "50%", background: "#5bba42"}} />
            <span style={{flex: 1, height: "14px", background: "white", borderRadius: "7px", marginLeft: "14px", fontFamily: "var(--font-mono)", fontSize: "9px", display: "flex", alignItems: "center", paddingLeft: "8px", color: "#59657c"}}>your-business.co.uk</span>
          </div>
          <div style={{padding: "30px", textAlign: "center"}}>
            <div style={{fontFamily: "var(--font-display)", fontSize: "28px", fontWeight: 600, color: "#1b3f73", marginBottom: "8px", lineHeight: 1.1}}>Your business, looking sharp.</div>
            <div style={{fontSize: "12px", color: "#59657c", marginBottom: "18px"}}>Tagline that says it like it is.</div>
            <button style={{padding: "10px 18px", background: "#0e7a3d", color: "white", border: "none", borderRadius: "999px", fontWeight: 600, fontSize: "12px"}}>Get a quote →</button>
            <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px", marginTop: "24px"}}>
              <div style={{aspectRatio: "1/1", background: "#cfd8c5", borderRadius: "10px"}} />
              <div style={{aspectRatio: "1/1", background: "#5bba42", borderRadius: "10px"}} />
            </div>
          </div>
        </div>
      </div>
    );
  }
  if (tierId === "grow") {
    return (
      <div style={{position: "absolute", inset: 0, background: "linear-gradient(160deg, #e6f5e0, #faf8f2)"}}>
        {/* funnel */}
        <svg viewBox="0 0 400 460" style={{position: "absolute", inset: 0, width: "100%", height: "100%"}}>
          <defs>
            <linearGradient id="funnel" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor="#5bba42" />
              <stop offset="100%" stopColor="#0e7a3d" />
            </linearGradient>
          </defs>
          <path d="M 60 60 L 340 60 L 250 200 L 250 340 L 150 340 L 150 200 Z" fill="url(#funnel)" opacity="0.16" />
          <path d="M 60 60 L 340 60 L 250 200 L 250 340 L 150 340 L 150 200 Z" stroke="#0e7a3d" strokeWidth="2" fill="none" strokeDasharray="6 4" />
          <text x="200" y="48" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="11" fontWeight="600" fill="#0e7a3d">VISITORS · 1,240</text>
          <text x="200" y="180" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="11" fontWeight="600" fill="#0e7a3d">LEADS · 142</text>
          <text x="200" y="370" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="11" fontWeight="600" fill="#0e7a3d">CUSTOMERS · 38</text>
          {[...Array(8)].map((_, i) => (
            <circle key={i} cx={80 + i * 35} cy="100" r="6" fill="#1b3f73" />
          ))}
          {[...Array(5)].map((_, i) => (
            <circle key={i} cx={170 + i * 16} cy="240" r="6" fill="#0e7a3d" />
          ))}
          {[...Array(3)].map((_, i) => (
            <circle key={i} cx={180 + i * 20} cy="300" r="6" fill="#f39c20" />
          ))}
        </svg>
        <div style={{position: "absolute", bottom: "32px", left: "32px", right: "32px", background: "white", padding: "16px 18px", borderRadius: "12px", boxShadow: "var(--shadow-sm)", border: "1px solid var(--line)"}}>
          <div style={{display: "flex", alignItems: "center", gap: "10px"}}>
            <span style={{width: "32px", height: "32px", borderRadius: "50%", background: "#25d366", display: "flex", alignItems: "center", justifyContent: "center", color: "white", fontSize: "14px"}}>💬</span>
            <div>
              <div style={{fontSize: "11px", color: "#59657c", fontFamily: "var(--font-mono)"}}>NEW LEAD · 2 SEC AGO</div>
              <div style={{fontSize: "13px", fontWeight: 600, color: "#1b3f73"}}>Sarah from Maidstone wants a quote</div>
            </div>
          </div>
        </div>
      </div>
    );
  }
  if (tierId === "scale") {
    return (
      <div style={{position: "absolute", inset: 0, background: "#122a52", display: "flex"}}>
        {/* sidebar */}
        <div style={{width: "100px", background: "rgba(0,0,0,0.25)", padding: "20px 12px"}}>
          <div style={{width: "100%", height: "8px", background: "#5bba42", borderRadius: "2px", marginBottom: "20px"}} />
          {["Dashboard", "Jobs", "Clients", "Invoices", "Staff"].map((t, i) => (
            <div key={i} style={{padding: "8px 10px", fontSize: "10px", fontFamily: "var(--font-body)", color: i === 2 ? "#f39c20" : "rgba(255,255,255,0.6)", background: i === 2 ? "rgba(243,156,32,0.16)" : "transparent", borderRadius: "5px", marginBottom: "4px", fontWeight: 500}}>{t}</div>
          ))}
        </div>
        <div style={{flex: 1, padding: "24px"}}>
          <div style={{fontFamily: "var(--font-display)", color: "white", fontSize: "20px", fontWeight: 600, marginBottom: "20px"}}>Clients · 142</div>
          {[
            ["Beckett & Sons", "Plumbing", "Active", "#5bba42"],
            ["Briar & Bloom", "Florist", "Active", "#5bba42"],
            ["Kentish Roofing", "Trades", "Active", "#5bba42"],
            ["LJB Carpentry", "Trades", "Trial", "#f39c20"],
            ["Perf. Hub", "Studio", "Active", "#5bba42"],
            ["Rochester Dance", "School", "Active", "#5bba42"],
          ].map((c, i) => (
            <div key={i} style={{display: "grid", gridTemplateColumns: "1fr auto auto", gap: "10px", alignItems: "center", padding: "8px 12px", background: i % 2 ? "rgba(255,255,255,0.04)" : "transparent", borderRadius: "5px", marginBottom: "4px"}}>
              <div>
                <div style={{fontSize: "11px", fontWeight: 600, color: "white"}}>{c[0]}</div>
                <div style={{fontSize: "9px", color: "rgba(255,255,255,0.5)"}}>{c[1]}</div>
              </div>
              <div style={{fontSize: "10px", padding: "3px 8px", borderRadius: "10px", background: c[3], color: "white", fontWeight: 600}}>{c[2]}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }
  if (tierId === "adopt-ai") {
    return (
      <div style={{position: "absolute", inset: 0, background: "linear-gradient(160deg, #fff3e0, #faf8f2)", padding: "32px"}}>
        <div style={{background: "white", borderRadius: "16px", padding: "20px", height: "100%", border: "1px solid var(--line)", boxShadow: "var(--shadow-md)", display: "flex", flexDirection: "column"}}>
          <div style={{display: "flex", alignItems: "center", gap: "10px", marginBottom: "20px"}}>
            <span style={{width: "32px", height: "32px", borderRadius: "8px", background: "linear-gradient(135deg, #ed7b1f, #f39c20)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "white", fontSize: "16px"}}>✨</span>
            <div>
              <div style={{fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "16px", color: "#1b3f73"}}>Quote Assistant</div>
              <div style={{fontSize: "11px", color: "#0e7a3d"}}>● Ready</div>
            </div>
          </div>
          <div style={{flex: 1, display: "flex", flexDirection: "column", gap: "10px"}}>
            <div style={{padding: "10px 14px", background: "#f3f5ee", borderRadius: "12px 12px 12px 4px", maxWidth: "75%", fontSize: "12px", color: "#1b3f73"}}>
              I need a quote for a flat roof, 38m², in Maidstone.
            </div>
            <div style={{padding: "10px 14px", background: "linear-gradient(135deg, #ed7b1f, #f39c20)", color: "white", borderRadius: "12px 12px 4px 12px", maxWidth: "82%", marginLeft: "auto", fontSize: "12px"}}>
              Reading your photos and notes… Materials, labour, scaffolding included. Draft ready below.
            </div>
            <div style={{background: "linear-gradient(160deg, #faf8f2, #f3f5ee)", border: "1px solid var(--line)", borderRadius: "12px", padding: "14px", marginTop: "auto"}}>
              <div style={{fontFamily: "var(--font-mono)", fontSize: "9px", color: "#0e7a3d", fontWeight: 700, letterSpacing: "0.1em"}}>QUOTE READY</div>
              <div style={{fontFamily: "var(--font-display)", fontSize: "28px", fontWeight: 600, color: "#1b3f73", marginTop: "4px", letterSpacing: "-0.02em"}}>£4,280</div>
              <div style={{display: "flex", gap: "8px", marginTop: "10px"}}>
                <button style={{flex: 1, padding: "8px", background: "#0e7a3d", color: "white", border: "none", borderRadius: "999px", fontSize: "11px", fontWeight: 600}}>Send</button>
                <button style={{padding: "8px 14px", background: "white", border: "1px solid var(--line-strong)", borderRadius: "999px", fontSize: "11px", fontWeight: 600, color: "#1b3f73"}}>Edit</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
  return null;
}

window.TierPage = TierPage;
window.TIER_DETAILS = TIER_DETAILS;
