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)' },
  stack: { display: 'grid' },
};

// Managed VA — single starting price; final pricing scales with hours, schedule,
// and the skill/experience tier the client chooses to work with.
const managedIncludes = [
  'Matched to the right virtual assistant based on your needs and working style',
  'Shortlist of 2–5 pre-screened candidates',
  'Dedicated BlueMoso success manager',
  'Ongoing support and management',
  'Access to backup support when needed',
  'Easy replacements if needed',
  'Flexible month-to-month plans',
];

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–5 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>

        <div style={pkStyles.stack}>
          <div style={{ ...pkStyles.matchWrap, gridArea: '1 / 1', visibility: mode === 'general' ? 'visible' : 'hidden', pointerEvents: mode === 'general' ? 'auto' : 'none' }} className="bm-packages-match" aria-hidden={mode !== 'general'}>
            <div style={pkStyles.matchLeft}>
              <div>
                <div style={pkStyles.matchTag}>Fully managed · One dedicated VA</div>
                <h3 style={pkStyles.matchH}>A high-performing VA, <span style={pkStyles.italic}>managed by us.</span></h3>
                <p style={pkStyles.matchSub}>
                  We match you with the right virtual assistant, then help both of you succeed. Every match is based on skills, work style, communication style, personality, and experience, and we stay involved to provide ongoing support and guidance.
                </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}>700</span>
                  <span style={pkStyles.matchPriceUnit}>/month</span>
                </div>
                <div style={{ ...pkStyles.matchPriceNote, fontSize: 15, marginTop: 10 }}>
                  Minimum <strong style={{ color: 'var(--ink)' }}>2 hours a day</strong>, Monday–Friday.
                </div>
                <a href="#cta" data-booking-modal-trigger data-booking-source="packages_managed_cta" style={pkStyles.matchCta}>
                  Take my time back <Icon name="arrow" size={14} />
                </a>
              </div>
            </div>
            <div style={pkStyles.matchRight}>
              <div style={pkStyles.matchInclTitle}>What's included</div>
              <ul style={pkStyles.matchInclList}>
                {managedIncludes.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 }}>
                Managed pricing depends on the number of hours you need and whether the role calls for graveyard shifts, weekends, or holidays. It also scales with skill and experience, there are different tiers you can choose to work with. We'll scope the right fit on the call.
              </div>
            </div>
          </div>

          <div style={{ ...pkStyles.matchWrap, gridArea: '1 / 1', visibility: mode === 'match' ? 'visible' : 'hidden', pointerEvents: mode === 'match' ? 'auto' : 'none' }} className="bm-packages-match" aria-hidden={mode !== 'match'}>
            <div style={pkStyles.matchLeft}>
              <div>
                <div style={pkStyles.matchTag}>Placement only · No management</div>
                <h3 style={pkStyles.matchH}>We find your VA.<br /><span style={pkStyles.italic}>You manage 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}>
                  Take my time back <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>

        {mode === 'match' && (
          <div style={pkStyles.note}>
            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 });