const { useState } = React;

const PLANS = [
  {
    tier: 'Starter', featured: false,
    desc: 'Perfect for local shops and solo businesses',
    oneTime: '1,200', monthly: '99',
    features: ['Up to 5 pages','Mobile responsive','Contact form + Maps','Basic SEO setup','1 language'],
    cta: 'Get Started',
  },
  {
    tier: 'Professional', featured: true, badge: 'Most Popular',
    desc: 'For growing businesses ready to scale online',
    oneTime: '3,500', monthly: '249',
    features: ['Up to 15 pages','CMS integration','E-commerce ready','Advanced SEO + Analytics','Up to 3 languages','Booking / reservation system'],
    cta: 'Get Started',
  },
  {
    tier: 'Enterprise', featured: false,
    desc: 'Custom platforms for institutions and large organizations',
    oneTime: 'Custom', monthly: 'Custom',
    features: ['Unlimited pages','Custom back-end','User portals + dashboards','API integrations','Unlimited languages','Dedicated project manager'],
    cta: 'Contact Sales',
  },
];

const FAQS = [
  { q: 'How long does a typical project take?',
    a: 'Starter sites ship in 2–3 weeks. Professional sites take 4–6 weeks. Enterprise projects are scoped individually — most launch within 8–12 weeks. You\'ll get an exact timeline in your proposal.' },
  { q: 'Do you work with clients outside the UAE?',
    a: 'That\'s what we\'re built for. Headquartered in Dubai — a global crossroads — we work with clients in any country and timezone. Calls happen on your schedule, not ours.' },
  { q: 'Can I update the site myself after launch?',
    a: 'Every Professional and Enterprise site includes a CMS so you can edit text, images, and pages without touching code. We provide a 15-minute training walkthrough.' },
  { q: 'What platforms do you build on?',
    a: 'We\'re platform-agnostic. Shopify for e-commerce, WordPress for content-heavy sites, Next.js for performance-critical apps, and fully custom stacks for everything else.' },
  { q: 'What\'s included in the monthly plan?',
    a: 'Monthly plans include hosting, SSL, CDN, uptime monitoring, backups, and up to 2 hours of content edits per month. Cancel anytime with 30 days\' notice — and keep your site.' },
  { q: 'Do you handle hosting and domains?',
    a: 'Yes. DNS configuration, SSL, and deployment on enterprise-grade infrastructure (Vercel, AWS, or Cloudflare depending on the project). Domain registration at-cost, typically $12–15/year.' },
];

