const Pricing = () => {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  const [annual, setAnnual] = React.useState(false);
  React.useEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVisible(true); }, { threshold: 0.1 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const plans = [
    {
      name: 'Starter', tag: null,
      price: annual ? 3200 : 3999, unit: '/month',
      desc: 'Perfect for startups validating an idea or building an MVP with a focused scope.',
      features: ['Up to 2 developers', 'Custom web application', 'Basic cloud deployment', 'Monthly progress calls', '3 months minimum', 'Basic QA & testing', 'Email support'],
      cta: 'Get Started', highlight: false,
    },
    {
      name: 'Growth', tag: 'Most Popular',
      price: annual ? 7200 : 8999, unit: '/month',
      desc: 'For funded startups and SMEs building a full product with AI and SaaS capabilities.',
      features: ['Up to 5 developers', 'AI/ML integration', 'SaaS platform development', 'Bi-weekly sprints & demos', 'Dedicated project manager', 'Full QA & automated testing', 'Priority Slack support', 'Architecture review'],
      cta: 'Start a Project', highlight: true,
    },
    {
      name: 'Enterprise', tag: null,
      price: null, unit: 'Custom',
      desc: 'Full-scale digital transformation for enterprises with complex requirements and legacy systems.',
      features: ['Unlimited engineers', 'Blockchain & predictive analytics', 'Cloud infrastructure & DevOps', 'Weekly steering calls', 'Dedicated CTO advisory', 'Security audits & compliance', '24/7 support SLA', 'Custom contracts & NDAs'],
      cta: 'Contact Sales', highlight: false,
    },
  ];

  const scrollToContact = () => {
    const el = document.getElementById('contact');
    if (el) window.scrollTo({ top: el.offsetTop - 72, behavior: 'smooth' });
  };

  return (
    <section id="pricing" data-screen-label="Pricing" ref={ref} style={{ padding: '100px 0', background: 'var(--bg, #e8edf5)' }}>
      <div className="inner-wrap" style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ textAlign: 'center', maxWidth: 540, margin: '0 auto 48px', opacity: visible ? 1 : 0, transition: 'all 0.6s ease' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '5px 14px', borderRadius: 100, background: 'var(--accentbg)', border: '1px solid rgba(37,99,235,0.18)', marginBottom: 18 }}>
            <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, fontWeight: 600, color: 'var(--accent, #1d4ed8)', letterSpacing: '0.07em' }}>PRICING</span>
          </div>
          <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 'clamp(28px, 4vw, 44px)', fontWeight: 700, color: 'var(--text, #0f172a)', letterSpacing: '-0.03em', lineHeight: 1.1, margin: '0 0 14px' }}>
            Transparent, outcome-based pricing
          </h2>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, color: 'var(--text2, #64748b)', lineHeight: 1.7, margin: '0 0 28px' }}>
            No hidden fees. Fixed monthly retainers with flexible scope adjustments.
          </p>
          {/* Toggle */}
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12, padding: '6px 6px 6px 14px', borderRadius: 100, background: 'var(--bg3, #fff)', border: '1.5px solid var(--border)' }}>
            <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: annual ? 'var(--text2)' : 'var(--text)', fontWeight: annual ? 400 : 600 }}>Monthly</span>
            <div onClick={() => setAnnual(!annual)} style={{ width: 44, height: 24, borderRadius: 12, background: annual ? 'var(--accent, #1d4ed8)' : '#cbd5e1', cursor: 'pointer', position: 'relative', transition: 'background 0.25s' }}>
              <div style={{ position: 'absolute', top: 3, left: annual ? 23 : 3, width: 18, height: 18, borderRadius: '50%', background: '#fff', transition: 'left 0.25s', boxShadow: '0 1px 4px rgba(0,0,0,0.2)' }}/>
            </div>
            <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: annual ? 'var(--text)' : 'var(--text2)', fontWeight: annual ? 600 : 400 }}>Annual</span>
            {annual && <span style={{ padding: '2px 10px', borderRadius: 100, background: 'rgba(5,150,105,0.1)', border: '1px solid rgba(5,150,105,0.25)', fontFamily: "'DM Sans', sans-serif", fontSize: 12, fontWeight: 600, color: '#059669' }}>Save 20%</span>}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="pricing-grid">
          {plans.map((p, i) => (
            <div key={i} className="dm-card" style={{
              borderRadius: 18, overflow: 'hidden', background: 'var(--bg3, #fff)',
              border: p.highlight ? '2px solid var(--accent2, #2563eb)' : '1.5px solid var(--border)',
              boxShadow: p.highlight ? '0 20px 60px rgba(29,78,216,0.15)' : 'var(--shadow)',
              opacity: visible ? 1 : 0, transform: visible ? (p.highlight ? 'scale(1.02)' : 'scale(1)') : 'translateY(24px)',
              transition: `all 0.6s ease ${i * 0.08}s`, position: 'relative',
            }}>
              {p.tag && <div style={{ position: 'absolute', top: 20, right: 20, padding: '3px 12px', borderRadius: 100, background: 'var(--accent, #1d4ed8)', fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 700, color: '#fff', letterSpacing: '0.04em' }}>{p.tag}</div>}
              {p.highlight && <div style={{ height: 4, background: 'linear-gradient(to right, #1d4ed8, #3b82f6)' }}/>}
              <div style={{ padding: '28px' }}>
                <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 18, fontWeight: 700, color: 'var(--text, #0f172a)', margin: '0 0 8px' }}>{p.name}</h3>
                <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13.5, color: 'var(--text2, #64748b)', lineHeight: 1.6, margin: '0 0 20px', minHeight: 44 }}>{p.desc}</p>
                <div style={{ marginBottom: 24 }}>
                  {p.price ? (
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                      <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 38, fontWeight: 800, color: 'var(--text, #0f172a)', letterSpacing: '-0.03em' }}>${p.price.toLocaleString()}</span>
                      <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: 'var(--text2, #64748b)' }}>{p.unit}</span>
                    </div>
                  ) : (
                    <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 28, fontWeight: 700, color: 'var(--text, #0f172a)' }}>Custom</span>
                  )}
                </div>
                <button onClick={scrollToContact} style={{
                  width: '100%', padding: '12px', borderRadius: 9, marginBottom: 24,
                  background: p.highlight ? 'linear-gradient(135deg, #1d4ed8, #2563eb)' : 'var(--bg2, #f8fafc)',
                  border: p.highlight ? 'none' : '1.5px solid var(--border)',
                  cursor: 'pointer', fontFamily: "'DM Sans', sans-serif", fontSize: 14, fontWeight: 600,
                  color: p.highlight ? '#fff' : 'var(--text, #0f172a)',
                  boxShadow: p.highlight ? '0 6px 20px rgba(29,78,216,0.3)' : 'none',
                  transition: 'all 0.2s',
                }}
                onMouseEnter={e => { if (!p.highlight) { e.currentTarget.style.background = 'var(--accentbg)'; e.currentTarget.style.borderColor = 'var(--accent2)'; e.currentTarget.style.color = 'var(--accent)'; } else { e.currentTarget.style.boxShadow = '0 8px 28px rgba(29,78,216,0.45)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}}
                onMouseLeave={e => { if (!p.highlight) { e.currentTarget.style.background = 'var(--bg2, #f8fafc)'; e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.color = 'var(--text)'; } else { e.currentTarget.style.boxShadow = '0 6px 20px rgba(29,78,216,0.3)'; e.currentTarget.style.transform = 'translateY(0)'; }}}>
                  {p.cta}
                </button>
                <div style={{ borderTop: '1px solid var(--border)', paddingTop: 20 }}>
                  {p.features.map(f => (
                    <div key={f} style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7" fill={p.highlight ? 'rgba(29,78,216,0.1)' : 'rgba(0,0,0,0.05)'}/><path d="M5 8L7 10L11 6" stroke={p.highlight ? '#1d4ed8' : '#64748b'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                      <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13.5, color: 'var(--text2, #64748b)' }}>{f}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>

        <p style={{ textAlign: 'center', fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: 'var(--text3, #94a3b8)', marginTop: 28, opacity: visible ? 1 : 0, transition: 'all 0.6s ease 0.4s' }}>
          All plans include full source code ownership, documentation, and a 14-day onboarding guarantee.
        </p>
      </div>
    </section>
  );
};

Object.assign(window, { Pricing });