// Pricing, realistic tiers: Starter / Growth / Scale + Maintenance retainer
const { useRef: usePrRef, useEffect: usePrEffect, useState: usePrState } = React;

const PLANS = [
  {
    id: 'starter',
    name: 'Starter',
    tagline: 'One sharp automation. Proven fast.',
    price: '$2,500',
    priceSub: 'from',
    period: '2-week sprint',
    color: '#00D9A0',
    popular: false,
    features: [
      'Single focused automation (one workflow)',
      '2-week delivery sprint',
      'Full code ownership, no lock-in',
      'Working production deployment',
      'Success metric agreed upfront',
      'Async Loom walkthrough on handoff',
    ],
    cta: 'Start a sprint',
    note: 'Best for: shipping one sharp automation fast.',
  },
  {
    id: 'growth',
    name: 'Growth',
    tagline: 'A real system. Multi-step, production-ready.',
    price: '$7,500',
    priceSub: 'from',
    period: '3–4 week build',
    color: '#8B5CF6',
    popular: true,
    features: [
      'Multi-step AI agent or integration',
      '3–4 week build cycle',
      'Real-user validation in week 3',
      'Full code + infrastructure ownership',
      'Linear board access, full transparency',
      'Documentation & handoff session',
      '30-day post-launch support included',
      'Spec locked before week 1 starts',
    ],
    cta: 'Book a discovery call',
    note: 'Best for: production-grade automation with real operational scope.',
  },
  {
    id: 'scale',
    name: 'Scale',
    tagline: 'Complex. Multi-agent. Enterprise-ready.',
    price: '$15,000',
    priceSub: 'from',
    period: '5–6 week build',
    color: '#F59E0B',
    popular: false,
    features: [
      'Multi-agent systems with memory + tools',
      'Complex integrations (EHR, CRM, MLS, ERP)',
      '5–6 week full build cycle',
      'Custom eval pipelines + quality monitoring',
      'Compliance-aware architecture available',
      'Full documentation + developer handoff',
      'Priority async support',
      'Optional ongoing retainer at reduced rate',
    ],
    cta: 'Talk to us',
    note: 'Best for: replacing entire workflows or teams of manual work.',
  },
];

const MAINTENANCE_TIERS = [
  {
    name: 'Essential',
    price: '$1,500',
    period: '/month',
    color: '#00D9A0',
    features: [
      'Uptime monitoring + alerting',
      'Bug fixes and error resolution',
      'Monthly performance report',
      'Up to 2 small change requests/month',
    ],
  },
  {
    name: 'Active',
    price: '$3,000',
    period: '/month',
    color: '#8B5CF6',
    features: [
      'Everything in Essential',
      'Model retraining as behaviour drifts',
      'Up to 5 change requests/month',
      'Weekly async status update',
      'Eval monitoring + quality reporting',
    ],
  },
  {
    name: 'Partner',
    price: '$4,000',
    period: '/month',
    color: '#F59E0B',
    features: [
      'Everything in Active',
      'Unlimited change requests',
      'Monthly strategy call',
      'Priority SLA, 4hr response',
      'Proactive iteration + improvement sprints',
    ],
  },
];

