const PRICING_TIERS = [
  {
    name: 'Starter', sub: 'Best for startups & solo founders',
    price: 'From RM 2,500', priceLabel: 'per project',
    features: ['1 core service', '2-week delivery', 'Email support', '2 revision rounds', 'Source files included', '30 days post-launch support'],
    cta: 'Start with Starter',
    featured: false,
  },
  {
    name: 'Growth', sub: 'Best for growing companies',
    price: 'From RM 6,000', priceLabel: 'per engagement',
    features: ['3 core services', '4–6 week delivery', 'Priority support', '5 revision rounds', 'Monthly maintenance', 'Analytics dashboard', 'Dedicated PM'],
    cta: 'Choose Growth',
    featured: true,
  },
  {
    name: 'Enterprise', sub: 'Built for scale',
    price: 'Custom Quote', priceLabel: 'tailored scope',
    features: ['Full-suite services', 'Dedicated team', 'Account manager', 'SLA guarantee', 'Unlimited revisions', 'Priority deployment', 'Quarterly reviews'],
    cta: 'Request a Quote',
    featured: false,
  },
];

const FAQS = [
  { q: 'Do you offer payment plans?', a: 'Yes — we offer milestone-based payments for all packages. We typically structure this as 50% upfront and 50% on delivery, but larger engagements can be split into 3–4 milestone payments tied to project phases.' },
  { q: 'How long does a typical project take?', a: 'Starter projects: 2–3 weeks. Growth packages: 4–8 weeks. Enterprise: assessed per scope, typically 8–16 weeks. We share a detailed timeline before the contract is signed.' },
  { q: 'What do I need to provide?', a: 'For most projects: brand assets (logo, colours), content copy or rough drafts, and a clear brief. We guide you through the rest — including running content workshops if you need them.' },
  { q: 'Do you offer post-launch support?', a: 'Yes — all packages include 30 days of post-launch support. Extended retainers are available from RM 800/month covering bug fixes, minor changes, hosting and uptime monitoring.' },
  { q: 'Can I upgrade my package later?', a: 'Absolutely. Many clients start with Starter and scale to Growth as their business grows. Upgrades are pro-rated against your previous engagement.' },
];

function PricingCard({ tier }) {
  const waLink = `https://wa.me/94779533487?text=${encodeURIComponent(`Hi Nexitura! I'm interested in the ${tier.name} package. Can we discuss my project?`)}`;
  return (
    <div className={`price-card ${tier.featured ? 'featured' : ''}`}>
      {tier.featured && <div className="price-badge">★ MOST POPULAR</div>}
      <div className="price-tier">{tier.name}</div>
      <div className="price-sub">{tier.sub}</div>
      <div className="price-divider" />
      <ul className="price-features">
        {tier.features.map((f, i) => (
          <li key={i}>
            <span className="check"><IconCheck size={14} stroke={2.2} /></span>
            <span>{f}</span>
          </li>
        ))}
      </ul>
      <a className={tier.featured ? 'btn-primary price-cta' : 'btn-ghost price-cta'} href={waLink} target="_blank" rel="noopener noreferrer">
        {tier.cta} <IconArrowRight size={16} />
      </a>
    </div>
  );
}

function FaqItem({ q, a, open, onToggle }) {
  return (
    <div className={`faq-item ${open ? 'open' : ''}`}>
      <button className="faq-q" onClick={onToggle}>
        <span>{q}</span>
        <span className="faq-chev"><IconChevron size={18} /></span>
      </button>
      <div className="faq-a-wrap">
        <div style={{ minHeight: 0, overflow: 'hidden' }}>
          <p className="faq-a" style={{ margin: 0 }}>{a}</p>
        </div>
      </div>
    </div>
  );
}

