const { useState: useStatePk } = React;

const pkStyles = {
  wrap: { padding: 'var(--section-y-lg) 32px', background: 'var(--paper-deep)', borderTop: '1px solid var(--line-soft)' },
  inner: { maxWidth: 1280, margin: '0 auto' },
  header: { textAlign: 'center', marginBottom: 40, maxWidth: 760, marginLeft: 'auto', marginRight: 'auto' },
  eyebrow: { fontSize: 12, color: 'var(--ink-muted)', letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 20 },
  h2: { fontSize: 52, lineHeight: 1.05, letterSpacing: '-0.03em', fontWeight: 600, fontFamily: "'Outfit', system-ui, sans-serif", marginBottom: 20 },
  italic: { color: 'var(--blue)' },
  sub: { fontSize: 17, color: 'var(--ink-muted)', lineHeight: 1.55 },

  // Toggle
  toggleWrap: { display: 'flex', justifyContent: 'center', marginBottom: 44 },
  toggle: {
    display: 'inline-flex', padding: 4, background: '#fff',
    border: '1px solid var(--line-soft)', borderRadius: 999,
    boxShadow: 'var(--shadow-sm)',
  },
  toggleBtn: (active) => ({
    padding: '10px 22px',
    fontSize: 14, fontWeight: 500,
    borderRadius: 999,
    background: active ? 'var(--ink)' : 'transparent',
    color: active ? '#fff' : 'var(--ink-muted)',
    transition: 'background .2s, color .2s',
    display: 'flex', alignItems: 'center', gap: 8,
  }),

  // General VA tier grid
  grid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 },
  card: (featured) => ({
    background: featured ? 'var(--ink)' : '#fff',
    color: featured ? '#fff' : 'var(--ink)',
    border: featured ? '1px solid var(--ink)' : '1px solid var(--line-soft)',
    borderRadius: 20,
    padding: 36,
    position: 'relative',
    display: 'flex', flexDirection: 'column',
  }),
  tag: { position: 'absolute', top: -12, right: 24, background: 'var(--blue)', color: '#fff', fontSize: 11, fontWeight: 500, padding: '5px 10px', borderRadius: 999, letterSpacing: '0.04em', textTransform: 'uppercase' },
  pkName: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 26, lineHeight: 1, letterSpacing: '-0.02em', fontWeight: 600, marginBottom: 18 },
  startingAt: (featured) => ({ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 500, color: featured ? 'rgba(255,255,255,0.85)' : 'var(--ink-muted)', marginBottom: 6, fontFamily: "'JetBrains Mono', ui-monospace, monospace" }),
  priceRow: { display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 },
  priceDollar: { fontSize: 22, opacity: 0.85, fontFamily: "'Outfit', system-ui, sans-serif" },
  priceNum: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 54, lineHeight: 1, letterSpacing: '-0.02em' },
  priceUnit: { fontSize: 14, opacity: 0.85, marginBottom: 4 },
  hoursLine: { fontSize: 14, marginBottom: 20, opacity: 0.9 },
  hoursLineStrong: { color: 'var(--blue)', fontWeight: 500 },
  pkDesc: { fontSize: 14, lineHeight: 1.5, opacity: 0.9, marginBottom: 24, paddingBottom: 24, borderBottom: '1px solid var(--line-soft)' },
  pkDescDark: { borderBottom: '1px solid rgba(255,255,255,0.12)' },
  feats: { listStyle: 'none', padding: 0, margin: 0, flex: 1, display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 28 },
  feat: { display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 14, lineHeight: 1.45 },
  cta: (featured) => ({
    background: featured ? '#fff' : 'var(--ink)',
    color: featured ? 'var(--ink)' : '#fff',
    padding: '14px 18px', borderRadius: 10,
    fontSize: 14, fontWeight: 500,
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
    width: '100%',
  }),

  // Specialist grid
  specGrid: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 },
  specCard: {
    background: '#fff',
    border: '1px solid var(--line-soft)',
    borderRadius: 20,
    padding: 28,
    display: 'flex', flexDirection: 'column', gap: 14,
  },
  specTop: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' },
  specBadge: { width: 38, height: 38, borderRadius: 10, background: 'var(--blue-soft)', color: 'var(--blue)', display: 'grid', placeItems: 'center' },
  specPrice: { fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums', fontSize: 13, color: 'var(--ink-muted)' },
  specName: { fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em' },
  specDesc: { fontSize: 14, color: 'var(--ink-muted)', lineHeight: 1.55 },
  specIncludes: { display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 4 },
  specChip: { fontSize: 12, padding: '4px 10px', background: 'var(--blue-soft)', color: 'var(--blue-deep)', borderRadius: 999 },

  // Match (placement-only) tier
  matchWrap: {
    background: '#fff', border: '1px solid var(--line-soft)', borderRadius: 20,
    overflow: 'hidden',
    display: 'grid', gridTemplateColumns: '1fr 1fr',
  },
  matchLeft: { padding: '44px 48px', borderRight: '1px solid var(--line-soft)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 32 },
  matchRight: { padding: '44px 48px', background: 'var(--paper)', display: 'flex', flexDirection: 'column', gap: 18 },
  matchTag: { display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, fontWeight: 500, padding: '5px 10px', borderRadius: 999, letterSpacing: '0.06em', textTransform: 'uppercase', background: 'var(--blue-soft)', color: 'var(--blue-deep)', alignSelf: 'flex-start' },
  matchH: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 40, lineHeight: 1.05, letterSpacing: '-0.02em', marginTop: 18, marginBottom: 16 },
  matchSub: { fontSize: 15, lineHeight: 1.6, color: 'var(--ink-muted)', marginBottom: 24 },
  matchPriceRow: { display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 },
  matchPriceNum: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 64, lineHeight: 1, letterSpacing: '-0.02em' },
  matchPriceDollar: { fontSize: 26, opacity: 0.85, fontFamily: "'Outfit', system-ui, sans-serif" },
  matchPriceUnit: { fontSize: 14, color: 'var(--ink-muted)', marginBottom: 6 },
  matchPriceNote: { fontSize: 13, color: 'var(--ink-muted)', marginTop: 4 },
  matchCta: { background: 'var(--ink)', color: '#fff', padding: '14px 22px', borderRadius: 10, fontSize: 14, fontWeight: 500, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6, alignSelf: 'flex-start', marginTop: 28 },
  matchInclTitle: { fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 500, color: 'var(--ink-muted)', marginBottom: 4 },
  matchInclList: { listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 },
  matchInclItem: { display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 14, lineHeight: 1.5 },
  matchCompare: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, marginTop: 24 },
  matchCompareCard: { padding: 20, borderRadius: 14, border: '1px dashed var(--line-soft)', background: '#fff' },
  matchCompareLabel: { fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-muted)', marginBottom: 6, fontWeight: 500 },
  matchCompareVal: { fontSize: 14, lineHeight: 1.5, color: 'var(--ink)' },

  // Flex hours block
  flexWrap: {
    background: 'var(--ink)', color: '#fff',
    borderRadius: 20, padding: '40px 44px',
    display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48, alignItems: 'center',
  },
  flexEyebrow: { fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.85)', marginBottom: 14, fontWeight: 600 },
  flexH: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 36, lineHeight: 1.1, letterSpacing: '-0.02em', marginBottom: 14 },
  flexSub: { fontSize: 15, lineHeight: 1.6, color: 'rgba(255,255,255,0.92)' },
  flexStats: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 },
  flexStat: { background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 14, padding: '18px 20px' },
  flexStatLabel: { fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.82)', marginBottom: 8, fontWeight: 600 },
  flexStatValue: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 28, lineHeight: 1 },

  note: { textAlign: 'center', marginTop: 44, fontSize: 14, color: 'var(--ink-muted)' },
};