const PricingPage = ({ navigate }) => {
  const [monthly, setMonthly] = useState(false);
  const [openFaq, setOpenFaq] = useState(null);

  return (
    <>
      {/* Header */}
      <section className="section" style={{ paddingBottom: 56, textAlign: 'center' }}>
        <div className="container">
          <span className="label">Pricing</span>
          <h1 className="display-lg reveal" style={{ marginBottom: 16 }}>
            Transparent.<br /><em style={{ fontStyle: 'italic' }}>No surprises.</em>
          </h1>
          <p className="body-lg reveal d1" style={{ maxWidth: 420, margin: '0 auto 40px' }}>
            Every plan includes hosting, SSL, analytics, and 30-day post-launch support.
          </p>

          {/* Toggle */}
          <div className="reveal d2" style={{
            display: 'inline-flex', alignItems: 'center', gap: 14,
            padding: '10px 20px',
            background: 'var(--card)',
            border: '1px solid var(--border)',
            borderRadius: 100,
          }}>
            <span style={{ fontSize: 13, fontWeight: 500, color: monthly ? 'var(--muted)' : 'var(--text)', transition: 'color 0.25s' }}>
              One-time
            </span>
            <div onClick={() => setMonthly(m => !m)} style={{
              width: 46, height: 24, borderRadius: 100, cursor: 'pointer',
              background: monthly ? 'var(--accent)' : 'rgba(255,255,255,0.1)',
              position: 'relative', transition: 'background 0.3s',
              flexShrink: 0,
            }}>
              <div style={{
                position: 'absolute',
                width: 18, height: 18, borderRadius: '50%', background: '#fff',
                top: 3, left: monthly ? 25 : 3,
                transition: 'left 0.3s',
                boxShadow: '0 1px 4px rgba(0,0,0,0.3)',
              }} />
            </div>
            <span style={{ fontSize: 13, fontWeight: 500, color: monthly ? 'var(--text)' : 'var(--muted)', transition: 'color 0.25s' }}>
              Monthly
            </span>
          </div>
        </div>
      </section>

      {/* Plans */}
      <section style={{ paddingBottom: 80 }}>
        <div className="container">
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
            gap: 20, alignItems: 'start',
          }}>
            {PLANS.map((plan, i) => (
              <div key={plan.tier} className="reveal"
                style={{
                  background: 'var(--card)',
                  border: `1px solid ${plan.featured ? 'var(--accent)' : 'var(--border)'}`,
                  borderRadius: 'var(--radius-lg)',
                  padding: '36px 28px',
                  position: 'relative',
                  boxShadow: plan.featured ? '0 0 48px var(--accent-glow)' : 'none',
                  transform: plan.featured ? 'scale(1.02)' : 'none',
                  transitionDelay: `${i * 0.08}s`,
                  transition: 'border-color 0.3s, transform 0.3s, box-shadow 0.3s',
                }}>

                {plan.badge && (
                  <div style={{
                    position: 'absolute', top: -12, left: '50%',
                    transform: 'translateX(-50%)',
                    padding: '5px 18px',
                    background: 'var(--accent)',
                    borderRadius: 100,
                    fontFamily: 'var(--mono)', fontSize: 9,
                    letterSpacing: 1.5, color: '#fff', whiteSpace: 'nowrap',
                  }}>{plan.badge}</div>
                )}

                <div style={{ fontFamily: 'var(--display)', fontSize: 24, fontWeight: 500, marginBottom: 6 }}>
                  {plan.tier}
                </div>
                <div style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 24, lineHeight: 1.5 }}>
                  {plan.desc}
                </div>

                <div style={{ marginBottom: 4 }}>
                  <span style={{ fontFamily: 'var(--display)', fontSize: 52, fontWeight: 400, lineHeight: 1 }}>
                    {plan.tier !== 'Enterprise' && '$'}{monthly ? plan.monthly : plan.oneTime}
                  </span>
                  {monthly && plan.tier !== 'Enterprise' && (
                    <span style={{ fontSize: 14, color: 'var(--muted)' }}> /mo</span>
                  )}
                </div>
                <div style={{
                  fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: 1.5,
                  color: 'var(--muted)', marginBottom: 28,
                }}>
                  {plan.tier === 'Enterprise'
                    ? "let's talk"
                    : monthly ? 'per month, cancel anytime' : 'one-time payment'}
                </div>

                <ul style={{ listStyle: 'none', marginBottom: 28 }}>
                  {plan.features.map(f => (
                    <li key={f} style={{
                      display: 'flex', alignItems: 'flex-start', gap: 10,
                      padding: '9px 0', fontSize: 13, color: 'var(--muted)',
                      borderBottom: '1px solid var(--border)',
                    }}>
                      <span style={{ color: 'var(--mint)', flexShrink: 0, marginTop: 1, fontSize: 12 }}>✓</span>
                      {f}
                    </li>
                  ))}
                </ul>

                <button
                  className={`btn ${plan.featured ? 'btn-primary' : 'btn-ghost'}`}
                  style={{ width: '100%', justifyContent: 'center' }}
                  onClick={() => navigate('contact')}>
                  {plan.cta}
                </button>
              </div>
            ))}
          </div>

          <p className="reveal" style={{ textAlign: 'center', marginTop: 28, fontSize: 13, color: 'var(--muted)' }}>
            All prices in USD · Monthly plans cancel anytime · Custom quotes within 48 hours
          </p>
        </div>
      </section>

      {/* FAQ */}
      <section className="section" style={{ background: 'var(--surface)' }}>
        <div className="container">
          <div className="reveal" style={{ textAlign: 'center', marginBottom: 52 }}>
            <span className="label">FAQ</span>
            <h2 className="display-md">Questions? Answered.</h2>
          </div>

          <div className="reveal d1" style={{ maxWidth: 680, margin: '0 auto' }}>
            {FAQS.map((faq, i) => (
              <div key={i} style={{ borderBottom: '1px solid var(--border)' }}>
                <button
                  onClick={() => setOpenFaq(openFaq === i ? null : i)}
                  style={{
                    width: '100%', display: 'flex',
                    justifyContent: 'space-between', alignItems: 'center',
                    padding: '22px 0', gap: 16,
                    fontFamily: 'var(--display)', fontSize: 20, fontWeight: 400,
                    color: openFaq === i ? 'var(--accent)' : 'var(--text)',
                    textAlign: 'left', background: 'none', border: 'none',
                    cursor: 'pointer', transition: 'color 0.22s',
                  }}>
                  {faq.q}
                  <span style={{
                    width: 26, height: 26, borderRadius: '50%',
                    border: `1px solid ${openFaq === i ? 'var(--accent)' : 'var(--border)'}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0, fontSize: 16,
                    color: openFaq === i ? 'var(--accent)' : 'var(--muted)',
                    transform: openFaq === i ? 'rotate(45deg)' : 'none',
                    transition: 'all 0.28s',
                    background: openFaq === i ? 'var(--accent-dim)' : 'none',
                  }}>+</span>
                </button>
                {openFaq === i && (
                  <div style={{ paddingBottom: 22, animation: 'expandIn 0.25s ease' }}>
                    <p style={{ fontSize: 15, color: 'var(--muted)', lineHeight: 1.85 }}>{faq.a}</p>
                  </div>
                )}
              </div>
            ))}
          </div>

          <div className="reveal d2" style={{ textAlign: 'center', marginTop: 56 }}>
            <p className="body-md" style={{ marginBottom: 20 }}>Still have questions?</p>
            <button className="btn btn-ghost" onClick={() => navigate('contact')}>
              Ask Us Directly →
            </button>
          </div>
        </div>
      </section>
    </>
  );
};

window.PricingPage = PricingPage;