function Pricing() {
  const [openFaq, setOpenFaq] = React.useState(0);

  return (
    <section id="pricing" data-screen-label="05 Pricing" style={{
      padding: 'clamp(80px, 10vw, 140px) 0',
      background: 'linear-gradient(180deg, var(--space-void) 0%, #07090F 100%)',
      backgroundImage: `
        linear-gradient(rgba(108,58,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(108,58,255,0.035) 1px, transparent 1px)
      `,
      backgroundSize: '60px 60px',
    }}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">≫ INVESTMENT</span>
          <h2>Transparent Pricing. No Surprises.</h2>
          <p>Clear packages. Clear scope. Clear results.</p>
        </div>

        <div className="price-grid">
          {PRICING_TIERS.map((t, i) => (
            <div key={t.name} className="reveal" data-delay={i + 1}>
              <PricingCard tier={t} />
            </div>
          ))}
        </div>

        <div className="reveal" style={{ marginTop: 96, maxWidth: 800, margin: '96px auto 0' }}>
          <div style={{ textAlign: 'center', marginBottom: 32 }}>
            <span className="eyebrow">≫ FAQ</span>
            <h3 style={{
              fontFamily: 'Orbitron, sans-serif',
              fontSize: 'clamp(24px, 3vw, 34px)',
              marginTop: 16, color: 'var(--stardust-white)',
            }}>Frequently Asked Questions</h3>
          </div>
          <div className="faq-list">
            {FAQS.map((f, i) => (
              <FaqItem
                key={i}
                q={f.q}
                a={f.a}
                open={openFaq === i}
                onToggle={() => setOpenFaq(openFaq === i ? -1 : i)}
              />
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .price-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 24px;
          align-items: stretch;
        }
        @media (max-width: 980px) {
          .price-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
          .price-grid > div:first-child { order: 2; }
          .price-grid > div:nth-child(2) { order: 1; }
          .price-grid > div:last-child { order: 3; }
        }

        .price-card {
          position: relative;
          height: 100%;
          background: rgba(10,14,26,0.85);
          border: 1px solid rgba(0,200,224,0.12);
          border-radius: 20px;
          padding: 40px 32px 32px;
          backdrop-filter: blur(10px);
          display: flex; flex-direction: column;
          transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
        }
        .price-card:hover {
          transform: translateY(-6px);
          border-color: rgba(0,200,224,0.35);
        }
        .price-card.featured {
          background: linear-gradient(160deg, rgba(13,27,75,0.9), rgba(108,58,255,0.18));
          border: 2px solid rgba(0,200,224,0.5);
          transform: scale(1.04);
          box-shadow: 0 0 60px rgba(0,200,224,0.15), 0 0 120px rgba(108,58,255,0.12);
        }
        @media (max-width: 980px) {
          .price-card.featured { transform: none; }
        }
        .price-card.featured:hover { transform: scale(1.04) translateY(-6px); }
        @media (max-width: 980px) {
          .price-card.featured:hover { transform: translateY(-6px); }
        }
        .price-badge {
          position: absolute; top: -17px; left: 50%;
          transform: translateX(-50%);
          background: linear-gradient(135deg, var(--stellar-cyan), var(--nova-purple));
          color: var(--space-void);
          font-family: 'Syne', sans-serif;
          font-size: 13px; font-weight: 800;
          letter-spacing: 0.05em;
          padding: 9px 20px;
          line-height: 1;
          border-radius: 24px;
          white-space: nowrap;
        }
        .price-tier {
          font-family: 'Orbitron', sans-serif;
          font-size: 14px; letter-spacing: 0.24em;
          color: var(--stellar-cyan);
          text-transform: uppercase;
          margin-bottom: 6px;
        }
        .price-sub {
          font-family: 'Syne', sans-serif;
          font-size: 14px;
          color: var(--asteroid-grey);
          margin-bottom: 8px;
        }
        .price-amount {
          font-family: 'Orbitron', sans-serif;
          font-size: 38px; font-weight: 700;
          color: var(--stardust-white);
          letter-spacing: 0.01em;
          line-height: 1.1;
        }
        .price-card.featured .price-amount {
          font-size: 44px;
          color: var(--stellar-cyan);
          text-shadow: 0 0 24px rgba(0,200,224,0.35);
        }
        .price-label {
          font-family: 'Space Mono', monospace;
          font-size: 11px; letter-spacing: 0.18em;
          color: var(--asteroid-grey);
          margin-top: 6px;
        }
        .price-divider {
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(0,200,224,0.2), transparent);
          margin: 12px 0;
        }
        .price-features {
          list-style: none; padding: 0; margin: 0;
          flex: 1;
          display: flex; flex-direction: column; gap: 12px;
          margin-bottom: 28px;
        }
        .price-features li {
          display: flex; gap: 12px; align-items: flex-start;
          font-family: 'Syne', sans-serif;
          font-size: 14.5px; line-height: 1.5;
          color: rgba(232,238,255,0.85);
        }
        .check {
          flex-shrink: 0;
          width: 22px; height: 22px;
          border-radius: 50%;
          background: rgba(0,200,224,0.12);
          border: 1px solid rgba(0,200,224,0.3);
          color: var(--stellar-cyan);
          display: flex; align-items: center; justify-content: center;
        }
        .price-cta {
          width: 100%; justify-content: center;
        }
        .price-card .price-cta {
          padding: 14px 24px;
        }

        /* FAQ */
        .faq-list {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }
        .faq-item {
          background: linear-gradient(135deg, rgba(10, 14, 26, 0.8), rgba(13, 27, 75, 0.25));
          border: 1px solid rgba(0, 200, 224, 0.12);
          border-radius: 14px;
          padding: 0 24px;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
        }
        .faq-item:hover {
          border-color: rgba(0, 200, 224, 0.35);
          background: linear-gradient(135deg, rgba(10, 14, 26, 0.9), rgba(0, 200, 224, 0.03));
          transform: translateY(-2px);
          box-shadow: 0 10px 30px rgba(0, 200, 224, 0.05);
        }
        .faq-item.open {
          border-color: rgba(0, 200, 224, 0.4);
          background: linear-gradient(135deg, rgba(10, 14, 26, 0.95), rgba(0, 200, 224, 0.05));
        }
        .faq-q {
          width: 100%;
          display: flex; justify-content: space-between; align-items: center;
          padding: 20px 0;
          font-family: 'Syne', sans-serif;
          font-size: 16.5px; font-weight: 600;
          text-align: left;
          color: var(--stardust-white);
          gap: 18px;
        }
        .faq-q:hover { color: var(--stellar-cyan); }
        .faq-chev {
          color: var(--stellar-cyan);
          transition: transform 0.3s;
        }
        .faq-item.open .faq-chev { transform: rotate(180deg); }
        .faq-a-wrap {
          display: grid;
          grid-template-rows: 0fr;
          transition: grid-template-rows 0.35s cubic-bezier(0.4,0,0.2,1);
          overflow: hidden;
        }
        .faq-item.open .faq-a-wrap { grid-template-rows: 1fr; }
        .faq-a-wrap > div {
          overflow: hidden;
          min-height: 0;
        }
        .faq-a {
          font-family: 'Syne', sans-serif;
          font-size: 14.5px; line-height: 1.8;
          color: var(--asteroid-grey);
          padding-bottom: 20px;
          max-width: 720px;
          margin: 0;
        }
      `}</style>
    </section>
  );
}

window.Pricing = Pricing;