// Exact pricing from client sheet
const generalVA = [
  {
    name: 'Starter', price: 700, daily: 2,
    desc: 'Test the waters. Focused, high-value delegation a couple hours a day.',
    feats: ['Dedicated VA, 2 hrs/day', 'Monday–Friday coverage', 'BlueMoso success manager', 'Monthly QA review', 'Month-to-month, swap anytime'],
    cta: 'Book a call',
  },
  {
    name: 'Part-Time', price: 1400, daily: 4,
    featured: true, tag: 'Most popular',
    desc: 'Our most common engagement. Enough hours for a meaningful operational lift.',
    feats: ['Dedicated VA, 4 hrs/day', 'Monday–Friday coverage', 'Dedicated manager + weekly QA', 'SOP + process documentation', 'Swap VAs anytime, no charge'],
    cta: 'Start delegating',
  },
  {
    name: 'Full-Time', price: 2800, daily: 8,
    desc: 'Full capacity. A true extension of your team, owning workflows end-to-end.',
    feats: ['Dedicated VA, 8 hrs/day', 'Monday–Friday coverage', 'Dedicated manager + weekly QA', 'SOP + workflow ownership', 'Priority matching + backup'],
    cta: 'Book a call',
  },
];

const specialists = [
  {
    icon: 'pen',
    name: 'Content & Copy',
    desc: 'Long-form, short-form, newsletters, blog, and caption writing on your voice.',
    includes: ['Blog & SEO', 'Newsletters', 'Captions', 'Briefs'],
  },
  {
    icon: 'briefcase',
    name: 'Design & Creative',
    desc: 'Figma and Canva execution against your brand, templates, and launches.',
    includes: ['Social graphics', 'Pitch decks', 'Email templates', 'Simple video edits'],
  },
  {
    icon: 'target',
    name: 'Social Media',
    desc: 'Calendar, publishing, community, and reporting across your channels.',
    includes: ['Content calendar', 'Scheduling', 'Community', 'Analytics'],
  },
  {
    icon: 'chart',
    name: 'Ops & Systems',
    desc: 'CRM hygiene, automations, SOPs, and the dashboards that keep work measurable.',
    includes: ['CRM', 'Zapier / Make', 'SOPs', 'Reporting'],
  },
];

