// Bundle picker — pick the team you need, start with 3
const BUNDLES = [
  { id: 'core',     name: 'Core team',     hours: 5, tagline: 'Inbox, calendar, chat, contacts', body: 'The five always-on helpers. Triage email, hold time, remember who\'s who.', accent: '#5db98a', helpers: ['Inbox', 'Calendar', 'Chat', 'Contacts', 'Activity'], required: true },
  { id: 'fund',     name: 'Fundraising',   hours: 4, tagline: 'Investors, intros, updates',      body: 'Pipeline, deck + data-room watcher, intro asks, monthly updates, term-sheet diff.', accent: '#5b8def', helpers: ['Investor pipeline', 'Update writer', 'Data-room watcher', 'Intro requester'] },
  { id: 'events',   name: 'Events',        hours: 2, tagline: 'Conferences, panels, meet-ups',   body: 'Scouts conferences, panels and gatherings where your buyers, peers or press are.', accent: '#7c69e0', helpers: ['Event scout', 'CFP drafting', 'Travel holds', 'Post-event follow-up'] },
  { id: 'sales',    name: 'B2B sales',     hours: 6, tagline: 'Leads, sequences, proposals',     body: 'Enriches leads, runs touch sequences in your voice, drafts proposals, reviews pipeline.', accent: '#7c69e0', helpers: ['Lead enrichment', 'Sequences', 'Proposal writer', 'Pipeline review'] },
  { id: 'grants',   name: 'Grants',        hours: 3, tagline: 'Non-dilutive funding',            body: 'Scouts EU/UK/US grants, scores fit, tracks deadlines, drafts proposals.', accent: '#5b8def', helpers: ['Grant scout', 'Fit scoring', 'Deadline tracker', 'Proposal drafter'] },
  { id: 'pr',       name: 'PR & story',    hours: 3, tagline: 'Press, podcasts, launches',       body: 'Press list, pitch drafting, podcast scout, mention monitoring, launch coordination.', accent: '#7c69e0', helpers: ['Press list', 'Pitch drafter', 'Podcast scout', 'Mention monitor'], comingSoon: true },
  { id: 'hire',     name: 'Hiring',        hours: 4, tagline: 'Sourcing, screening, scheduling', body: 'Sources candidates, drafts briefs, schedules interviews, runs reference checks.', accent: '#e07ab0', helpers: ['Sourcing', 'Candidate brief', 'Interview scheduling', 'Reference checks'], comingSoon: true },
  { id: 'product',  name: 'Product',       hours: 3, tagline: 'Roadmap, feedback, changelog',    body: 'Triages user feedback, drafts changelogs, holds the roadmap, writes release notes.', accent: '#e07ab0', helpers: ['Feedback triage', 'Roadmap notes', 'Changelog writer', 'Release notes'], comingSoon: true },
  { id: 'ops',      name: 'Ops & admin',   hours: 3, tagline: 'Invoicing, contracts, vendors',   body: 'Chases invoices, reviews contracts, tracks compliance, manages vendors.', accent: '#e89e5b', helpers: ['Invoice chase', 'Contract review', 'Compliance', 'Vendor mgmt'], comingSoon: true },
];

