// Case Studies — real DFV client wins with actual numbers

const CASES = [
  {
    id: 'skincare',
    sector: 'DTC Skincare · Meta Ads',
    title: '40% CPA Reduction in 30 Days — Without Increasing Budget',
    tagline: 'More results. Same spend. No magic — just a creative system.',
    color: '#00B4FF', rgb: '0,180,255',
    problem: "Running 4 creatives for 3 months. Frequency at 8.4. CPM had tripled. The in-house team was churning out new ads but the briefing process took 3 weeks. By the time new creative launched, the audience was already fatigued on the hook.",
    solution: "Deployed the DFV creative sprint system. Mapped all 6 competitor hook angles. Identified 2 underused emotional triggers. Built a structured weekly testing cadence — 20 new concepts in the first batch, all variants of the 2 winning angles from week 1.",
    steps: [
      'Competitor creative audit: 6 brands, 84 ads analyzed',
      'Hook angle map: "social proof" and "ritual" identified as underused',
      '20 concepts in first batch — fresh hooks within 48hr',
      'Weekly kill/scale cycle: 3 winners scaled aggressively in week 2',
      'CPA dropped 40% by day 28',
    ],
    metrics: [
      { v: '–40%',  l: 'CPA reduction',         tone: 'success' },
      { v: '20+',   l: 'New concepts launched', tone: 'cyan'    },
      { v: '3',     l: 'Winning ads scaled',    tone: 'amber'   },
      { v: '48hr',  l: 'First batch delivered', tone: 'success' },
    ],
    timeline: 'From audit call to first live ad: 48 hours',
    quote: "We'd been stuck at the same CPA for months. DFV's first creative batch had 3 winners — by week 4 we'd cut our cost-per-purchase almost in half. And they'd done it without touching our budget.",
    cite: 'Founder, DTC Skincare Brand (US)',
  },
  {
    id: 'fashion',
    sector: 'Fashion DTC · Lead Automation',
    title: '8% to 23% Lead-to-Call Conversion in 60 Days',
    tagline: 'Leads stopped falling through the cracks the moment the AI went live.',
    color: '#F59E0B', rgb: '245,158,11',
    problem: "Generating leads through a quiz funnel. Leads were collecting in a spreadsheet. Founder was manually emailing them 2–3 days later. By the time she followed up, they'd either forgotten or bought from a competitor. Lead-to-call conversion sitting at 8%.",
    solution: "Deployed the 7-node DFV intake stack. Lead hits the form, Claude reads the quiz answers, identifies psychological state (FEAR / FRUSTRATION / DESIRE / DOUBT), sends a personalized email within 4 seconds. A 5-part, 7-day nurture sequence follows automatically based on profile.",
    steps: [
      'Lead intake webhook built in Day 1',
      '4 ICP psychological states mapped to distinct nurture paths',
      'AI personalization: references quiz answers in every email',
      '8% → 14% in week 1 → 23% by week 8',
    ],
    metrics: [
      { v: '23%',   l: 'Lead-to-call (was 8%)', tone: 'success' },
      { v: '4 sec', l: 'AI reply (was days)',   tone: 'amber'   },
      { v: '5-part',l: 'Nurture sequence live', tone: 'cyan'    },
      { v: '2.9×',  l: 'Conversion lift',       tone: 'success' },
    ],
    timeline: 'Automation live: Day 3 after onboarding call',
    quote: "I used to lose leads every week because I was too busy to follow up fast enough. Now the system replies before I've even seen the notification. My conversion rate nearly tripled.",
    cite: 'Founder, Fashion DTC Brand (UK)',
  },
  {
    id: 'b2b',
    sector: 'B2B Education · Content Automation',
    title: 'From 8 Posts/Month to 60+ — at 80% Lower Content Cost',
    tagline: 'More content. Less cost. Zero creative fatigue.',
    color: '#9B6CFF', rgb: '155,108,255',
    problem: "Spending $12,000/month on a content agency producing 8 blog posts and 12 social posts. Content was generic, rarely drove traffic, and the team spent more time briefing and reviewing than on their core product. Paying for volume, getting noise.",
    solution: "Replaced the agency entirely with the DFV content system. Weekly AI content pipeline: Mon competitor analysis feeds topic selection, Tue AI drafts 12 SEO posts + 48 social assets, Thu human review on flagged posts only (3–4), Fri auto-publish. Total human time: ~2hr/wk.",
    steps: [
      'Content agency cancelled — saving $12,000/month',
      'Moved to DFV Orbit at $1,997/month',
      'Output: 60+ posts/month vs 8 (7.5× volume)',
      'Human review reduced to 2 hours/week',
      'Organic search traffic up 140% in 90 days',
    ],
    metrics: [
      { v: '–80%',  l: 'Content cost',       tone: 'success' },
      { v: '7.5×',  l: 'Volume lift',        tone: 'violet'  },
      { v: '+140%', l: 'Organic traffic',    tone: 'cyan'    },
      { v: '2hr',   l: 'Human time / week',  tone: 'amber'   },
    ],
    timeline: 'System fully live: Week 1 · Savings started: Day 1',
    quote: "We were paying $12K a month for 8 blog posts and a lot of meetings. DFV replaced the whole operation for $2K and we're now putting out 60+ pieces a month. The quality is better, the SEO is better, and my team actually has time to build the product.",
    cite: 'Head of Marketing, B2B Education Platform (CA)',
  },
];

