/* Pricing — three plans: Starter / Standard (most popular) / Premium (luxe dark) */

function Pricing() {
  const plans = [
    {
      name: "Starter",
      tagline: "For one-person businesses and single-location shops.",
      variant: "starter",
      setupPrice: "€699",
      setupLabel: "one-time setup",
      monthly: "€39/mo",
      yearly: "€390/yr",
      yearlySave: "save €78",
      features: [
        { included: true,  text: "Custom 4–6 page website, designed from scratch" },
        { included: true,  text: "Built around your photos — we'll work with what you have" },
        { included: true,  text: "Your own .ie or .com domain" },
        { included: true,  text: "One email on your domain" },
        { included: true,  text: "EU hosting · SSL · weekly backups · DDoS protection" },
        { included: true,  text: "Standard on-page SEO + Google Business Profile setup" },
        { included: true,  text: "Mobile and tablet optimised" },
        { included: true,  text: "One round of revisions after launch" },
        { included: false, text: "On-site photo shoot" },
        { included: false, text: "Global CDN / daily backups" },
        { included: false, text: "Ongoing edits (available on-demand, €60/hr)" },
      ],
      cta: "Start a Starter plan",
      ctaClass: "btn-ghost",
    },
    {
      name: "Standard",
      tagline: "For established shops, services, studios, and growing local businesses.",
      variant: "standard",
      tag: "Most popular",
      setupPrice: "€1,299",
      setupLabel: "one-time setup",
      monthly: "€59/mo",
      yearly: "€590/yr",
      yearlySave: "save €118",
      features: [
        { included: true,  text: "Custom 6–10 page website" },
        { included: true,  text: "Half-day on-site photo shoot — interior, exterior, people, product" },
        { included: true,  text: "Your .ie or .com domain" },
        { included: true,  text: "Up to 3 emails on your domain" },
        { included: true,  text: "EU hosting · global CDN · daily backups · NVMe storage" },
        { included: true,  text: "SSL, DDoS protection, Web Application Firewall" },
        { included: true,  text: "Full on-page + local SEO + Google Business Profile" },
        { included: true,  text: "2 hours of small edits included every month" },
        { included: true,  text: "Quarterly performance review" },
        { included: true,  text: "Two rounds of revisions after launch" },
        { included: false, text: "AI / Answer-Engine optimisation" },
      ],
      cta: "Start a Standard plan",
      ctaClass: "btn-primary",
    },
    {
      name: "Premium",
      tagline: "For multi-brand owners and businesses that want to be found by AI.",
      variant: "premium",
      setupPrice: "From €2,499",
      setupLabel: "one-time setup",
      monthly: "€129/mo",
      yearly: "€1,290/yr",
      yearlySave: "save €258",
      features: [
        { included: true,  text: "Up to 3 websites — multi-location, multi-brand, or sister businesses" },
        { included: true,  text: "Full-day photo shoot + a short brand video (60–90 seconds)" },
        { included: true,  text: "Your domains and business emails sorted (subject to availability)" },
        { included: true,  text: "Dedicated hosting resources · global CDN · daily backups · NVMe storage" },
        { included: true,  text: "Priority server support and traffic headroom" },
        { included: true,  text: "Premium SEO + AEO — schema, structured data, citation-ready for ChatGPT, Claude, Perplexity, Gemini" },
        { included: true,  text: "Google Business Profile setup + monthly review" },
        { included: true,  text: "Unlimited small edits + new pages, included (within reason)" },
        { included: true,  text: "Monthly performance + AEO visibility report" },
        { included: true,  text: "Priority studio support — same working day" },
        { included: true,  text: "Unlimited revisions in the first 30 days" },
      ],
      cta: "Talk about Premium",
      ctaClass: "btn-gold",
    },
  ];

  return (
    <section id="pricing" className="pricing">
      <div className="container">
        <div className="section-head" style={{textAlign:"center", margin:"0 auto 48px"}}>
          <span className="eyebrow">Three plans</span>
          <h2>One subscription. <span className="h-accent">No surprises.</span></h2>
          <p className="lead" style={{margin:"0 auto", maxWidth: 600}}>
            Setup once. Then monthly or yearly — covers the lot. The price you see in year one is the price you keep paying. No surprise hosting bills in month thirteen.
          </p>
        </div>

        <div className="plans-grid">
          {plans.map(plan => (
            <div key={plan.name} className={`plan-card plan-${plan.variant}`}>
              {plan.tag && (
                <span className="plan-tag">
                  <span className="plan-tag-star">✦</span>
                  {plan.tag}
                </span>
              )}

              <div className="plan-head">
                <h3>{plan.name}</h3>
                <p className="plan-tagline">{plan.tagline}</p>
              </div>

              <div className="plan-price-block">
                <div className="plan-setup-row">
                  <span className="plan-setup-label">{plan.setupLabel}</span>
                  <span className="plan-setup-amount">{plan.setupPrice}</span>
                </div>
                <div className="plan-recurring-row">
                  <span className="plan-monthly">{plan.monthly}</span>
                  <span className="plan-recurring-sep">or</span>
                  <span className="plan-yearly">{plan.yearly}</span>
                  <span className="plan-save">{plan.yearlySave}</span>
                </div>
              </div>

              <ul className="plan-features">
                {plan.features.map(f => (
                  <li key={f.text} className={f.included ? "yes" : "no"}>
                    <span className="check" aria-hidden="true">{f.included ? "✓" : "—"}</span>
                    <span>{f.text}</span>
                  </li>
                ))}
              </ul>

              <a href="#contact" className={"btn " + plan.ctaClass}>
                {plan.cta}
                <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <line x1="5" y1="12" x2="19" y2="12"/>
                  <polyline points="12 5 19 12 12 19"/>
                </svg>
              </a>
            </div>
          ))}
        </div>

        <div className="plans-footer-row">
          <p className="plans-footer-all">
            <strong>All plans:</strong> EU hosting · SSL · backups · GDPR-native · mobile-first · WordPress · no lock-in after year one · Irish studio you can ring.
          </p>
          <p className="plans-footer-excl">
            Not included on any plan: e-commerce, custom integrations, copywriting beyond pages we build. Booking systems available as an add-on.
          </p>
        </div>
      </div>

      <style>{`
        .pricing { background: var(--paper-warm); padding-top: 88px; padding-bottom: 88px; }

        /* ---- Grid: 3 columns desktop, stack on mobile ---- */
        .plans-grid {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          gap: 18px;
          max-width: 1100px;
          margin: 0 auto;
          align-items: stretch;
        }
        @media (max-width: 960px) {
          .plans-grid {
            grid-template-columns: 1fr;
            gap: 14px;
            max-width: 500px;
          }
          /* Standard (most popular) rises to the top on mobile */
          .plan-starter  { order: 2; }
          .plan-standard { order: 1; }
          .plan-premium  { order: 3; }
        }

        /* ---- Card base ---- */
        .plan-card {
          position: relative;
          border-radius: var(--r-xl);
          padding: clamp(22px, 2.2vw, 32px) clamp(20px, 2vw, 28px) clamp(22px, 2.2vw, 28px);
          display: flex;
          flex-direction: column;
          gap: 18px;
          overflow: hidden;
          transition:
            box-shadow var(--dur-base) var(--ease-out-soft),
            transform var(--dur-base) var(--ease-out-soft),
            border-color var(--dur-base) var(--ease-out-soft);
        }
        .plan-card:hover { transform: translateY(-4px); }

        /* ---- STARTER — clean light ---- */
        .plan-starter {
          background: var(--surface);
          border: 1px solid var(--border);
          box-shadow: 0 2px 8px rgba(20,20,20,0.04);
        }
        .plan-starter::after {
          content: "";
          position: absolute;
          top: 0; left: 0; right: 0;
          height: 3px;
          background: var(--ink-faint);
        }
        .plan-starter:hover {
          box-shadow: 0 18px 38px rgba(20,20,20,0.08);
          border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
        }

        /* ---- STANDARD — clean + badge ---- */
        .plan-standard {
          background: var(--surface);
          border: 1px solid var(--border);
          box-shadow: 0 2px 8px rgba(20,20,20,0.04);
        }
        .plan-standard::after {
          content: "";
          position: absolute;
          top: 0; left: 0; right: 0;
          height: 3px;
          background: var(--primary);
        }
        .plan-standard:hover {
          box-shadow: 0 18px 38px rgba(20,20,20,0.08);
          border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
        }

        /* ---- PREMIUM — luxe dark + gold ---- */
        .plan-premium {
          background:
            radial-gradient(120% 60% at 100% 0%, rgba(212,175,91,0.18) 0%, transparent 55%),
            radial-gradient(80% 60% at 0% 100%, rgba(212,175,91,0.10) 0%, transparent 60%),
            linear-gradient(160deg, #2A2018 0%, #181109 100%);
          color: #F5EBD6;
          border: 1px solid rgba(212,175,91,0.30);
          box-shadow:
            0 1px 0 rgba(212,175,91,0.18) inset,
            0 16px 40px rgba(20,15,8,0.30);
        }
        .plan-premium:hover {
          box-shadow:
            0 1px 0 rgba(212,175,91,0.22) inset,
            0 28px 56px rgba(20,15,8,0.40);
          border-color: rgba(212,175,91,0.55);
        }
        .plan-premium::before {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(115deg, transparent 38%, rgba(212,175,91,0.10) 50%, transparent 62%);
          pointer-events: none;
          z-index: 0;
        }
        .plan-premium > * { position: relative; z-index: 1; }

        /* ---- "Most popular" badge ---- */
        .plan-tag {
          align-self: flex-start;
          display: inline-flex;
          align-items: center;
          gap: 6px;
          background: linear-gradient(135deg, #E8C875 0%, #C9A35A 100%);
          color: #1A130A;
          font-family: var(--font-body);
          font-weight: 700;
          font-size: 10.5px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          padding: 7px 14px 7px 11px;
          border-radius: 999px;
          white-space: nowrap;
          box-shadow:
            0 1px 0 rgba(255,255,255,0.35) inset,
            0 6px 16px rgba(212,175,91,0.32);
        }
        .plan-tag-star { font-size: 11px; color: #6B4F1A; line-height: 1; }

        /* ---- Plan head ---- */
        .plan-head { display: flex; flex-direction: column; gap: 4px; }
        .plan-head h3 {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: clamp(22px, 2.2vw, 30px);
          line-height: 1;
          margin: 0;
          letter-spacing: -0.03em;
        }
        .plan-starter .plan-head h3,
        .plan-standard .plan-head h3 { color: var(--ink); }
        .plan-premium .plan-head h3 {
          background: linear-gradient(135deg, #F5EBD6 0%, #E8C875 100%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .plan-tagline {
          font-size: 13px;
          font-weight: 500;
          line-height: 1.45;
          margin: 4px 0 0;
        }
        .plan-starter .plan-tagline,
        .plan-standard .plan-tagline { color: var(--ink-soft); }
        .plan-premium .plan-tagline  { color: rgba(245,235,214,0.70); }

        /* ---- Price block ---- */
        .plan-price-block {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: 14px 0;
        }
        .plan-starter .plan-price-block,
        .plan-standard .plan-price-block {
          border-top: 1px solid var(--border);
          border-bottom: 1px solid var(--border);
        }
        .plan-premium .plan-price-block {
          border-top: 1px solid rgba(212,175,91,0.22);
          border-bottom: 1px solid rgba(212,175,91,0.22);
        }

        .plan-setup-row {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: 8px;
        }
        .plan-setup-label {
          font-size: 10.5px;
          font-weight: 700;
          letter-spacing: 0.10em;
          text-transform: uppercase;
        }
        .plan-starter .plan-setup-label,
        .plan-standard .plan-setup-label { color: var(--ink-mute); }
        .plan-premium .plan-setup-label  { color: rgba(245,235,214,0.50); }

        .plan-setup-amount {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: clamp(20px, 2vw, 26px);
          line-height: 1;
          letter-spacing: -0.03em;
        }
        .plan-starter .plan-setup-amount,
        .plan-standard .plan-setup-amount { color: var(--ink); }
        .plan-premium .plan-setup-amount  { color: #F5EBD6; }

        .plan-recurring-row {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 6px;
        }
        .plan-monthly {
          font-weight: 700;
          font-size: 14.5px;
        }
        .plan-starter .plan-monthly,
        .plan-standard .plan-monthly { color: var(--ink); }
        .plan-premium .plan-monthly  { color: #F5EBD6; }

        .plan-recurring-sep {
          font-size: 12px;
          font-weight: 400;
        }
        .plan-starter .plan-recurring-sep,
        .plan-standard .plan-recurring-sep { color: var(--ink-mute); }
        .plan-premium .plan-recurring-sep  { color: rgba(245,235,214,0.40); }

        .plan-yearly {
          font-size: 13.5px;
          font-weight: 500;
        }
        .plan-starter .plan-yearly,
        .plan-standard .plan-yearly { color: var(--ink-soft); }
        .plan-premium .plan-yearly  { color: rgba(245,235,214,0.75); }

        /* "save €XX" — soft pill tag, not bold */
        .plan-save {
          font-size: 11px;
          font-weight: 600;
          padding: 3px 8px;
          border-radius: 999px;
          letter-spacing: 0.02em;
        }
        .plan-starter .plan-save,
        .plan-standard .plan-save {
          background: var(--primary-soft);
          color: var(--primary-hover);
        }
        .plan-premium .plan-save {
          background: rgba(232,200,117,0.18);
          color: #D4AF5B;
        }

        /* ---- Features ---- */
        .plan-features {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: column;
          gap: 9px;
          flex: 1;
        }
        .plan-features li {
          display: flex;
          gap: 10px;
          align-items: flex-start;
          font-size: 13px;
          line-height: 1.45;
          font-weight: 500;
        }
        .plan-starter .plan-features li.yes,
        .plan-standard .plan-features li.yes { color: var(--ink); }
        .plan-starter .plan-features li.no,
        .plan-standard .plan-features li.no  { color: var(--ink-faint); }
        .plan-premium .plan-features li.yes  { color: #F5EBD6; }
        .plan-premium .plan-features li.no   { color: rgba(245,235,214,0.32); }

        .plan-features .check {
          flex-shrink: 0;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 10px;
          font-weight: 700;
          line-height: 1;
          margin-top: 1px;
        }
        .plan-starter .yes .check,
        .plan-standard .yes .check {
          background: var(--primary);
          color: var(--paper);
        }
        .plan-starter .no .check,
        .plan-standard .no .check {
          background: transparent;
          border: 1px solid var(--border);
          color: var(--ink-faint);
          font-size: 11px;
        }
        .plan-premium .yes .check {
          background: linear-gradient(135deg, #E8C875 0%, #C9A35A 100%);
          color: #1A130A;
          box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset;
        }
        .plan-premium .no .check {
          background: transparent;
          border: 1px solid rgba(245,235,214,0.18);
          color: rgba(245,235,214,0.30);
          font-size: 11px;
        }

        /* ---- CTAs ---- */
        .plan-card .btn { align-self: stretch; justify-content: center; margin-top: 4px; }

        .plan-starter .btn-ghost,
        .plan-standard .btn-ghost {
          background: transparent;
          border-color: var(--border-strong);
          color: var(--ink);
        }
        .plan-starter .btn-ghost:hover,
        .plan-standard .btn-ghost:hover {
          background: var(--ink);
          color: var(--paper);
        }

        .btn-gold {
          background: linear-gradient(135deg, #E8C875 0%, #C9A35A 50%, #B68B3B 100%);
          color: #1A130A !important;
          border: 1px solid rgba(255,255,255,0.2);
          font-weight: 700;
          box-shadow:
            0 1px 0 rgba(255,255,255,0.30) inset,
            0 2px 8px rgba(201,163,90,0.35),
            0 12px 28px rgba(180,139,59,0.30);
        }
        .btn-gold:hover {
          background: linear-gradient(135deg, #F0D283 0%, #D4AF5B 50%, #C29947 100%);
          transform: translateY(-2px);
          box-shadow:
            0 1px 0 rgba(255,255,255,0.30) inset,
            0 4px 12px rgba(201,163,90,0.50),
            0 18px 36px rgba(180,139,59,0.40);
        }

        /* ---- Footer row ---- */
        .plans-footer-row {
          max-width: 1100px;
          margin: 28px auto 0;
          padding-top: 20px;
          border-top: 1px solid var(--border);
          display: flex;
          flex-direction: column;
          gap: 6px;
        }
        .plans-footer-all,
        .plans-footer-excl {
          font-size: 13px;
          line-height: 1.6;
          margin: 0;
          text-align: center;
        }
        .plans-footer-all { color: var(--ink-soft); }
        .plans-footer-all strong { color: var(--ink); }
        .plans-footer-excl { color: var(--ink-faint); }
      `}</style>
    </section>
  );
}

window.Pricing = Pricing;