const BundlePickerSection = () => {
  const [picked, setPicked] = React.useState(new Set(['core', 'fund', 'events']));
  const toggle = (id) => {
    if (id === 'core') return;
    const bundle = BUNDLES.find(b => b.id === id);
    if (bundle?.comingSoon) return;
    setPicked(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };
  const count = picked.size;
  const helperCount = BUNDLES.filter(b => picked.has(b.id)).reduce((sum, b) => sum + b.helpers.length, 0);
  const hoursSaved = BUNDLES.filter(b => picked.has(b.id)).reduce((sum, b) => sum + (b.hours || 0), 0);

  return (
    <section className="dirA-bundles" style={{ padding: '120px 56px', background: 'transparent' }}>
      <style>{`
.dirA-bundles-inner { max-width: 1240px; margin: 0 auto; }
.dirA-bundles-head { text-align: center; margin-bottom: 64px; }
.dirA-bundles-head h2 { font-size: 56px; letter-spacing: -0.03em; font-weight: 600; line-height: 1.04; margin: 0 auto 18px; max-width: 880px; color: #1d1d1f; }
.dirA-bundles-head .lede { font-size: 19px; color: #6e6e73; max-width: 680px; margin: 0 auto; line-height: 1.55; }
.dirA-bundles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dirA-bundle-card {
  background: #fff; border: 1.5px solid rgba(0,0,0,0.06); border-radius: 22px;
  padding: 22px 22px 20px; cursor: pointer; text-align: left;
  font: inherit; font-family: inherit; color: inherit;
  display: flex; flex-direction: column; gap: 0; position: relative;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.dirA-bundle-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.06); }
.dirA-bundle-card.on { border-color: var(--ba, #1d1d1f); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ba, #1d1d1f) 14%, transparent), 0 12px 32px rgba(0,0,0,0.06); }
.dirA-bundle-card.req { cursor: default; background: linear-gradient(180deg, #fff 0%, rgba(0,0,0,0.02) 100%); }
.dirA-bundle-pip { width: 30px; height: 30px; border-radius: 9px; background: var(--ba, #1d1d1f); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 11px; letter-spacing: 0.02em; box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.2); }
.dirA-bundle-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dirA-bundle-h { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: #1d1d1f; flex: 1; }
.dirA-bundle-tag { font-size: 13px; color: #6e6e73; margin-bottom: 12px; }
.dirA-bundle-body { font-size: 13px; color: #424245; line-height: 1.55; margin-bottom: 16px; }
.dirA-bundle-helpers { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.06); margin-top: auto; }
.dirA-bundle-helper { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,0.04); color: #424245; font-weight: 500; white-space: nowrap; }
.dirA-bundle-card.on .dirA-bundle-helper { background: color-mix(in srgb, var(--ba, #1d1d1f) 8%, transparent); color: var(--ba, #1d1d1f); }
.dirA-bundle-tick {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,0.15);
  background: #fff; flex-shrink: 0; display: grid; place-items: center; transition: all 0.15s ease;
}
.dirA-bundle-card.on .dirA-bundle-tick { background: var(--ba, #1d1d1f); border-color: var(--ba, #1d1d1f); }
.dirA-bundle-card.on .dirA-bundle-tick svg { color: #fff; }
.dirA-bundle-req-badge { position: absolute; top: 16px; right: 16px; font-size: 10.5px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,0.04); color: #6e6e73; font-weight: 500; letter-spacing: 0.01em; }
.dirA-bundle-soon-badge { position: absolute; top: 16px; right: 16px; font-size: 10.5px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,0.04); color: #86868b; font-weight: 500; letter-spacing: 0.01em; text-transform: uppercase; }
.dirA-bundle-card.soon { cursor: not-allowed; opacity: 0.62; }
.dirA-bundle-card.soon:hover { transform: none; box-shadow: none; opacity: 0.78; }
.dirA-bundle-card.soon .dirA-bundle-tick { opacity: 0.4; }
.dirA-bundle-summary { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 44px; padding: 22px 28px; background: #fff; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04); max-width: 720px; margin-left: auto; margin-right: auto; }
.dirA-bundle-summary-stat { display: flex; flex-direction: column; align-items: center; white-space: nowrap; }
.dirA-bundle-summary-stat-n { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: #1d1d1f; line-height: 1; }
.dirA-bundle-summary-stat-l { font-size: 11.5px; color: #86868b; margin-top: 4px; letter-spacing: 0.01em; white-space: nowrap; }
.dirA-bundle-summary-stat-l .sm,
.dirA-bundle-summary-cta .sm { display: none; }
.dirA-bundle-summary-stat-l .lg,
.dirA-bundle-summary-cta .lg { display: inline; }
.dirA-bundle-summary-divider { width: 1px; height: 32px; background: rgba(0,0,0,0.08); }
.dirA-bundle-summary-cta { margin-left: 8px; padding: 12px 22px; border-radius: 999px; background: #1d1d1f; color: #fff; font-size: 13.5px; font-weight: 500; border: none; cursor: pointer; }

@media (max-width: 760px) {
  .dirA-bundles { padding: 72px 20px 96px !important; }
  .dirA-bundles-head { margin-bottom: 36px; }
  .dirA-bundles-head h2 { font-size: 32px; line-height: 1.08; letter-spacing: -0.025em; }
  .dirA-bundles-head .lede { font-size: 16px; }
  .dirA-bundles-grid { grid-template-columns: 1fr; gap: 12px; }
  .dirA-bundle-card { padding: 18px 18px 16px; }
  .dirA-bundle-h { font-size: 16px; }
  .dirA-bundle-tag { font-size: 12.5px; margin-bottom: 10px; }
  .dirA-bundle-body { font-size: 12.5px; margin-bottom: 12px; }
  /* Sticky bottom summary — horizontal layout, visible while scrolling
     through the bundle picker section. */
  .dirA-bundle-summary {
    position: sticky;
    bottom: 14px;
    z-index: 20;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 10px 8px 10px 14px;
    margin-top: 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.05);
    background: #fff;
    width: 100%;
    max-width: 100%;
  }
  .dirA-bundle-summary-stat { flex: 0 0 auto; }
  .dirA-bundle-summary-stat-n { font-size: 16px; line-height: 1; }
  .dirA-bundle-summary-stat-l { font-size: 9.5px; margin-top: 2px; letter-spacing: 0; }
  .dirA-bundle-summary-stat-l .lg,
  .dirA-bundle-summary-cta .lg { display: none; }
  .dirA-bundle-summary-stat-l .sm,
  .dirA-bundle-summary-cta .sm { display: inline; }
  .dirA-bundle-summary-divider { display: block; width: 1px; height: 22px; flex: 0 0 auto; }
  .dirA-bundle-summary-cta {
    margin-left: auto;
    width: auto;
    padding: 9px 14px;
    font-size: 12px;
    flex-shrink: 0;
  }
}
      `}</style>

      <div className="dirA-bundles-inner">
        <div className="dirA-bundles-head">
          <div className="dirA-eyebrow" style={{ marginBottom: 18, justifyContent: 'center', display: 'inline-flex' }}>Pick your team</div>
          <h2>Start with three.<br/>Add more anytime.</h2>
          <p className="lede">Every founder needs an inbox triaged and a calendar held. Beyond that, what's painful is up to you — fundraising, grants, sales, hiring, PR. Turn on what matters, leave the rest off.</p>
        </div>

        <div className="dirA-bundles-grid">
          {BUNDLES.map(b => {
            const on = picked.has(b.id);
            return (
              <button key={b.id}
                      className={`dirA-bundle-card ${on ? 'on' : ''} ${b.required ? 'req' : ''} ${b.comingSoon ? 'soon' : ''}`}
                      style={{ '--ba': b.accent }}
                      onClick={() => toggle(b.id)}>
                {b.required && <span className="dirA-bundle-req-badge">Always on</span>}
                {b.comingSoon && <span className="dirA-bundle-soon-badge">Coming soon</span>}
                <div className="dirA-bundle-row">
                  <div className="dirA-bundle-pip">{b.name.split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase()}</div>
                  <div className="dirA-bundle-h">{b.name}</div>
                  {!b.required && (
                    <div className="dirA-bundle-tick">
                      {on && (
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                          <polyline points="20 6 9 17 4 12"/>
                        </svg>
                      )}
                    </div>
                  )}
                </div>
                <div className="dirA-bundle-tag">{b.tagline}</div>
                <div className="dirA-bundle-body">{b.body}</div>
                <div className="dirA-bundle-helpers">
                  {b.helpers.map(h => <span key={h} className="dirA-bundle-helper">{h}</span>)}
                </div>
              </button>
            );
          })}
        </div>

        <div className="dirA-bundle-summary">
          <div className="dirA-bundle-summary-stat">
            <div className="dirA-bundle-summary-stat-n">~{hoursSaved}h</div>
            <div className="dirA-bundle-summary-stat-l"><span className="lg">saved per week</span><span className="sm">/ week</span></div>
          </div>
          <div className="dirA-bundle-summary-divider"></div>
          <div className="dirA-bundle-summary-stat">
            <div className="dirA-bundle-summary-stat-n">{helperCount}</div>
            <div className="dirA-bundle-summary-stat-l">helpers</div>
          </div>
          <div className="dirA-bundle-summary-divider"></div>
          <div className="dirA-bundle-summary-stat">
            <div className="dirA-bundle-summary-stat-n">€{count * 8 + 4}</div>
            <div className="dirA-bundle-summary-stat-l"><span className="lg">per month</span><span className="sm">/ month</span></div>
          </div>
          <button className="dirA-bundle-summary-cta"><span className="lg">Start Free Trial →</span><span className="sm">Free Trial →</span></button>
        </div>
      </div>
    </section>
  );
};

window.BundlePickerSection = BundlePickerSection;