function Packages() {
  const [mode, setMode] = useStatePk('general');
  const matchIncludes = [
    'Discovery call to scope the role',
    'Sourcing & vetting from our talent pool',
    'Shortlist of 2–3 pre-screened candidates',
    'Interview coordination',
    'Offer + light onboarding handoff',
    '60-day free replacement guarantee',
  ];
  const fmt = (n) => n.toLocaleString('en-US');

  return (
    <section id="packages" style={pkStyles.wrap} className="reveal bm-section">
      <div style={pkStyles.inner}>
        <div style={pkStyles.header}>
          <div className="mono" style={pkStyles.eyebrow}>Transparent pricing</div>
          <h2 style={pkStyles.h2}>Your time back. <span style={pkStyles.italic}>Here's what it costs.</span></h2>
          <p style={pkStyles.sub}>
            No hidden fees, no surprise upcharges. Same vetted talent pool, two ways to work with us.
          </p>
        </div>

        {/* Toggle */}
        <div style={pkStyles.toggleWrap}>
          <div style={pkStyles.toggle}>
            <button style={pkStyles.toggleBtn(mode === 'general')} onClick={() => setMode('general')}>
              <Icon name="briefcase" size={14} color={mode === 'general' ? '#fff' : 'var(--ink-muted)'} />
              Managed VA
            </button>
            <button style={pkStyles.toggleBtn(mode === 'match')} onClick={() => setMode('match')}>
              <Icon name="check" size={14} color={mode === 'match' ? '#fff' : 'var(--ink-muted)'} />
              Match
            </button>
          </div>
        </div>

        {mode === 'general' && (
          <div style={pkStyles.grid} className="bm-packages-grid">
            {generalVA.map((p) => (
              <div key={p.name} style={pkStyles.card(p.featured)}>
                {p.tag && <div style={pkStyles.tag}>{p.tag}</div>}
                <div style={pkStyles.pkName}>{p.name}</div>
                <div style={pkStyles.startingAt(p.featured)}>Starting at</div>
                <div style={pkStyles.priceRow}>
                  <span style={pkStyles.priceDollar}>$</span>
                  <span style={pkStyles.priceNum}>{fmt(p.price)}</span>
                  <span style={pkStyles.priceUnit}>/month</span>
                </div>
                <div style={pkStyles.hoursLine}>
                  <span style={{ ...pkStyles.hoursLineStrong, color: p.featured ? '#fff' : 'var(--blue)' }}>{p.daily} hrs/day</span>
                  <span style={{ opacity: 0.78 }}> · Monday–Friday</span>
                </div>
                <div style={{ ...pkStyles.pkDesc, ...(p.featured ? pkStyles.pkDescDark : {}) }}>{p.desc}</div>
                <ul style={{ ...pkStyles.feats, marginBottom: 0 }}>
                  {p.feats.map(f => (
                    <li key={f} style={pkStyles.feat}>
                      <Icon name="check" size={14} color={p.featured ? 'var(--blue-mid)' : 'var(--blue)'} />
                      <span style={{ opacity: p.featured ? 0.96 : 0.92 }}>{f}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        )}

        {mode === 'general' && (
          <div style={{
            marginTop: 32,
            background: '#fff',
            border: '1px solid var(--line-soft)',
            borderRadius: 16,
            padding: '32px 28px',
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            gap: 20,
            boxShadow: 'var(--shadow-sm)',
            textAlign: 'center',
          }} className="bm-packages-cta-bar">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, maxWidth: 460 }}>
              <div style={{ fontSize: 20, fontWeight: 600, color: 'var(--ink)', letterSpacing: '-0.01em' }}>
                Ready to get your time back?
              </div>
              <div style={{ fontSize: 14, color: 'var(--ink-muted)', lineHeight: 1.5 }}>
                Book a call with our team and we'll scope the right package with you.
              </div>
            </div>
            <a href="#cta" data-booking-modal-trigger data-booking-source="packages_managed_cta" style={{
              background: 'var(--ink)', color: '#fff',
              padding: '16px 36px', borderRadius: 10,
              fontSize: 15, fontWeight: 500,
              display: 'inline-flex', alignItems: 'center', gap: 8,
              minWidth: 240, justifyContent: 'center',
              whiteSpace: 'nowrap',
            }}>
              Start delegating <Icon name="arrow" size={14} />
            </a>
          </div>
        )}

        {mode === 'match' && (
          <div style={pkStyles.matchWrap} className="bm-packages-match">
            <div style={pkStyles.matchLeft}>
              <div>
                <div style={pkStyles.matchTag}>Placement only · No management</div>
                <h3 style={pkStyles.matchH}>We find your VA. <span style={pkStyles.italic}>You run them.</span></h3>
                <p style={pkStyles.matchSub}>
                  For founders and operators who don't need our management layer. We do the hard part: sourcing, vetting, shortlisting. Then we hand off a vetted match and you take it from there.
                </p>
                <div style={{ fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 500, color: 'var(--ink-muted)', marginBottom: 8 }}>Starting at</div>
                <div style={pkStyles.matchPriceRow}>
                  <span style={pkStyles.matchPriceDollar}>$</span>
                  <span style={pkStyles.matchPriceNum}>999</span>
                  <span style={pkStyles.matchPriceUnit}>one-time</span>
                </div>
                <div style={{ ...pkStyles.matchPriceNote, fontSize: 15, marginTop: 10 }}>
                  Final price depends on skill and experience level.
                </div>
                <a href="#cta" data-booking-modal-trigger data-booking-source="packages_match_cta" style={pkStyles.matchCta}>
                  Get matched <Icon name="arrow" size={14} />
                </a>
              </div>
              {/* "Best for / Not for" compare cards removed per Claude Design
                  update — new design shows only the headline, pill, body,
                  price, and CTA on the left; What's included on the right. */}
            </div>
            <div style={pkStyles.matchRight}>
              <div style={pkStyles.matchInclTitle}>What's included</div>
              <ul style={pkStyles.matchInclList}>
                {matchIncludes.map(f => (
                  <li key={f} style={pkStyles.matchInclItem}>
                    <Icon name="check" size={14} color="var(--blue)" />
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: 'auto', paddingTop: 24, borderTop: '1px solid var(--line-soft)', fontSize: 13, color: 'var(--ink-muted)', lineHeight: 1.55 }}>
                After placement, the VA works directly with you on your contract. You can upgrade to a managed package any time.
              </div>
            </div>
          </div>
        )}

        <div style={pkStyles.note}>
          {mode === 'general' && <>Final pricing scales with <strong style={{ color: 'var(--ink)' }}>skill, experience, and the level of support</strong> you need. Not sure which fits? Most clients start on <strong style={{ color: 'var(--ink)' }}>Part-Time</strong> and adjust after 30 days.</>}
          {mode === 'match' && <>Want us to manage them too? Compare with <button onClick={() => setMode('general')} style={{ color: 'var(--blue)', fontWeight: 500, textDecoration: 'underline' }}>Managed VA packages</button>.</>}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Packages });