const painStyles = {
  wrap: {
    background: 'transparent',
    color: '#fff',
    padding: '72px 24px 0',
    position: 'relative',
  },
  weave: { display: 'none' },
  warmth: { display: 'none' },
  grain: { display: 'none' },
  inner: { maxWidth: 960, margin: '0 auto', position: 'relative', zIndex: 1, textAlign: 'center' },
  eyebrow: {
    fontFamily: "'Outfit', system-ui, sans-serif",
    fontSize: 12,
    color: 'rgba(255,255,255,0.85)',
    letterSpacing: '0.08em',
    textTransform: 'uppercase',
    fontWeight: 500,
    margin: '0 0 16px',
  },
  h2: {
    fontFamily: "'Outfit', system-ui, sans-serif",
    fontSize: 52,
    lineHeight: 1.05,
    letterSpacing: '-0.03em',
    fontWeight: 600,
    color: '#fff',
    maxWidth: 760,
    // Bottom margin compensates for the removed section-sub paragraph
    // (which used to sit between the headline and the scrolling cloud).
    margin: '0 auto 48px',
    textWrap: 'balance',
  },
  accent: { color: 'var(--blue-mid)', fontWeight: 600 },
};

// CSS for the cloud + pills. Lives inside the component because the homepage
// doesn't load icp-pages.css (where the matching rules live for ICP pages).
const PAIN_CLOUD_CSS = `
.bm-pain-cloud .bm-cloud-outer {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}
.bm-pain-cloud .bm-cloud-viewport {
  position: relative;
  height: 200px;
  overflow: hidden;
  /* Fade rows in/out at top + bottom by masking the pill layer itself, so the
     wrapper's gradient + pinstripes show through cleanly (no painted band). */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.bm-pain-cloud .bm-cloud-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  will-change: transform;
  animation: bm-cloud-scroll 30s linear infinite;
}
.bm-pain-cloud .bm-cloud-strip {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.bm-pain-cloud .bm-cloud-row {
  display: flex;
  justify-content: center;
  gap: 14px;
}
@keyframes bm-cloud-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
.bm-pain-cloud .bm-pill {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  padding: 8px 16px;
  white-space: nowrap;
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .bm-pain-cloud .bm-cloud-track { animation: none; }
}
@media (max-width: 640px) {
  .bm-pain-cloud .bm-pill { font-size: 13px; padding: 7px 13px; }
  .bm-pain-cloud .bm-cloud-viewport { height: 200px; }
  /* Stack to one pill per row so long labels (e.g. 'Resolving scheduling
     conflicts across calendars') don't overflow narrow viewports. */
  .bm-pain-cloud .bm-cloud-row { flex-direction: column; align-items: center; gap: 8px; }
  .bm-pain-cloud .bm-pill { max-width: calc(100vw - 32px); }
}
`;

// Generic homepage list — the operational drag every executive shares.
const HOMEPAGE_TASKS = [
  'Inbox triage and reply drafting',
  'Travel and conference booking',
  'Calendar conflict resolution',
  'Follow-up emails after meetings',
  'Expense report reconciliation',
  'CRM pipeline cleanup and hygiene',
  'Slide formatting and deck polish',
  'Newsletter drafting and sends',
  'Weekly status updates to your team',
  'Vendor invoice processing and categorization',
  'Reference checks on new candidates',
  'Event RSVP tracking and confirmations',
  'Customer support email triage',
  'Competitor research and weekly scans',
  'Meeting confirmations and reschedules',
  'Birthday and client touchpoint outreach',
  'Document filing and folder cleanup',
  'Contract and subscription renewal nudges',
  'Signature chasing on stalled docs',
  'Call note logging and action items',
  'Chasing down stalled paperwork',
  'Resolving scheduling conflicts across calendars',
  'Recap emails after every meeting',
  'Researching prospects and decision-makers',
  'Data entry across your tools and trackers',
  'Social media drafting and scheduling',
  'Contractor and vendor coordination',
  'Deck formatting and brand cleanup',
];

function Pain({ tasks }) {
  const list = (tasks && tasks.length) ? tasks : HOMEPAGE_TASKS;

  // Chunk the list into rows of 2 so the visible cloud is always 2 columns × N rows.
  const rows = [];
  for (let i = 0; i < list.length; i += 2) rows.push([list[i], list[i + 1]]);

  // Render the list twice so the upward scroll loops seamlessly:
  // when the first strip has fully scrolled past, the second is at the start.
  const renderStrip = (keyPrefix) => (
    <div className="bm-cloud-strip">
      {rows.map((row, i) => (
        <div key={`${keyPrefix}-r${i}`} className="bm-cloud-row">
          {row.map((t, j) => t ? (
            <span key={`${keyPrefix}-r${i}-${j}`} className="bm-pill">{t}</span>
          ) : null)}
        </div>
      ))}
    </div>
  );

  return (
    <section style={painStyles.wrap} className="reveal bm-section bm-pain-cloud" id="pain">
      <style dangerouslySetInnerHTML={{ __html: PAIN_CLOUD_CSS }} />
      <div style={painStyles.inner}>
        <p style={painStyles.eyebrow} className="mono">The work that fills your week</p>

        <h2 className="serif" style={painStyles.h2}>
          This is what's keeping you <span style={painStyles.accent}>away from what matters.</span>
        </h2>

        <div className="bm-cloud-outer">
          <div className="bm-cloud-viewport">
            <div className="bm-cloud-track">
              {renderStrip('a')}
              {renderStrip('b')}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pain });