const TONE_COLOR = {
  success: '#00E5A0',
  cyan:    '#00B4FF',
  amber:   '#F59E0B',
  violet:  '#9B6CFF',
};

function CaseStudyCard({ c, i }) {
  const [revealRef, vis] = useReveal();
  const flipped = i % 2 === 1;

  return (
    <div
      ref={revealRef}
      style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, 1fr)',
        gap: 48,
        alignItems: 'start',
        padding: '72px 0',
        borderTop: i === 0 ? 'none' : '1px solid rgba(13,33,55,0.8)',
        opacity: vis ? 1 : 0,
        transform: vis ? 'translateY(0)' : 'translateY(36px)',
        transition: 'opacity .8s ease, transform .8s ease',
      }}
      className="cs-grid"
    >
      {/* LEFT — narrative */}
      <div style={{ order: flipped ? 2 : 1 }}>
        <div style={{
          fontFamily: 'var(--font-mono)',
          fontSize: 11,
          fontWeight: 600,
          letterSpacing: '0.12em',
          textTransform: 'uppercase',
          color: c.color,
          marginBottom: 14,
        }}>
          {c.sector}
        </div>

        <h3 className="serif" style={{
          fontSize: 'clamp(26px, 2.6vw, 34px)',
          fontWeight: 800,
          letterSpacing: '-0.025em',
          lineHeight: 1.15,
          color: 'var(--text)',
          marginBottom: 14,
        }}>
          {c.title}
        </h3>

        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          fontFamily: 'var(--font-body)',
          fontSize: 14, fontWeight: 600,
          color: TONE_COLOR.success,
          marginBottom: 20,
        }}>
          <span style={{ display: 'block', width: 22, height: 2, background: TONE_COLOR.success }}/>
          {c.tagline}
        </div>

        <p style={{ fontSize: 14.5, lineHeight: 1.8, color: 'var(--muted-strong)', marginBottom: 14 }}>
          <strong style={{ color: 'var(--text)', fontWeight: 600 }}>The problem — </strong>
          {c.problem}
        </p>
        <p style={{ fontSize: 14.5, lineHeight: 1.8, color: 'var(--muted-strong)', marginBottom: 22 }}>
          <strong style={{ color: 'var(--text)', fontWeight: 600 }}>What we did — </strong>
          {c.solution}
        </p>

        <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 24, padding: 0 }}>
          {c.steps.map((s, idx) => (
            <li key={idx} style={{
              fontFamily: 'var(--font-mono)',
              fontSize: 12.5,
              color: 'var(--muted-strong)',
              display: 'flex', alignItems: 'flex-start', gap: 10,
              lineHeight: 1.55,
            }}>
              <span style={{ color: c.color, flexShrink: 0, marginTop: 2 }}>→</span>
              {s}
            </li>
          ))}
        </ul>

        <blockquote style={{
          background: 'rgba(6,20,34,0.55)',
          borderLeft: `3px solid ${c.color}66`,
          borderRadius: '0 10px 10px 0',
          padding: '18px 22px',
          margin: 0,
        }}>
          <p style={{
            fontSize: 14.5, color: 'var(--text)', lineHeight: 1.7,
            fontStyle: 'italic', marginBottom: 10,
            fontFamily: 'var(--font-display)',
          }}>"{c.quote}"</p>
          <cite style={{
            fontFamily: 'var(--font-mono)',
            fontSize: 11,
            color: 'var(--muted)',
            fontStyle: 'normal',
            letterSpacing: '0.05em',
          }}>— {c.cite}</cite>
        </blockquote>
      </div>

      {/* RIGHT — results card */}
      <div style={{
        order: flipped ? 1 : 2,
        position: 'sticky',
        top: 100,
      }} className="cs-results-wrap">
        <div className="glass-card" style={{
          padding: 32,
          position: 'relative',
          overflow: 'hidden',
          borderRadius: 20,
        }}>
          {/* accent top bar */}
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0, height: 2,
            background: `linear-gradient(90deg, transparent, ${c.color}99, transparent)`,
          }}/>

          <div style={{
            fontFamily: 'var(--font-mono)',
            fontSize: 11, fontWeight: 600,
            letterSpacing: '0.12em',
            textTransform: 'uppercase',
            color: 'var(--muted)',
            marginBottom: 22,
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <span style={{
              display: 'inline-block', width: 6, height: 6, borderRadius: '50%',
              background: TONE_COLOR.success,
              boxShadow: `0 0 calc(10px * var(--glow)) ${TONE_COLOR.success}`,
            }}/>
            Results · {c.metrics[0]?.tone === 'success' ? 'measured' : 'tracked'}
          </div>

          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 12,
            marginBottom: 22,
          }}>
            {c.metrics.map((m, idx) => (
              <div key={idx} style={{
                background: 'rgba(2,11,24,0.55)',
                border: '1px solid var(--border)',
                borderRadius: 10,
                padding: '16px 14px',
              }}>
                <div style={{
                  fontFamily: 'var(--font-body)',
                  fontSize: 'clamp(22px, 2.2vw, 28px)',
                  fontWeight: 700,
                  lineHeight: 1,
                  color: TONE_COLOR[m.tone],
                  marginBottom: 6,
                  textShadow: `0 0 calc(16px * var(--glow)) ${TONE_COLOR[m.tone]}44`,
                  letterSpacing: '-0.01em',
                }}>{m.v}</div>
                <div style={{
                  fontFamily: 'var(--font-mono)',
                  fontSize: 10,
                  fontWeight: 600,
                  letterSpacing: '0.07em',
                  textTransform: 'uppercase',
                  color: 'var(--muted)',
                  lineHeight: 1.35,
                }}>{m.l}</div>
              </div>
            ))}
          </div>

          <div style={{
            fontFamily: 'var(--font-mono)',
            fontSize: 11.5,
            color: 'var(--muted-strong)',
            borderTop: '1px solid var(--border)',
            paddingTop: 14,
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{
              display: 'inline-block', width: 5, height: 5, borderRadius: '50%',
              background: TONE_COLOR.success,
            }}/>
            {c.timeline}
          </div>
        </div>
      </div>
    </div>
  );
}

