// Billing & Plan screen — subscription management, usage, invoices

const BILLING_MOCK = {
  plan: 'growth',
  events_today: 4820,
  events_limit: 50000,
  queries_today: 28,
  queries_limit: 500,
};

const PLAN_META = {
  starter:    { label: 'Starter',    badgeBg: 'rgba(148,163,184,0.15)', badgeColor: 'var(--text-2)' },
  teams:      { label: 'Teams',      badgeBg: 'rgba(6,182,212,0.15)',   badgeColor: 'var(--cyan)' },
  growth:     { label: 'Growth',     badgeBg: 'rgba(16,185,129,0.15)',  badgeColor: 'var(--emerald)' },
  enterprise: { label: 'Enterprise', badgeBg: 'rgba(139,92,246,0.15)', badgeColor: 'var(--accent)' },
};

const MOCK_INVOICES = [
  { date: 'Apr 1 2026', plan: 'Growth',  amount: '$1,200.00', status: 'paid' },
  { date: 'Mar 1 2026', plan: 'Growth',  amount: '$1,200.00', status: 'paid' },
  { date: 'Feb 1 2026', plan: 'Starter', amount: '$0.00',     status: 'free' },
];

// ── Sub-components ────────────────────────────────────────────────────────────

const BillingProgressBar = ({ value, limit, color }) => {
  const pct = limit > 0 ? Math.min(100, (value / limit) * 100) : 0;
  const fill = pct > 90 ? 'var(--rose)' : pct > 70 ? 'var(--amber)' : (color || 'var(--accent)');
  return (
    <div style={{ height: 6, background: 'var(--bg-3)', borderRadius: 3, overflow: 'hidden' }}>
      <div style={{ width: pct + '%', height: '100%', background: fill, borderRadius: 3, transition: 'width 0.4s ease' }} />
    </div>
  );
};

const BillingSpinner = () => (
  <span style={{
    display: 'inline-block',
    width: 12,
    height: 12,
    border: '2px solid rgba(255,255,255,0.25)',
    borderTopColor: 'currentColor',
    borderRadius: '50%',
    animation: 'billing-spin 0.65s linear infinite',
    verticalAlign: 'middle',
    marginRight: 5,
  }} />
);

// ── Main component ────────────────────────────────────────────────────────────

