function Why() {
  const ours = [
    'Full end-to-end content system',
    'Results oriented',
    'Experience with 100+ Clients',
    'Dedicated team, always accountable',
    'Personalised CRM',
    '24/7 Support, Anytime You Need Us',
  ];
  const others = [
    'Unreliable freelancers with slow turnarounds',
    'No content strategy — just basic edits',
    'Cookie-cutter templates for every client',
    'Unreliable and inconsistent delivery',
    'Limited revisions with no client-focused approach',
    'Guesswork instead of data-driven decisions',
    'Delayed responses and poor communication',
    'You end up managing everything yourself',
  ];

  const cardBase = {
    padding: '64px 34px 58px',
    borderRadius: 22,
    background: 'linear-gradient(180deg, #0c1220 0%, #090d18 100%)',
    border: '1px solid rgba(74,142,255,0.10)',
    display: 'flex',
    flexDirection: 'column',
    height: '100%',
  };

  return (
    <section id="case-study" style={{ padding: '120px 0', position: 'relative', overflow: 'hidden' }}>
      {/* Brand-blue halo glow — large, rises from behind the Nexcut card all the way up through the heading, like the reference */}
      <div aria-hidden style={{
        position: 'absolute',
        left: '37.2%',
        top: 40,
        transform: 'translateX(-50%)',
        width: 900,
        height: 320,
        background: 'radial-gradient(ellipse 55% 100% at 50% 100%, rgba(225,238,255,0.85) 0%, rgba(180,210,255,0.6) 8%, rgba(110,167,255,0.5) 20%, rgba(74,142,255,0.28) 42%, rgba(41,73,229,0.12) 62%, transparent 78%)',
        filter: 'blur(38px)',
        pointerEvents: 'none',
        zIndex: 0,
      }} />
      {/* Bright pinpoint highlight right at the card's top edge */}
      <div aria-hidden style={{
        position: 'absolute',
        left: '37.2%',
        top: 290,
        transform: 'translateX(-50%)',
        width: 260,
        height: 140,
        background: 'radial-gradient(ellipse at center, rgba(255,255,255,0.7), rgba(200,220,255,0.35) 35%, transparent 70%)',
        filter: 'blur(24px)',
        pointerEvents: 'none',
        zIndex: 0,
      }} />

      <div className="container" style={{ textAlign: 'center', marginBottom: 60, position: 'relative', zIndex: 1 }}>
        <SectionEyebrow label="Why Choose Us" />
        <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 56px)', marginTop: 22, lineHeight: 1.05 }}>
          <span className="serif-italic" style={{ color: 'var(--ink-dim)' }}>Know What</span><br />
          We Do Differently
        </h2>
      </div>

      <div className="container" style={{ position: 'relative', maxWidth: 840, zIndex: 1 }}>

        <div className="why-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 20,
          position: 'relative',
          zIndex: 1,
          alignItems: 'stretch',
        }}>
          {/* Ours */}
          <Reveal>
            <div className="why-ours-wrap">
              <span className="why-ours-glow" aria-hidden></span>
              <div className="why-ours-inner why-card" style={{ ...cardBase, background: 'linear-gradient(180deg, #0c1220 0%, #090d18 100%)', border: 'none', borderRadius: 21 }}>
                <span className="why-ours-sheen" aria-hidden></span>
                <div style={{ marginBottom: 22, position: 'relative', display: 'flex', alignItems: 'center', gap: 12 }}>
                  <Logo size={32} />
                  <span className="why-ours-dot" aria-hidden></span>
                </div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 22, position: 'relative' }}>
                  {ours.map((item, i) => (
                    <li key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: 15.5 }}>
                      <span style={{
                        width: 22, height: 22,
                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                        color: '#fff', flexShrink: 0,
                      }}><IconCheck size={18} /></span>
                      {item}
                    </li>
                  ))}
                </ul>

                <div style={{ flex: 1 }} />

                <div style={{
                  marginTop: 22, padding: '16px 18px',
                  borderRadius: 14,
                  border: '1px solid rgba(74,142,255,0.25)',
                  background: 'rgba(74,142,255,0.08)',
                  position: 'relative',
                }}>
                  <div style={{ fontSize: 13.5, color: 'var(--ink-dim)', marginBottom: 12 }}>Bonuses you get with us:</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                    {['Free Content Strategy Session', 'Free 1-on-1 Consultancy'].map((b, i) => (
                      <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 14.5 }}>
                        <span style={{
                          width: 20, height: 20, borderRadius: '50%',
                          background: '#4a8eff',
                          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                          color: '#fff', flexShrink: 0,
                        }}><IconCheck size={11} /></span>
                        {b}
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </Reveal>

          {/* Others */}
          <Reveal delay={120}>
            <div className="why-card" style={cardBase}>
              <h3 style={{ fontSize: 20, fontWeight: 500, marginBottom: 22, color: 'var(--ink)', letterSpacing: '-0.01em' }}>
                Other Agencies &amp; Freelancers
              </h3>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 22 }}>
                {others.map((item, i) => (
                  <li key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: 15.5, color: 'var(--ink-dim)' }}>
                    <span style={{
                      width: 22, height: 22,
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      color: 'var(--ink-muted)', flexShrink: 0,
                    }}><IconClose size={16} /></span>
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>
        </div>

        <div style={{ textAlign: 'center', marginTop: 40 }}>
          <a href="#book-a-call" className="btn btn-primary">Book a 30-Min Call <IconArrow size={12} /></a>
        </div>
      </div>

      <style>{`
        .why-ours-wrap {
          position: relative;
          display: block;
          isolation: isolate;
          padding: 1px;
          border-radius: 25px;
          height: 100%;
          background: conic-gradient(from 0deg, rgba(74,142,255,0.5), rgba(110,167,255,0.75), rgba(74,142,255,0.5), rgba(30,60,140,0.45), rgba(74,142,255,0.5));
          background-size: 200% 200%;
          animation: whyOursSpin 9s linear infinite;
          box-shadow: 0 6px 18px -14px rgba(74,142,255,0.4);
          transition: box-shadow .3s ease, transform .3s ease;
        }
        .why-ours-wrap:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 24px -14px rgba(74,142,255,0.55);
        }
        .why-ours-glow {
          display: none;
        }
        .why-ours-inner {
          position: relative;
          overflow: hidden;
        }
        .why-ours-inner::before {
          content: '';
          position: absolute;
          top: 0; bottom: 0;
          left: -60%;
          width: 50%;
          background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
          transform: skewX(-20deg);
          transition: left 1s ease;
          pointer-events: none;
          z-index: 0;
        }
        .why-ours-wrap:hover .why-ours-inner::before {
          left: 130%;
        }
        .why-ours-dot {
          width: 7px; height: 7px; border-radius: 50%;
          background: #6EA8FE;
          box-shadow: 0 0 0 2px rgba(110,168,254,0.14), 0 0 8px rgba(110,168,254,0.5);
          animation: whyOursPulse 2s ease-in-out infinite;
        }
        @keyframes whyOursSpin {
          to { background-position: 200% 0; }
        }
        @keyframes whyOursPulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: 0.6; transform: scale(0.9); }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Why });