function InternalCase() {
  const [revealRef, vis] = useReveal();
  const stats = [
    { v: '4 sec',  l: 'Lead response (was 2–3 days)',          tone: 'success' },
    { v: '5-part', l: 'Fully automated nurture',                tone: 'cyan'    },
    { v: '3×/wk',  l: 'Blog posts auto-published Mon/Wed/Fri',  tone: 'amber'   },
    { v: 'Weekly', l: 'Competitor intel · Mon 8am',             tone: 'violet'  },
  ];

  return (
    <div
      ref={revealRef}
      style={{
        marginTop: 80,
        padding: '56px 48px',
        borderRadius: 24,
        background: 'linear-gradient(135deg, rgba(155,108,255,0.06), rgba(0,180,255,0.04))',
        border: '1px solid rgba(155,108,255,0.18)',
        position: 'relative',
        overflow: 'hidden',
        opacity: vis ? 1 : 0,
        transform: vis ? 'translateY(0)' : 'translateY(36px)',
        transition: 'opacity .8s ease, transform .8s ease',
      }}
      className="cs-internal"
    >
      <div style={{
        position: 'absolute',
        inset: 0,
        background: 'radial-gradient(ellipse 60% 50% at 50% 50%, rgba(155,108,255,0.08), transparent 65%)',
        pointerEvents: 'none',
      }}/>

      <div style={{ position: 'relative', textAlign: 'center', maxWidth: 640, margin: '0 auto 40px' }}>
        <Pill>The Meta Case Study</Pill>
        <h3 className="serif" style={{
          fontSize: 'clamp(26px, 3vw, 40px)',
          fontWeight: 800,
          letterSpacing: '-0.025em',
          lineHeight: 1.15,
          margin: '14px 0 12px',
          color: 'var(--text)',
        }}>
          We are our own best case study.
        </h3>
        <p style={{ fontSize: 15, color: 'var(--muted-strong)', lineHeight: 1.75 }}>
          Every system I sell runs inside my own business first. Every number below is live on my own stack.
        </p>
      </div>

      <div
        className="cs-internal-grid"
        style={{
          position: 'relative',
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 16,
        }}
      >
        {stats.map((s, idx) => (
          <div key={idx} style={{
            background: 'rgba(6,20,34,0.65)',
            backdropFilter: 'blur(12px)',
            WebkitBackdropFilter: 'blur(12px)',
            border: '1px solid rgba(155,108,255,0.15)',
            borderRadius: 16,
            padding: '26px 20px',
            textAlign: 'center',
          }}>
            <div style={{
              fontFamily: 'var(--font-body)',
              fontSize: 'clamp(24px, 2.6vw, 34px)',
              fontWeight: 700,
              color: TONE_COLOR[s.tone],
              lineHeight: 1,
              marginBottom: 8,
              letterSpacing: '-0.01em',
              textShadow: `0 0 calc(18px * var(--glow)) ${TONE_COLOR[s.tone]}44`,
            }}>{s.v}</div>
            <div style={{
              fontFamily: 'var(--font-mono)',
              fontSize: 10.5,
              fontWeight: 600,
              letterSpacing: '0.07em',
              textTransform: 'uppercase',
              color: 'var(--muted)',
              lineHeight: 1.45,
            }}>{s.l}</div>
          </div>
        ))}
      </div>

      <blockquote style={{
        position: 'relative',
        marginTop: 36,
        padding: '28px 36px',
        borderRadius: 16,
        background: 'rgba(6,20,34,0.5)',
        border: '1px solid rgba(155,108,255,0.18)',
        textAlign: 'center',
      }}>
        <p style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(16px, 1.8vw, 22px)',
          fontWeight: 400,
          fontStyle: 'italic',
          lineHeight: 1.55,
          color: 'var(--text)',
          marginBottom: 12,
        }}>
          "I built DFV because I kept watching brands lose money to agencies that had{' '}
          <span style={{ color: '#9B6CFF', fontWeight: 600, fontStyle: 'normal' }}>
            12 account managers and 2 people actually doing the work.
          </span>{' '}
          I wanted the version where every dollar spent compounds — not disappears into overhead."
        </p>
        <cite style={{
          fontFamily: 'var(--font-mono)',
          fontSize: 11.5,
          color: 'var(--muted)',
          fontStyle: 'normal',
          letterSpacing: '0.06em',
        }}>
          — Shinabaze Ajiya, Founder, DreamFoxVerse
        </cite>
      </blockquote>
    </div>
  );
}

