const { useState: useStateCS } = React;

const csStyles = {
  wrap: { padding: 'var(--section-y) 32px', background: 'var(--paper)', color: 'var(--ink)' },
  inner: { maxWidth: 1280, margin: '0 auto' },
  header: { maxWidth: 900, marginBottom: 56, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' },
  headerLeft: { maxWidth: 720 },
  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: 24, paddingBottom: 8, maxWidth: 640 },
  italic: { color: 'var(--blue)' },
  sub: { fontSize: 17, lineHeight: 1.55, color: 'var(--ink-muted)', maxWidth: 560 },
  count: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 96, lineHeight: 1, color: 'var(--blue)', letterSpacing: '-0.03em' },
  countLabel: { fontSize: 13, color: 'var(--ink-muted)', marginTop: 8, maxWidth: 200, lineHeight: 1.4 },

  layout: {
    display: 'grid', gridTemplateColumns: '320px 1fr', gap: 0,
    border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', overflow: 'hidden',
    background: 'var(--paper)',
  },

  tabs: {
    background: 'var(--paper-deep)',
    borderRight: '1px solid var(--line)',
    display: 'flex', flexDirection: 'column',
  },
  tab: (active) => ({
    textAlign: 'left',
    padding: '22px 24px',
    borderBottom: '1px solid var(--line)',
    background: active ? 'var(--paper)' : 'transparent',
    borderLeft: active ? '3px solid var(--blue)' : '3px solid transparent',
    cursor: 'pointer',
    transition: 'background .15s ease',
    display: 'block',
    width: '100%',
  }),
  tabKicker: { fontSize: 10, color: 'var(--ink-muted)', textTransform: 'uppercase', letterSpacing: '0.1em', fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums', marginBottom: 6 },
  tabName: (active) => ({
    fontSize: 15, fontWeight: active ? 600 : 500,
    color: active ? 'var(--ink)' : 'var(--ink-soft)', marginBottom: 6, lineHeight: 1.3,
  }),
  tabMeta: { fontSize: 12, color: 'var(--ink-muted)', display: 'flex', alignItems: 'center', gap: 8 },
  dot: { width: 4, height: 4, borderRadius: 2, background: 'var(--ink-muted)' },

  panel: { padding: '48px 56px', minHeight: 520, display: 'flex', flexDirection: 'column' },
  panelHead: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 24, marginBottom: 32, paddingBottom: 28, borderBottom: '1px solid var(--line)' },
  panelKicker: { fontSize: 11, color: 'var(--blue)', textTransform: 'uppercase', letterSpacing: '0.1em', fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums', marginBottom: 10, fontWeight: 600 },
  panelTitle: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 32, lineHeight: 1.1, letterSpacing: '-0.02em', fontWeight: 600, marginBottom: 6, paddingBottom: 2 },
  panelClient: { fontSize: 14, color: 'var(--ink-muted)' },
  panelMeta: { display: 'flex', gap: 24, flexWrap: 'wrap' },
  metaLabel: { fontSize: 11, color: 'var(--ink-muted)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 4, fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums' },
  metaValue: { fontSize: 14, color: 'var(--ink)', fontWeight: 500 },

  body: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, marginBottom: 32 },
  colTitle: { fontSize: 11, color: 'var(--ink-muted)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 14, fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums' },
  obj: { fontSize: 16, lineHeight: 1.55, color: 'var(--ink-soft)' },
  scopeList: { listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 },
  scopeItem: { fontSize: 14.5, lineHeight: 1.5, color: 'var(--ink-soft)', paddingLeft: 18, position: 'relative' },
  scopeBullet: { position: 'absolute', left: 0, top: 8, width: 6, height: 6, borderRadius: 3, background: 'var(--blue)' },

  outcomes: {
    marginTop: 'auto',
    background: 'var(--paper-deep)',
    border: '1px solid var(--line-soft)',
    borderRadius: 14,
    padding: '28px 32px',
  },
  outcomesHead: { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 20, gap: 16 },
  outcomesTitle: { fontSize: 11, color: 'var(--ink-muted)', textTransform: 'uppercase', letterSpacing: '0.1em', fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums', fontWeight: 600 },
  outcomesNote: { fontSize: 12, color: 'var(--ink-muted)' },
  metricsGrid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 24 },
  metric: { borderLeft: '1px solid var(--line)', paddingLeft: 16 },
  metricN: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 36, lineHeight: 1.05, color: 'var(--ink)', letterSpacing: '-0.02em', marginBottom: 4 },
  metricNAccent: { color: 'var(--blue)' },
  metricL: { fontSize: 12.5, color: 'var(--ink-muted)', lineHeight: 1.4 },
};