const BillingScreen = () => {
  const [usage, setUsage]               = React.useState(null);
  const [usageLoading, setUsageLoading] = React.useState(true);
  const [currentPlan, setCurrentPlan]   = React.useState('growth');
  const [upgrading, setUpgrading]       = React.useState(null);   // plan key currently being upgraded
  const upgradeTimerRef = React.useRef(null);                     // FIX: track starter-downgrade timeout
  const [upgradeError, setUpgradeError] = React.useState(null);
  const [successBanner, setSuccessBanner] = React.useState(null);
  const [portalLoading, setPortalLoading] = React.useState(false);
  const [contactOpen, setContactOpen]   = React.useState(false);
  const [contactForm, setContactForm]   = React.useState({ name: '', email: '', company: '', notes: '' });
  const [contactSent, setContactSent]   = React.useState(false);
  const [contactSending, setContactSending] = React.useState(false);

  // Fetch live usage on mount; fall back to mock if the endpoint is unavailable
  React.useEffect(() => {
    arFetch('/v1/billing/usage/demo-org')
      .then(d => {
        setUsage(d);
        if (d && d.plan) setCurrentPlan(d.plan);
      })
      .catch(() => setUsage(BILLING_MOCK))
      .finally(() => setUsageLoading(false));
  }, []);

  const u = usage || BILLING_MOCK;
  const planMeta = PLAN_META[currentPlan] || PLAN_META.growth;

  // Open Stripe billing portal
  const openPortal = () => {
    setPortalLoading(true);
    arFetch('/v1/billing/portal', { method: 'POST' })
      .then(d => window.open(d.url))
      .catch(() => window.alert('Billing portal requires Stripe to be configured. Set STRIPE_SECRET_KEY in your environment.'))
      .finally(() => setPortalLoading(false));
  };

  // Subscribe / upgrade — free Starter downgrade bypasses Stripe entirely
  const upgradePlan = (plan) => {
    setUpgradeError(null);
    // FIX: cancel any pending starter-downgrade timer before starting a new upgrade
    if (upgradeTimerRef.current) { clearTimeout(upgradeTimerRef.current); upgradeTimerRef.current = null; }

    // Downgrade to Starter is always instant — no payment required
    if (plan === 'starter') {
      setUpgrading('starter');
      upgradeTimerRef.current = setTimeout(() => {
        upgradeTimerRef.current = null;
        setCurrentPlan('starter');
        setSuccessBanner('Plan downgraded to Starter. Changes take effect at the end of your billing period (May 1, 2026).');
        setTimeout(() => setSuccessBanner(null), 7000);
        setUpgrading(null);
      }, 600);
      return;
    }

    setUpgrading(plan);
    arFetch('/v1/billing/subscribe', {
      method: 'POST',
      body: JSON.stringify({
        org_id: 'demo-org',
        email: localStorage.getItem('ar_user_email') || 'demo@northwind.com',
        plan,
      }),
    })
      .then(() => {
        setCurrentPlan(plan);
        setSuccessBanner('Plan upgraded to ' + PLAN_META[plan].label + '!');
        setTimeout(() => setSuccessBanner(null), 5000);
      })
      .catch(() => {
        // Demo mode — simulate the upgrade locally when Stripe isn't configured
        setCurrentPlan(plan);
        setSuccessBanner('Demo mode: plan set to ' + PLAN_META[plan].label + '. Configure STRIPE_SECRET_KEY for real billing.');
        setTimeout(() => setSuccessBanner(null), 7000);
      })
      .finally(() => setUpgrading(null));
  };

  // Contact sales form submission
  const submitContactForm = (e) => {
    e.preventDefault();
    setContactSending(true);
    // Try real endpoint; fall back to local success
    arFetch('/v1/contact', {
      method: 'POST',
      body: JSON.stringify({ ...contactForm, subject: 'Enterprise inquiry' }),
    })
      .catch(() => {/* swallow — show success regardless */})
      .finally(() => {
        setContactSending(false);
        setContactSent(true);
      });
  };

  // Shared styles
  const card = { background: 'var(--bg-1)', border: '1px solid var(--border)', borderRadius: 10, padding: 20 };
  const sectionTitle = { fontWeight: 700, fontSize: 14, marginBottom: 14, color: 'var(--text-1)' };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>

      {/* Keyframe for spinner — injected once, harmless if duplicated */}
      <style>{`@keyframes billing-spin { to { transform: rotate(360deg); } }`}</style>

      {/* ── Page header ── */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <h2 style={{ margin: 0, fontSize: 20, fontWeight: 700 }}>Billing &amp; Plan</h2>
        <button
          className="btn ghost"
          style={{ color: 'var(--accent)', fontSize: 12 }}
          disabled={portalLoading}
          onClick={openPortal}
        >
          {portalLoading ? <><BillingSpinner />Opening…</> : 'Manage billing →'}
        </button>
      </div>

      {/* ── Success banner ── */}
      {successBanner && (
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '10px 14px',
          background: 'rgba(16,185,129,0.10)', border: '1px solid rgba(16,185,129,0.35)',
          borderRadius: 8, fontSize: 13, color: 'var(--emerald)',
        }}>
          <span>✅ {successBanner}</span>
          <button style={{ background: 'none', border: 'none', color: 'var(--text-4)', cursor: 'pointer', fontSize: 16, lineHeight: 1, padding: '0 2px' }} onClick={() => setSuccessBanner(null)}>×</button>
        </div>
      )}

      {/* ── Upgrade error banner (dismissible) ── */}
      {upgradeError && (
        <div style={{
          display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12,
          padding: '10px 14px',
          background: 'rgba(244,63,94,0.08)', border: '1px solid rgba(244,63,94,0.30)',
          borderRadius: 8, fontSize: 12, color: 'var(--rose)',
        }}>
          <span>⚠ {upgradeError}</span>
          <button style={{ background: 'none', border: 'none', color: 'var(--text-4)', cursor: 'pointer', fontSize: 16, lineHeight: 1, flexShrink: 0, padding: '0 2px' }} onClick={() => setUpgradeError(null)}>×</button>
        </div>
      )}

      {/* ── SECTION 1: Current Plan Status ── */}
      <div style={card}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ fontWeight: 700, fontSize: 15 }}>Current Plan</div>
            {usageLoading
              ? <span style={{ fontSize: 11, color: 'var(--text-4)' }}>Loading…</span>
              : <span style={{
                  background: planMeta.badgeBg, color: planMeta.badgeColor,
                  borderRadius: 6, padding: '2px 8px', fontSize: 11, fontWeight: 600,
                  textTransform: 'capitalize',
                }}>{planMeta.label}</span>
            }
          </div>
          <div style={{ fontSize: 11, color: 'var(--text-3)' }}>
            Next billing: <span style={{ color: 'var(--text-2)', fontWeight: 500 }}>May 1, 2026</span>
          </div>
        </div>

        {/* Events today */}
        <div style={{ marginBottom: 14 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 6 }}>
            <span style={{ color: 'var(--text-2)', fontWeight: 500 }}>Events today</span>
            <span style={{ fontFamily: 'var(--mono)', color: 'var(--text-1)', fontSize: 11 }}>
              {usageLoading ? '—' : `${u.events_today.toLocaleString()} / ${u.events_limit.toLocaleString()}`}
            </span>
          </div>
          {usageLoading
            ? <div style={{ height: 6, background: 'var(--bg-3)', borderRadius: 3 }} />
            : <BillingProgressBar value={u.events_today} limit={u.events_limit} color="var(--cyan)" />
          }
          {!usageLoading && (
            <div style={{ fontSize: 11, color: 'var(--text-4)', marginTop: 4 }}>
              {((u.events_today / u.events_limit) * 100).toFixed(1)}% of daily limit used
            </div>
          )}
        </div>

        {/* NL queries today */}
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 6 }}>
            <span style={{ color: 'var(--text-2)', fontWeight: 500 }}>NL queries today</span>
            <span style={{ fontFamily: 'var(--mono)', color: 'var(--text-1)', fontSize: 11 }}>
              {usageLoading ? '—' : `${u.queries_today} / ${u.queries_limit}`}
            </span>
          </div>
          {usageLoading
            ? <div style={{ height: 6, background: 'var(--bg-3)', borderRadius: 3 }} />
            : <BillingProgressBar value={u.queries_today} limit={u.queries_limit} color="var(--accent)" />
          }
          {!usageLoading && (
            <div style={{ fontSize: 11, color: 'var(--text-4)', marginTop: 4 }}>
              {((u.queries_today / u.queries_limit) * 100).toFixed(1)}% of daily limit used
            </div>
          )}
        </div>
      </div>

      {/* ── SECTION 2: Plan Comparison ── */}
      <div>
        <div style={{ ...sectionTitle, marginBottom: 12 }}>Choose a Plan</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>

          {[
            {
              key: 'starter',
              name: 'Starter',
              price: '$0',
              sub: 'Free forever',
              features: [
                'Up to 10,000 events/day',
                '50 NL queries/day',
                '7-day event retention',
                '1 user seat',
                'Community support',
              ],
              borderColor: 'rgba(148,163,184,0.45)',
              bg: 'transparent',
              ctaDowngrade: true,
            },
            {
              key: 'teams',
              name: 'Teams',
              price: '$600',
              sub: 'per month',
              features: [
                'Up to 25,000 events/day',
                '200 NL queries/day',
                '30-day event retention',
                '5 user seats',
                'pgvector memory (500 writes/day)',
                'Email alerting',
              ],
              borderColor: 'rgba(6,182,212,0.45)',
              bg: 'transparent',
              ctaColor: 'var(--text-1)',
              ctaBg: 'transparent',
              ctaBorder: 'rgba(6,182,212,0.5)',
            },
            {
              key: 'growth',
              name: 'Growth',
              price: '$1,200',
              sub: 'per month',
              features: [
                'Up to 50,000 events/day',
                '500 NL queries/day',
                '90-day event retention',
                '12 user seats',
                'pgvector memory (unlimited writes)',
                'Email + Slack alerting',
              ],
              featured: true,
              borderColor: 'var(--emerald)',
              bg: 'rgba(16,185,129,0.04)',
              ctaColor: '#001',
              ctaBg: 'var(--emerald)',
              ctaBorder: 'var(--emerald)',
            },
            {
              key: 'enterprise',
              name: 'Enterprise',
              price: 'Custom',
              sub: 'tailored pricing',
              features: [
                'Unlimited events',
                'Unlimited NL queries',
                'Custom retention policies',
                'Unlimited seats + SSO',
                'SLA + dedicated support',
                'PagerDuty + on-call routing',
              ],
              borderColor: 'rgba(139,92,246,0.45)',
              bg: 'transparent',
              ctaSales: true,
            },
          ].map(plan => {
            const isCurrent = currentPlan === plan.key;
            return (
              <div key={plan.key} style={{
                position: 'relative',
                background: plan.bg || 'var(--bg-1)',
                border: `${isCurrent ? '1.5px' : '1px'} solid ${isCurrent ? plan.borderColor : 'var(--border)'}`,
                borderRadius: 10,
                padding: 20,
                display: 'flex',
                flexDirection: 'column',
              }}>
                {plan.featured && (
                  <div style={{
                    position: 'absolute', top: -1, right: 14,
                    background: 'var(--emerald)', color: '#001',
                    fontSize: 9, fontWeight: 800,
                    padding: '2px 8px', borderRadius: '0 0 6px 6px',
                    textTransform: 'uppercase', letterSpacing: '0.06em',
                  }}>Most Popular</div>
                )}
                <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 4 }}>{plan.name}</div>
                <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--text-1)', marginBottom: 2 }}>{plan.price}</div>
                <div style={{ fontSize: 11, color: 'var(--text-4)', marginBottom: 14 }}>{plan.sub}</div>
                <ul style={{ margin: '0 0 16px', padding: '0 0 0 14px', fontSize: 12, color: 'var(--text-2)', lineHeight: 1.85, flex: 1 }}>
                  {plan.features.map((f, i) => <li key={i}>{f}</li>)}
                </ul>
                {isCurrent ? (
                  <button className="btn ghost" disabled style={{ width: '100%', justifyContent: 'center', opacity: 0.55, cursor: 'default' }}>
                    Your current plan
                  </button>
                ) : plan.ctaSales ? (
                  <button
                    className="btn ghost"
                    style={{ width: '100%', justifyContent: 'center', color: 'var(--accent)', borderColor: 'rgba(139,92,246,0.4)' }}
                    onClick={() => { setContactOpen(true); setContactSent(false); }}
                  >
                    Contact sales →
                  </button>
                ) : (
                  <button
                    className="btn"
                    style={{
                      width: '100%', justifyContent: 'center',
                      background: plan.ctaBg || 'transparent',
                      color: plan.ctaColor || 'var(--text-2)',
                      borderColor: plan.ctaBorder || 'var(--border)',
                    }}
                    disabled={!!upgrading}
                    onClick={() => upgradePlan(plan.key)}
                  >
                    {upgrading === plan.key
                      ? <><BillingSpinner />{plan.ctaDowngrade ? 'Switching…' : 'Upgrading…'}</>
                      : plan.ctaDowngrade ? 'Downgrade to Starter →' : `Upgrade to ${plan.name} →`
                    }
                  </button>
                )}
              </div>
            );
          })}
        </div>
      </div>

      {/* ── SECTION 3: Usage Detail ── */}
      <div style={card}>
        <div style={sectionTitle}>Usage Detail</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>

          {/* Events */}
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 5 }}>
              <span style={{ color: 'var(--text-2)' }}>Events today</span>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--text-1)' }}>
                {usageLoading ? '—' : `${u.events_today.toLocaleString()} / ${u.events_limit.toLocaleString()}`}
              </span>
            </div>
            {usageLoading
              ? <div style={{ height: 6, background: 'var(--bg-3)', borderRadius: 3 }} />
              : <BillingProgressBar value={u.events_today} limit={u.events_limit} color="var(--cyan)" />
            }
          </div>

          {/* NL queries */}
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 5 }}>
              <span style={{ color: 'var(--text-2)' }}>NL queries today</span>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--text-1)' }}>
                {usageLoading ? '—' : `${u.queries_today} / ${u.queries_limit}`}
              </span>
            </div>
            {usageLoading
              ? <div style={{ height: 6, background: 'var(--bg-3)', borderRadius: 3 }} />
              : <BillingProgressBar value={u.queries_today} limit={u.queries_limit} color="var(--accent)" />
            }
          </div>

          {/* Memory writes */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12 }}>
            <span style={{ color: 'var(--text-2)' }}>Memory writes</span>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--text-1)' }}>
              12 / <span style={{ color: 'var(--emerald)' }}>unlimited</span>
            </span>
          </div>

          {/* API calls */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ color: 'var(--text-2)' }}>API calls (last 24h)</span>
              <span style={{
                background: 'rgba(245,158,11,0.12)', color: 'var(--amber)',
                borderRadius: 4, padding: '1px 6px', fontSize: 10, fontWeight: 600,
              }}>rate limited per key</span>
            </div>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--text-1)' }}>8,420</span>
          </div>
        </div>
      </div>

      {/* ── SECTION 4: Invoice History ── */}
      <div style={card}>
        <div style={sectionTitle}>Invoice History</div>
        <div style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden' }}>
          <table className="data-table" style={{ fontSize: 12 }}>
            <thead>
              <tr>
                <th>Date</th>
                <th>Plan</th>
                <th>Amount</th>
                <th>Status</th>
                <th style={{ textAlign: 'right' }}>Invoice</th>
              </tr>
            </thead>
            <tbody>
              {MOCK_INVOICES.map((inv, i) => (
                <tr key={i}>
                  <td style={{ color: 'var(--text-2)', whiteSpace: 'nowrap' }}>{inv.date}</td>
                  <td style={{ color: 'var(--text-1)' }}>{inv.plan}</td>
                  <td style={{ fontFamily: 'var(--mono)', color: 'var(--text-1)' }}>{inv.amount}</td>
                  <td>
                    {inv.status === 'paid' && (
                      <span style={{
                        background: 'rgba(16,185,129,0.15)', color: 'var(--emerald)',
                        borderRadius: 6, padding: '2px 8px', fontSize: 10, fontWeight: 600,
                      }}>Paid ✅</span>
                    )}
                    {inv.status === 'free' && (
                      <span style={{
                        background: 'var(--bg-3)', color: 'var(--text-3)',
                        borderRadius: 6, padding: '2px 8px', fontSize: 10, fontWeight: 600,
                      }}>Free</span>
                    )}
                  </td>
                  <td style={{ textAlign: 'right' }}>
                    {inv.status === 'paid' ? (
                      <button
                        style={{ background: 'none', border: 'none', color: 'var(--accent)', cursor: 'pointer', fontSize: 11, padding: '2px 4px' }}
                        onClick={() => window.alert('Invoice download requires Stripe billing portal. Set STRIPE_SECRET_KEY to enable.')}
                      >
                        PDF ↓
                      </button>
                    ) : (
                      <span style={{ color: 'var(--text-4)' }}>—</span>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div style={{ fontSize: 11, color: 'var(--text-4)', marginTop: 8 }}>
          Full invoice history available in the{' '}
          <span style={{ color: 'var(--accent)', cursor: 'pointer', textDecoration: 'underline' }} onClick={openPortal}>
            Stripe billing portal
          </span>.
        </div>
      </div>

      {/* ── Contact Sales Modal ── */}
      {contactOpen && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 999,
          background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(4px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }} onClick={e => { if (e.target === e.currentTarget) setContactOpen(false); }}>
          <div style={{
            background: 'var(--bg-2)', border: '1px solid var(--border)', borderRadius: 14,
            padding: 28, width: '100%', maxWidth: 440, boxShadow: '0 24px 80px rgba(0,0,0,0.5)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
              <div style={{ fontWeight: 700, fontSize: 16 }}>Contact Enterprise Sales</div>
              <button onClick={() => setContactOpen(false)} style={{ background: 'none', border: 'none', color: 'var(--text-4)', cursor: 'pointer', fontSize: 18, lineHeight: 1, padding: 2 }}>×</button>
            </div>

            {contactSent ? (
              <div style={{ textAlign: 'center', padding: '32px 0' }}>
                <div style={{ fontSize: 36, marginBottom: 12 }}>✅</div>
                <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 8 }}>Message received!</div>
                <div style={{ fontSize: 13, color: 'var(--text-3)', marginBottom: 20 }}>
                  Our sales team will reach out to <strong>{contactForm.email || 'you'}</strong> within 1 business day.
                </div>
                <button className="btn primary" onClick={() => setContactOpen(false)} style={{ justifyContent: 'center' }}>Close</button>
              </div>
            ) : (
              <form onSubmit={submitContactForm} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                  <div>
                    <label style={{ fontSize: 11, color: 'var(--text-3)', display: 'block', marginBottom: 5 }}>Full name *</label>
                    <input
                      required
                      value={contactForm.name}
                      onChange={e => setContactForm(f => ({ ...f, name: e.target.value }))}
                      placeholder="Jane Smith"
                      style={{ width: '100%', boxSizing: 'border-box', background: 'var(--bg-3)', border: '1px solid var(--border)', borderRadius: 6, padding: '8px 10px', color: 'var(--text-1)', fontSize: 13, outline: 'none' }}
                    />
                  </div>
                  <div>
                    <label style={{ fontSize: 11, color: 'var(--text-3)', display: 'block', marginBottom: 5 }}>Work email *</label>
                    <input
                      required type="email"
                      value={contactForm.email}
                      onChange={e => setContactForm(f => ({ ...f, email: e.target.value }))}
                      placeholder="jane@company.com"
                      style={{ width: '100%', boxSizing: 'border-box', background: 'var(--bg-3)', border: '1px solid var(--border)', borderRadius: 6, padding: '8px 10px', color: 'var(--text-1)', fontSize: 13, outline: 'none' }}
                    />
                  </div>
                </div>
                <div>
                  <label style={{ fontSize: 11, color: 'var(--text-3)', display: 'block', marginBottom: 5 }}>Company</label>
                  <input
                    value={contactForm.company}
                    onChange={e => setContactForm(f => ({ ...f, company: e.target.value }))}
                    placeholder="Acme Corp"
                    style={{ width: '100%', boxSizing: 'border-box', background: 'var(--bg-3)', border: '1px solid var(--border)', borderRadius: 6, padding: '8px 10px', color: 'var(--text-1)', fontSize: 13, outline: 'none' }}
                  />
                </div>
                <div>
                  <label style={{ fontSize: 11, color: 'var(--text-3)', display: 'block', marginBottom: 5 }}>What are you looking to accomplish?</label>
                  <textarea
                    rows={3}
                    value={contactForm.notes}
                    onChange={e => setContactForm(f => ({ ...f, notes: e.target.value }))}
                    placeholder="Tell us about your event volume, team size, and any specific requirements…"
                    style={{ width: '100%', boxSizing: 'border-box', background: 'var(--bg-3)', border: '1px solid var(--border)', borderRadius: 6, padding: '8px 10px', color: 'var(--text-1)', fontSize: 13, outline: 'none', resize: 'vertical', fontFamily: 'inherit' }}
                  />
                </div>
                <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', marginTop: 4 }}>
                  <button type="button" className="btn ghost" onClick={() => setContactOpen(false)}>Cancel</button>
                  <button type="submit" className="btn primary" disabled={contactSending} style={{ justifyContent: 'center', minWidth: 120 }}>
                    {contactSending ? <><BillingSpinner />Sending…</> : 'Send message →'}
                  </button>
                </div>
              </form>
            )}
          </div>
        </div>
      )}

    </div>
  );
};

window.BillingScreen = BillingScreen;