function CaseStudiesSection() {
  return (
    <section id="case-studies" className="section-full" data-screen-label="Case Studies">
      <div className="section" style={{ padding: '0 var(--section-px)' }}>
        <div style={{ maxWidth: 760, margin: '0 auto 24px', textAlign: 'center' }}>
          <Pill>Proof · Real Clients</Pill>
          <h2 className="display" style={{
            fontSize: 'clamp(36px, 4.6vw, 58px)',
            marginTop: 16,
            marginBottom: 14,
          }}>
            Three wins. Different problems.{' '}
            <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>One system.</span>
          </h2>
          <p style={{
            fontSize: 16,
            color: 'var(--muted-strong)',
            lineHeight: 1.75,
            maxWidth: 560,
            margin: '0 auto',
          }}>
            Every metric below is a real client number — no projections, no estimates.
            The before, the after, and the exact steps in between.
          </p>
        </div>

        <div>
          {CASES.map((c, i) => <CaseStudyCard key={c.id} c={c} i={i} />)}
        </div>

        <InternalCase />
      </div>

      <style>{`
        @media (max-width: 960px) {
          .cs-grid { grid-template-columns: 1fr !important; gap: 28px !important; padding: 56px 0 !important; }
          .cs-grid > div { order: unset !important; }
          .cs-results-wrap { position: static !important; }
          .cs-internal-grid { grid-template-columns: 1fr 1fr !important; }
          .cs-internal { padding: 40px 24px !important; }
        }
        @media (max-width: 560px) {
          .cs-internal-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

window.CaseStudiesSection = CaseStudiesSection;