const CASES = [
  {
    kicker: 'Outbound pipeline',
    name: 'Full social outbound pipeline system',
    client: 'Financial Advisory Firm · two senior profiles',
    duration: '3 months · Dec 2025 – Feb 2026',
    scope: 'Dedicated team, 40 hrs/week combined',
    objective: 'Build a complete social outbound system across two senior profiles, turning daily outreach, content, and engagement into booked conversations with qualified prospects.',
    work: [
      'Sales playbook: ICP framework, outreach + follow-up scripts, structured DM flow',
      'Daily cold outreach and relationship-building across both profiles',
      'Authority-driven content used as outreach conversation starters',
      'Inbound DMs, comment threads, and audience nurturing handled end-to-end',
    ],
    metrics: [
      { n: '748', l: 'Outbound conversations started', accent: true },
      { n: '24', l: 'Booking-stage opportunities' },
      { n: '1,000+', l: 'New followers' },
      { n: '40K+', l: 'Content impressions' },
    ],
    note: 'Engagement rates regularly exceeded 10 to 17%, well above typical platform benchmarks.',
  },
  {
    kicker: 'Audience growth',
    name: 'Daily content + targeted network expansion',
    client: 'B2B SaaS / Tech Leader',
    duration: '2.5 months · Jul – Sep 2025',
    scope: 'Daily content + targeted outreach',
    objective: "Grow the client's professional audience and position them as a recognized voice in SaaS, AI, and leadership. Fully organic, no paid promotion.",
    work: [
      'Daily posting on AI, SaaS growth, leadership, and social selling',
      'Targeted engagement with industry accounts and conversations',
      'Cold connection outreach to expand the network with relevant professionals',
      'Active comment and message management',
    ],
    metrics: [
      { n: '+7,662', l: 'New followers in ~2.5 months', accent: true },
      { n: '7×/wk', l: 'Posting cadence sustained' },
      { n: '100%', l: 'Organic, no paid promotion' },
    ],
    note: 'Rapid follower growth and increased visibility achieved in under three months by combining content, engagement, and outreach daily.',
  },
  {
    kicker: 'Personal brand',
    name: 'Content + first-hour engagement strategy',
    client: 'Founder / Leadership Creator',
    duration: '3 months · Dec 2025 – Feb 2026',
    scope: '5 posts/week + post-launch engagement',
    objective: 'Increase visibility and authority through consistent, discussion-driven content tuned to spark debate, sharing, and commentary.',
    work: [
      'Five posts per week on leadership, hiring, and workplace insights',
      'First-hour engagement playbook to maximize early distribution',
      'Comment-bait formats designed for shares and replies',
      'Ongoing audience interaction and reply management',
    ],
    metrics: [
      { n: '4.6M+', l: 'Total impressions across the period', accent: true },
      { n: '+2,341', l: 'New followers (42,295 → 44,636)' },
      { n: '3.09M', l: 'Top-performing post impressions' },
    ],
    note: 'Consistent publishing combined with first-hour engagement produced viral reach and steady audience growth.',
  },
];

function CaseStudies() {
  const [active, setActive] = useStateCS(0);
  const c = CASES[active];

  return (
    <section id="case-studies" style={csStyles.wrap} className="reveal" data-screen-label="Case Studies">
      <div style={csStyles.inner}>
        <div style={csStyles.header}>
          <div style={csStyles.headerLeft}>
            <div className="mono" style={csStyles.eyebrow}>Case studies</div>
            <h2 style={csStyles.h2}>
              Real scope. <span style={csStyles.italic}>Real outcomes.</span>
            </h2>
            <p style={csStyles.sub}>
              Three engagements where we ran the numbers. Each shows what BlueMoso actually did, the cadence we held, and the measurable results inside a fixed window.
            </p>
          </div>
        </div>

        <div style={csStyles.layout} className="bm-cs-layout">
          <div style={csStyles.tabs} className="bm-cs-tabs" role="tablist">
            {CASES.map((cs, i) => (
              <button
                key={i}
                style={csStyles.tab(i === active)}
                onClick={() => setActive(i)}
                role="tab"
                aria-selected={i === active}
              >
                <div style={csStyles.tabKicker}>0{i + 1} · {cs.kicker}</div>
                <div style={csStyles.tabName(i === active)}>{cs.name}</div>
                <div style={csStyles.tabMeta}>
                  <span>{cs.client.split(' · ')[0]}</span>
                  <span style={csStyles.dot} />
                  <span>{cs.duration.split(' · ')[0]}</span>
                </div>
              </button>
            ))}
          </div>

          <div style={csStyles.panel}>
            <div style={csStyles.panelHead} className="bm-cs-panel-head">
              <div>
                <div style={csStyles.panelKicker}>{c.kicker}</div>
                <div style={csStyles.panelTitle}>{c.name}</div>
                <div style={csStyles.panelClient}>{c.client}</div>
              </div>
              <div style={csStyles.panelMeta}>
                <div>
                  <div style={csStyles.metaLabel}>Period</div>
                  <div style={csStyles.metaValue}>{c.duration}</div>
                </div>
                <div>
                  <div style={csStyles.metaLabel}>Scope</div>
                  <div style={csStyles.metaValue}>{c.scope}</div>
                </div>
              </div>
            </div>

            <div style={csStyles.body} className="bm-cs-body">
              <div>
                <div style={csStyles.colTitle}>Objective</div>
                <p style={csStyles.obj}>{c.objective}</p>
              </div>
              <div>
                <div style={csStyles.colTitle}>What BlueMoso did</div>
                <ul style={csStyles.scopeList}>
                  {c.work.map((item, j) => (
                    <li key={j} style={csStyles.scopeItem}>
                      <span style={csStyles.scopeBullet} />
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            </div>

            <div style={csStyles.outcomes}>
              <div style={csStyles.outcomesHead}>
                <div style={csStyles.outcomesTitle}>Results in window</div>
                <div style={csStyles.outcomesNote}>{c.note}</div>
              </div>
              <div style={csStyles.metricsGrid}>
                {c.metrics.map((m, i) => (
                  <div key={i} style={csStyles.metric}>
                    <div style={{ ...csStyles.metricN, ...(m.accent ? csStyles.metricNAccent : null) }}>{m.n}</div>
                    <div style={csStyles.metricL}>{m.l}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { CaseStudies });