function Pricing() {
  const [revealed, setRevealed] = usePrState(false);
  const [hoveredPlan, setHoveredPlan] = usePrState(null);
  const [tab, setTab] = usePrState('build'); // 'build' | 'maintain'
  const sectionRef = usePrRef(null);

  usePrEffect(() => {
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) setRevealed(true);
    }, { threshold: 0.08 });
    if (sectionRef.current) obs.observe(sectionRef.current);
    return () => obs.disconnect();
  }, []);

  return (
    <section id="pricing" ref={sectionRef} style={{ padding: '120px 0', background: 'var(--bg-primary)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 40px' }}>

        {/* Header */}
        <div style={{
          marginBottom: 48, textAlign: 'center',
          opacity: revealed ? 1 : 0,
          transform: revealed ? 'translateY(0)' : 'translateY(24px)',
          transition: 'all 0.6s cubic-bezier(0.16,1,0.3,1)',
        }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
            color: 'var(--accent-mint-text)', letterSpacing: '0.12em',
            textTransform: 'uppercase', marginBottom: 12,
          }}>// PRICING</div>
          <h2 style={{
            fontFamily: 'Syne, sans-serif',
            fontSize: 'clamp(28px, 3.8vw, 52px)',
            fontWeight: 700, letterSpacing: '-0.02em',
            lineHeight: 1.1, marginBottom: 14,
          }}>
            We don't sell hours.<br />
            <span style={{ color: 'var(--accent-mint)' }}>We sell outcomes.</span>
          </h2>
          <p style={{
            fontSize: 16, color: 'var(--text-secondary)',
            maxWidth: 500, margin: '0 auto', lineHeight: 1.65,
            fontFamily: 'Inter, sans-serif',
          }}>
            Fixed-price builds. No hourly surprises. Full transparency before you commit.
          </p>
        </div>

        {/* Spec-Locked promise, protects YOUR time, not refund-based */}
        <div style={{
          maxWidth: 820, margin: '0 auto 36px', padding: '16px 24px',
          background: 'linear-gradient(135deg, rgba(0,217,160,0.07), rgba(139,92,246,0.05))',
          border: '1px solid rgba(0,217,160,0.28)',
          borderRadius: 12,
          display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 18, alignItems: 'center',
          opacity: revealed ? 1 : 0, transform: revealed ? 'translateY(0)' : 'translateY(12px)',
          transition: 'all 0.6s cubic-bezier(0.16,1,0.3,1) 0.05s',
        }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 36, height: 36, borderRadius: 9,
            background: 'rgba(0,217,160,0.15)', border: '1px solid rgba(0,217,160,0.4)',
            color: 'var(--accent-mint)', fontSize: 14, fontWeight: 700, flexShrink: 0,
            fontFamily: 'JetBrains Mono, monospace',
          }}>{'</>'}</span>
          <div>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
              color: 'var(--accent-mint-text)', letterSpacing: '0.12em', marginBottom: 4,
              textTransform: 'uppercase',
            }}>// SPEC-LOCKED · NO SCOPE CREEP</div>
            <div style={{
              fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500,
              color: 'var(--text-primary)', lineHeight: 1.55,
            }}>
              Tech stack, scope, success metric, and price are <strong style={{ color: 'var(--accent-mint)', fontWeight: 700 }}>locked in writing before week 1 starts</strong>.
              No mid-build surprises. No "we changed our mind."
            </div>
          </div>
        </div>

        {/* Tab switcher */}
        <div style={{
          display: 'flex', justifyContent: 'center', marginBottom: 40,
          opacity: revealed ? 1 : 0, transition: 'opacity 0.5s ease 0.1s',
        }}>
          <div style={{
            display: 'inline-flex',
            background: 'var(--bg-secondary)',
            border: '1px solid var(--border-subtle)',
            borderRadius: 10, padding: 4, gap: 4,
          }}>
            {[
              { id: 'build', label: 'Fixed Price Builds' },
              { id: 'maintain', label: 'Monthly Retainers' },
            ].map(t => (
              <button key={t.id} onClick={() => setTab(t.id)} style={{
                padding: '9px 20px', border: 'none', cursor: 'pointer',
                borderRadius: 7,
                background: tab === t.id ? 'var(--bg-tertiary)' : 'transparent',
                color: tab === t.id ? 'var(--text-primary)' : 'var(--text-secondary)',
                fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: tab === t.id ? 600 : 400,
                transition: 'all 0.25s ease',
                boxShadow: tab === t.id ? '0 1px 4px rgba(0,0,0,0.2)' : 'none',
                borderBottom: tab === t.id ? '1.5px solid var(--accent-mint)' : '1.5px solid transparent',
              }}>{t.label}</button>
            ))}
          </div>
        </div>

        {/* Build plans */}
        {tab === 'build' && (
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20,
            marginBottom: 40,
          }} className="pricing-grid">
            {PLANS.map((plan, i) => {
              const isHov = hoveredPlan === plan.id;
              return (
                <div key={plan.id}
                  onMouseEnter={() => setHoveredPlan(plan.id)}
                  onMouseLeave={() => setHoveredPlan(null)}
                  style={{
                    opacity: revealed ? 1 : 0,
                    transform: revealed ? 'translateY(0)' : 'translateY(32px)',
                    transition: `all 0.6s cubic-bezier(0.16,1,0.3,1) ${0.1 + i * 0.1}s`,
                    position: 'relative',
                  }}
                >
                  {plan.popular && (
                    <div style={{
                      position: 'absolute', top: -12, left: '50%',
                      transform: 'translateX(-50%)',
                      background: plan.color, color: '#0A0A0B',
                      padding: '4px 16px', borderRadius: 20,
                      fontSize: 10, fontWeight: 700,
                      fontFamily: 'JetBrains Mono, monospace',
                      letterSpacing: '0.06em', whiteSpace: 'nowrap', zIndex: 2,
                    }}>MOST POPULAR</div>
                  )}
                  <div className={`premium-card${plan.popular ? ' featured-halo' : ''}`}
                  style={{
                    background: plan.popular ? 'var(--bg-secondary)' : 'var(--bg-card)',
                    border: `1px solid ${(isHov || plan.popular) ? plan.color + '50' : 'var(--border-subtle)'}`,
                    borderTop: `2px solid ${plan.popular || isHov ? plan.color : 'var(--border-subtle)'}`,
                    borderRadius: 14, padding: '32px 26px',
                    height: '100%', display: 'flex', flexDirection: 'column',
                    boxShadow: isHov ? `0 16px 48px ${plan.color}22` : 'var(--shadow-card)',
                    position: 'relative',
                  }}>
                    <div style={{ marginBottom: 22 }}>
                      <div style={{
                        fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                        color: plan.color, letterSpacing: '0.1em',
                        textTransform: 'uppercase', marginBottom: 10,
                      }}>{plan.name}</div>
                      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4 }}>
                        {plan.priceSub && (
                          <span style={{
                            fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                            color: 'var(--text-tertiary)', letterSpacing: '0.04em',
                          }}>{plan.priceSub}</span>
                        )}
                        <span style={{
                          fontFamily: 'Syne, sans-serif',
                          fontSize: 'clamp(28px, 3vw, 38px)',
                          fontWeight: 700, color: 'var(--text-primary)',
                          letterSpacing: '-0.02em', lineHeight: 1,
                        }}>{plan.price}</span>
                      </div>
                      <div style={{
                        fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                        color: plan.color, marginBottom: 10, letterSpacing: '0.04em',
                      }}>{plan.period}</div>
                      <p style={{
                        fontSize: 13, color: 'var(--text-secondary)',
                        lineHeight: 1.5, fontFamily: 'Inter, sans-serif',
                      }}>{plan.tagline}</p>
                    </div>

                    <div style={{ height: 1, background: `linear-gradient(90deg, ${plan.color}40, transparent)`, marginBottom: 18 }} />

                    <div style={{ display: 'flex', flexDirection: 'column', gap: 9, marginBottom: 20, flex: 1 }}>
                      {plan.features.map((f, fi) => (
                        <div key={fi} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                          <span style={{
                            width: 15, height: 15, borderRadius: '50%',
                            background: `${plan.color}18`,
                            border: `1px solid ${plan.color}50`,
                            display: 'flex', alignItems: 'center', justifyContent: 'center',
                            flexShrink: 0, marginTop: 1, fontSize: 7, color: plan.color,
                          }}>✓</span>
                          <span style={{
                            fontSize: 13, color: 'var(--text-secondary)',
                            lineHeight: 1.45, fontFamily: 'Inter, sans-serif',
                          }}>{f}</span>
                        </div>
                      ))}
                    </div>

                    <p style={{
                      fontSize: 11, color: 'var(--text-tertiary)',
                      fontStyle: 'italic', marginBottom: 18,
                      fontFamily: 'Inter, sans-serif', lineHeight: 1.5,
                    }}>{plan.note}</p>

                    <a href="https://cal.com/ratan-kumar/ai-automation-startegy-call-with-ratan-quantaeight"
                      target="_blank" rel="noopener"
                      style={{
                        display: 'block', textAlign: 'center',
                        padding: '12px 20px',
                        background: plan.popular ? plan.color : 'transparent',
                        color: plan.popular ? '#0A0A0B' : plan.color,
                        border: `1px solid ${plan.color}`,
                        borderRadius: 8, textDecoration: 'none',
                        fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 600,
                        transition: 'all 0.2s ease', letterSpacing: '0.01em',
                      }}
                      onMouseEnter={e => { e.currentTarget.style.background = plan.color; e.currentTarget.style.color = '#0A0A0B'; }}
                      onMouseLeave={e => { e.currentTarget.style.background = plan.popular ? plan.color : 'transparent'; e.currentTarget.style.color = plan.popular ? '#0A0A0B' : plan.color; }}
                    >{plan.cta} →</a>
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {/* Maintain plans */}
        {tab === 'maintain' && (
          <div>
            <p style={{
              textAlign: 'center', marginBottom: 32,
              fontFamily: 'Inter, sans-serif', fontSize: 15,
              color: 'var(--text-secondary)', lineHeight: 1.6,
            }}>
              Once your system is live, keep it reliable, sharp, and improving over time.
            </p>
            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20,
            }} className="pricing-grid">
              {MAINTENANCE_TIERS.map((tier, i) => {
                const isHov = hoveredPlan === `m-${i}`;
                return (
                  <div key={i}
                    onMouseEnter={() => setHoveredPlan(`m-${i}`)}
                    onMouseLeave={() => setHoveredPlan(null)}
                    style={{
                      background: 'var(--bg-card)',
                      border: `1px solid ${isHov ? tier.color + '50' : 'var(--border-subtle)'}`,
                      borderTop: `2px solid ${isHov ? tier.color : 'var(--border-subtle)'}`,
                      borderRadius: 14, padding: '28px 24px',
                      transition: 'all 0.3s ease',
                      transform: isHov ? 'translateY(-4px)' : 'translateY(0)',
                      boxShadow: isHov ? `0 12px 40px ${tier.color}15` : 'var(--shadow-card)',
                    }}
                  >
                    <div style={{
                      fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                      color: tier.color, letterSpacing: '0.1em',
                      textTransform: 'uppercase', marginBottom: 12,
                    }}>{tier.name}</div>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 2, marginBottom: 18 }}>
                      <span style={{
                        fontFamily: 'Syne, sans-serif', fontSize: 36, fontWeight: 700,
                        color: 'var(--text-primary)', letterSpacing: '-0.02em', lineHeight: 1,
                      }}>{tier.price}</span>
                      <span style={{
                        fontFamily: 'Inter, sans-serif', fontSize: 14,
                        color: 'var(--text-tertiary)',
                      }}>{tier.period}</span>
                    </div>
                    <div style={{ height: 1, background: `linear-gradient(90deg, ${tier.color}40, transparent)`, marginBottom: 18 }} />
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 9, marginBottom: 24 }}>
                      {tier.features.map((f, fi) => (
                        <div key={fi} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                          <span style={{
                            width: 15, height: 15, borderRadius: '50%',
                            background: `${tier.color}18`,
                            border: `1px solid ${tier.color}50`,
                            display: 'flex', alignItems: 'center', justifyContent: 'center',
                            flexShrink: 0, marginTop: 1, fontSize: 7, color: tier.color,
                          }}>✓</span>
                          <span style={{
                            fontSize: 13, color: 'var(--text-secondary)',
                            lineHeight: 1.45, fontFamily: 'Inter, sans-serif',
                          }}>{f}</span>
                        </div>
                      ))}
                    </div>
                    <a href="https://cal.com/ratan-kumar/ai-automation-startegy-call-with-ratan-quantaeight"
                      target="_blank" rel="noopener"
                      style={{
                        display: 'block', textAlign: 'center',
                        padding: '11px 20px',
                        background: 'transparent', color: tier.color,
                        border: `1px solid ${tier.color}`,
                        borderRadius: 8, textDecoration: 'none',
                        fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 600,
                        transition: 'all 0.2s ease',
                      }}
                      onMouseEnter={e => { e.currentTarget.style.background = tier.color; e.currentTarget.style.color = '#0A0A0B'; }}
                      onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = tier.color; }}
                    >Get started →</a>
                  </div>
                );
              })}
            </div>
            <p style={{
              textAlign: 'center', marginTop: 24,
              fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
              color: 'var(--text-tertiary)',
            }}>Retainers are optional, all builds include 30 days of post-launch support at no extra cost.</p>
          </div>
        )}

        {/* Enterprise row */}
        <div style={{
          marginTop: 32,
          background: 'var(--bg-secondary)',
          border: '1px solid var(--border-subtle)',
          borderRadius: 14, padding: '28px 32px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          flexWrap: 'wrap', gap: 20,
          opacity: revealed ? 1 : 0, transition: 'opacity 0.6s ease 0.5s',
        }}>
          <div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--accent-mint-text)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 6 }}>// ENTERPRISE</div>
            <h3 style={{ fontFamily: 'Syne, sans-serif', fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', marginBottom: 6 }}>
              Complex build? Dedicated team? Custom SLA?
            </h3>
            <p style={{ fontSize: 14, color: 'var(--text-secondary)', fontFamily: 'Inter, sans-serif' }}>
              We scope enterprise builds separately, compliance, white-label, multi-system, on-site.
            </p>
          </div>
          <a href="https://cal.com/ratan-kumar/ai-automation-startegy-call-with-ratan-quantaeight"
            target="_blank" rel="noopener"
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '12px 24px', background: 'var(--accent-mint)',
              color: '#0A0A0B', borderRadius: 8, textDecoration: 'none',
              fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 700,
              transition: 'opacity 0.2s ease', whiteSpace: 'nowrap',
            }}
            onMouseEnter={e => e.currentTarget.style.opacity = '0.85'}
            onMouseLeave={e => e.currentTarget.style.opacity = '1'}
          >Talk to us →</a>
        </div>

        <p style={{
          marginTop: 20, textAlign: 'center',
          fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
          color: 'var(--text-tertiary)',
          opacity: revealed ? 1 : 0, transition: 'opacity 0.6s ease 0.6s',
        }}>All prices in USD. GBP / AED equivalents available on request.</p>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .pricing-grid { grid-template-columns: 1fr !important; max-width: 460px; margin-left: auto !important; margin-right: auto !important; }
        }
        @media (max-width: 768px) {
          #pricing > div > div[style*="display: flex"][style*="justifyContent: space-between"] {
            flex-direction: column !important;
            text-align: center !important;
          }
          #pricing > div > div[style*="display: flex"][style*="justifyContent: space-between"] a {
            width: 100% !important;
            text-align: center !important;
            justify-content: center !important;
          }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Pricing });