// =====================================================
// CinematicCocoa — scroll-pinned cinematic section
// Inspired by 21st.dev cinematic-landing-hero, ported
// to plain JSX with Cocoa brand tokens.
// =====================================================

const CINEMATIC_CSS = `
  .ccoa-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: var(--paper);
    color: var(--ink);
    perspective: 1500px;
    font-family: var(--font-sans);
    isolation: isolate;
    margin-top: -1px;
  }
  @media (max-width: 768px) {
    .ccoa-section { height: 75vh; }
    .ccoa-cta-wrap { justify-content: flex-start; padding-top: 5rem; padding-bottom: 1rem; }
  }
  .ccoa-grain {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 50;
    opacity: 0.04; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
  .ccoa-grid {
    position: absolute; inset: 0;
    z-index: 0; pointer-events: none;
    opacity: 0.5;
    background-size: 60px 60px;
    background-image:
      linear-gradient(to right, rgba(20,15,31,0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(20,15,31,0.05) 1px, transparent 1px);
    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
            mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  }

  /* Background hero text */
  .ccoa-hero-wrap {
    position: absolute; inset: 0;
    z-index: 10;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    width: 100%;
    padding: 2rem 1rem;
    transform-style: preserve-3d;
    will-change: transform;
  }
  .ccoa-hero-1 {
    font-family: var(--font-impact);
    font-size: clamp(3rem, 9vw, 7rem);
    letter-spacing: -0.04em;
    line-height: 0.9;
    text-transform: uppercase;
    color: var(--ink);
    text-shadow: 0 10px 30px rgba(20,15,31,0.15), 0 2px 4px rgba(20,15,31,0.08);
    margin: 0;
  }
  .ccoa-hero-2 {
    font-family: var(--font-impact);
    font-size: clamp(3rem, 9vw, 7rem);
    letter-spacing: -0.05em;
    line-height: 0.9;
    text-transform: uppercase;
    background: linear-gradient(180deg, #5B2ECC 0%, #7C5EDC 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: translateZ(0);
    filter: drop-shadow(0 10px 20px rgba(91,46,204,0.32)) drop-shadow(0 2px 4px rgba(91,46,204,0.2));
    margin: 0;
  }

  /* CTA wrapper (second state) */
  .ccoa-cta-wrap {
    position: absolute; inset: 0;
    z-index: 10;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 0 1rem;
    pointer-events: auto;
    will-change: transform;
  }
  .ccoa-cta-title {
    font-family: var(--font-impact);
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    letter-spacing: -0.04em;
    line-height: 0.95;
    text-transform: uppercase;
    margin: 0 0 1rem;
    color: var(--ink);
  }
  .ccoa-cta-desc {
    color: var(--ink-3);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    max-width: 560px;
    margin: 0 auto 2rem;
    line-height: 1.5;
  }
  .ccoa-cta-btns { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

  /* Logos marquee inside CTA */
  .ccoa-cta-logos {
    width: 100vw;
    margin-top: clamp(2rem, 4vh, 3.5rem);
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 0.875rem);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  .ccoa-cta-logos__row { display: flex; overflow: hidden; }
  .ccoa-cta-logos__track {
    display: flex;
    gap: clamp(0.5rem, 1vw, 0.875rem);
    width: max-content;
    will-change: transform;
  }
  .ccoa-cta-logos__track--right { animation: ccoaCtaLogosR 55s linear infinite; }
  .ccoa-cta-logos__track--left  { animation: ccoaCtaLogosL 60s linear infinite; }
  @keyframes ccoaCtaLogosR {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
  }
  @keyframes ccoaCtaLogosL {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }
  .ccoa-cta-logos__row:hover .ccoa-cta-logos__track { animation-play-state: paused; }

  .ccoa-cta-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 999px;
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink);
    font-weight: 700;
    font-size: clamp(0.8125rem, 1vw, 0.9375rem);
    letter-spacing: -0.01em;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(20,15,31,0.04);
  }
  .ccoa-cta-chip__mark {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: #FFF;
    border: 1px solid var(--line);
    overflow: hidden;
    flex-shrink: 0;
  }
  .ccoa-cta-chip__mark img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 5px;
    display: block;
  }

  @media (prefers-reduced-motion: reduce) {
    .ccoa-cta-logos__track { animation: none; }
  }
  .ccoa-store {
    display: inline-flex; align-items: center; gap: 0.75rem;
    padding: 0.875rem 1.5rem; border-radius: 18px;
    font-family: var(--font-sans);
    transition: transform .3s cubic-bezier(.25,1,.5,1), box-shadow .3s;
  }
  .ccoa-store:hover { transform: translateY(-3px); }
  .ccoa-store--light {
    background: linear-gradient(180deg, #FFF 0%, #F1F5F9 100%);
    color: #0F172A;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 12px 24px -4px rgba(20,15,31,0.18), inset 0 1px 1px rgba(255,255,255,1);
  }
  .ccoa-store--dark {
    background: linear-gradient(180deg, #27272A 0%, #18181B 100%);
    color: #FFF;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 12px 24px -4px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.15);
  }
  .ccoa-store__sub {
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; opacity: 0.6; line-height: 1;
  }
  .ccoa-store__main { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-top: 2px; }

  /* Main depth card — Cocoa purple */
  .ccoa-card-stage {
    position: absolute; inset: 0;
    z-index: 20;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    perspective: 1500px;
  }
  .ccoa-card {
    position: relative;
    width: 85vw; height: 85vh;
    max-width: 1400px;
    border-radius: 40px;
    overflow: hidden;
    pointer-events: auto;
    background: linear-gradient(145deg, #5B2ECC 0%, #2E1466 100%);
    box-shadow:
      0 40px 100px -20px rgba(20,15,31,0.6),
      0 20px 40px -20px rgba(20,15,31,0.5),
      inset 0 1px 2px rgba(255,255,255,0.15),
      inset 0 -2px 4px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: center;
  }
  @media (max-width: 768px) {
    .ccoa-card { width: 92vw; height: 92vh; border-radius: 32px; }
  }
  .ccoa-card-sheen {
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none; z-index: 50;
    background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.06) 0%, transparent 40%);
    mix-blend-mode: screen;
  }
  .ccoa-card-grid {
    position: relative;
    width: 100%; height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem clamp(1rem, 3vw, 3rem);
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem; align-items: center;
    z-index: 10;
  }
  @media (max-width: 900px) {
    .ccoa-card-grid {
      display: flex; flex-direction: column; justify-content: space-evenly;
      padding: 1.5rem 1rem;
    }
  }
  .ccoa-card-left {
    order: 1;
    display: flex; flex-direction: column; justify-content: center;
    color: #FFF;
  }
  @media (max-width: 900px) { .ccoa-card-left { order: 3; text-align: center; } }
  .ccoa-card-left h3 {
    font-family: var(--font-impact);
    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 0 0 1rem;
    text-transform: uppercase;
    color: #FFF;
  }
  .ccoa-card-left p {
    color: rgba(229, 216, 255, 0.7);
    font-size: clamp(0.875rem, 1.1vw, 1.0625rem);
    line-height: 1.5;
    margin: 0;
    max-width: 320px;
  }
  @media (max-width: 900px) { .ccoa-card-left p { display: none; } }
  .ccoa-card-left strong { color: #FFF; font-weight: 700; }

  .ccoa-card-mockup {
    order: 2;
    position: relative;
    height: clamp(380px, 50vh, 600px);
    display: flex; align-items: center; justify-content: center;
    perspective: 1000px;
    z-index: 10;
  }
  .ccoa-card-mockup-inner {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    transform: scale(clamp(0.65, 1vw, 1));
  }

  .ccoa-card-right {
    order: 3;
    display: flex; justify-content: flex-end; align-items: center;
  }
  @media (max-width: 900px) { .ccoa-card-right { order: 1; justify-content: center; } }
  .ccoa-card-right__logo {
    width: clamp(180px, 26vw, 460px);
    height: auto;
    display: block;
    object-fit: contain;
    transform: translateZ(0);
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.4)) drop-shadow(0 4px 8px rgba(0,0,0,0.3));
  }
  @media (max-width: 900px) {
    .ccoa-card-right__logo { width: clamp(160px, 48vw, 320px); }
  }

  /* iPhone bezel */
  .ccoa-phone {
    position: relative;
    width: 280px; height: 580px;
    border-radius: 3rem;
    background-color: #0F0A1A;
    box-shadow:
      inset 0 0 0 2px #52525B,
      inset 0 0 0 7px #000,
      0 40px 80px -15px rgba(0,0,0,0.7),
      0 15px 25px -5px rgba(0,0,0,0.5);
    transform-style: preserve-3d;
    will-change: transform;
  }
  .ccoa-phone-btn {
    position: absolute;
    background: linear-gradient(90deg, #404040 0%, #171717 100%);
    box-shadow: -2px 0 5px rgba(0,0,0,0.6), inset -1px 0 1px rgba(255,255,255,0.15), inset 1px 0 2px rgba(0,0,0,0.8);
  }
  .ccoa-phone-screen {
    position: absolute; inset: 7px;
    border-radius: 2.5rem;
    overflow: hidden;
    background: #F1ECF8;
    box-shadow: inset 0 0 15px rgba(20,15,31,0.08);
    color: #1A1233;
  }
  .ccoa-phone-glare {
    position: absolute; inset: 0;
    z-index: 40; pointer-events: none;
    background: linear-gradient(110deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 45%);
  }
  .ccoa-phone-notch {
    position: absolute; top: 5px; left: 50%;
    transform: translateX(-50%);
    width: 100px; height: 28px;
    background: #000;
    border-radius: 999px;
    z-index: 50;
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: 12px;
    box-shadow: inset 0 -1px 2px rgba(255,255,255,0.1);
  }
  .ccoa-pulse-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 8px rgba(16,185,129,0.8);
    animation: ccoa-pulse 2s infinite;
  }
  @keyframes ccoa-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  .ccoa-phone-body {
    position: relative;
    width: 100%; height: 100%;
    padding: 48px 20px 32px;
    display: flex; flex-direction: column;
  }
  .ccoa-widget {
    will-change: transform, opacity;
  }
  .ccoa-widget-row {
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 16px;
    padding: 12px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.05);
    margin-bottom: 10px;
  }
  .ccoa-widget-ico {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .ccoa-widget-ico--teal {
    background: linear-gradient(135deg, rgba(88,184,214,0.22) 0%, rgba(88,184,214,0.05) 100%);
    border: 1px solid rgba(88,184,214,0.3);
    color: var(--teal-300);
  }
  .ccoa-widget-ico--cocoa {
    background: linear-gradient(135deg, rgba(164,137,220,0.22) 0%, rgba(164,137,220,0.05) 100%);
    border: 1px solid rgba(164,137,220,0.3);
    color: #C8B8E8;
  }

  /* Floating badges */
  .ccoa-badge {
    position: absolute;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    z-index: 30;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.12),
      0 25px 50px -12px rgba(0,0,0,0.6),
      inset 0 1px 1px rgba(255,255,255,0.2);
    color: #FFF;
    will-change: transform, opacity;
  }
  .ccoa-badge-ico {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 1.1rem;
  }
  .ccoa-badge-ico--teal {
    background: linear-gradient(180deg, rgba(88,184,214,0.3) 0%, rgba(30,90,120,0.15) 100%);
    border: 1px solid rgba(88,184,214,0.4);
  }
  .ccoa-badge-ico--cocoa {
    background: linear-gradient(180deg, rgba(164,137,220,0.3) 0%, rgba(74,45,128,0.15) 100%);
    border: 1px solid rgba(164,137,220,0.4);
  }
  .ccoa-badge-title { font-size: 0.8125rem; font-weight: 700; line-height: 1; margin-bottom: 3px; }
  .ccoa-badge-sub { font-size: 0.6875rem; opacity: 0.6; line-height: 1; }

  .ccoa-badge--tl { top: 24px; left: -24px; }
  .ccoa-badge--br { bottom: 80px; right: -24px; }
  .ccoa-badge--tr { top: 110px; right: -28px; }
  .ccoa-badge--bl { bottom: 180px; left: -28px; }
  .ccoa-badge--ml { top: 50%; left: -72px; transform: translateY(-50%); }
  .ccoa-badge--mr { top: 45%; right: -72px; transform: translateY(-50%); }
  @media (max-width: 1023px) {
    .ccoa-badge--ml, .ccoa-badge--mr { display: none; }
    .ccoa-badge--tr { top: 40px; right: -18px; }
    .ccoa-badge--bl { bottom: 180px; left: -18px; }
  }
  @media (min-width: 1024px) {
    .ccoa-badge--tl { top: 56px; left: -96px; }
    .ccoa-badge--br { bottom: 100px; right: -96px; }
    .ccoa-badge--tr { top: 140px; right: -112px; }
    .ccoa-badge--bl { bottom: 210px; left: -112px; }
    .ccoa-badge--ml { left: -172px; }
    .ccoa-badge--mr { right: -172px; }
  }
  .ccoa-badge-ico--mint {
    background: linear-gradient(180deg, rgba(143,220,182,0.3) 0%, rgba(40,120,85,0.15) 100%);
    border: 1px solid rgba(143,220,182,0.4);
    color: #B8F0D4;
  }
  .ccoa-badge-ico--amber {
    background: linear-gradient(180deg, rgba(255,184,108,0.3) 0%, rgba(140,90,20,0.15) 100%);
    border: 1px solid rgba(255,184,108,0.4);
    color: #FFD8A8;
  }
  .ccoa-badge-ico--rose {
    background: linear-gradient(180deg, rgba(255,130,165,0.3) 0%, rgba(150,40,80,0.15) 100%);
    border: 1px solid rgba(255,130,165,0.4);
    color: #FFC4D6;
  }
  .ccoa-badge-ico--sky {
    background: linear-gradient(180deg, rgba(138,180,255,0.3) 0%, rgba(40,70,150,0.15) 100%);
    border: 1px solid rgba(138,180,255,0.4);
    color: #C8D8FF;
  }

  @keyframes ccoaBadgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
  @keyframes ccoaBadgeFloatY {
    0%, 100% { transform: translateY(calc(-50% + 0px)); }
    50% { transform: translateY(calc(-50% - 8px)); }
  }
  .ccoa-badge--tl { animation: ccoaBadgeFloat 5.6s ease-in-out infinite; }
  .ccoa-badge--tr { animation: ccoaBadgeFloat 6.2s ease-in-out infinite -1.8s; }
  .ccoa-badge--br { animation: ccoaBadgeFloat 5.4s ease-in-out infinite -3.2s; }
  .ccoa-badge--bl { animation: ccoaBadgeFloat 6.8s ease-in-out infinite -2.4s; }
  .ccoa-badge--ml { animation: ccoaBadgeFloatY 6.4s ease-in-out infinite -1.2s; }
  .ccoa-badge--mr { animation: ccoaBadgeFloatY 5.8s ease-in-out infinite -3.6s; }
  @media (prefers-reduced-motion: reduce) {
    .ccoa-badge--tl, .ccoa-badge--tr, .ccoa-badge--br, .ccoa-badge--bl, .ccoa-badge--ml, .ccoa-badge--mr { animation: none; }
  }

  /* Progress ring */
  .ccoa-ring-wrap {
    position: relative;
    width: 180px; height: 180px;
    margin: 0 auto 28px;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.5));
  }
  .ccoa-ring-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .ccoa-ring {
    transform: rotate(-90deg);
    transform-origin: center;
    stroke-dasharray: 402;
    stroke-dashoffset: 402;
    stroke-linecap: round;
  }
  .ccoa-ring-center {
    position: relative; z-index: 10;
    display: flex; flex-direction: column; align-items: center;
  }
  .ccoa-counter {
    font-family: var(--font-impact);
    font-size: 2.75rem; font-weight: 900;
    letter-spacing: -0.04em; line-height: 1;
    color: #FFF;
  }
  .ccoa-counter-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-top: 4px;
    color: rgba(200,184,232,0.65);
  }

  .ccoa-home-indicator {
    position: absolute; bottom: 8px; left: 50%;
    transform: translateX(-50%);
    width: 120px; height: 4px;
    background: rgba(20,15,31,0.25);
    border-radius: 999px;
  }

  /* ====== Official Cocoa app — light theme ====== */
  .ccoa-app {
    position: relative;
    width: 100%; height: 100%;
    padding: 44px 14px 14px;
    display: flex; flex-direction: column;
    color: #1A1233;
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
    background: linear-gradient(180deg, #F4EFFA 0%, #EDE6F5 100%);
  }
  .ccoa-app-status {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 6px;
    font-size: 10px; font-weight: 700; color: #1A1233;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
  }
  .ccoa-app-status__icons {
    display: inline-flex; gap: 4px; align-items: center;
  }
  .ccoa-app-header {
    display: flex; align-items: center; gap: 9px;
    margin-bottom: 12px;
  }
  .ccoa-app-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #C8A2DC, #6F3FE0);
    background-size: cover; background-position: center;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(91,46,204,0.18);
  }
  .ccoa-app-greeting { line-height: 1.1; flex: 1; min-width: 0; }
  .ccoa-app-hi { font-size: 9.5px; color: #6B6580; }
  .ccoa-app-name {
    font-size: 11.5px; font-weight: 700; color: #1A1233;
    margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ccoa-app-spark {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(91,46,204,0.07);
    display: grid; place-items: center;
    color: #5B2ECC;
    flex-shrink: 0;
  }

  /* THE STAR: balance card */
  .ccoa-app-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    padding: 14px 14px 12px;
    color: #FFF;
    background:
      radial-gradient(120% 90% at 18% 12%, rgba(255,255,255,0.18) 0%, transparent 55%),
      radial-gradient(80% 70% at 90% 105%, rgba(60,15,140,0.55) 0%, transparent 60%),
      linear-gradient(140deg, #7C46E4 0%, #5B2ECC 45%, #3A1B85 100%);
    box-shadow:
      0 18px 36px -12px rgba(91,46,204,0.55),
      0 8px 18px -10px rgba(58,27,133,0.6),
      inset 0 1px 1px rgba(255,255,255,0.22),
      inset 0 -2px 4px rgba(0,0,0,0.18);
    margin-bottom: 14px;
  }
  .ccoa-app-card::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at 80% 30%, black 0%, transparent 75%);
            mask-image: radial-gradient(ellipse at 80% 30%, black 0%, transparent 75%);
    pointer-events: none;
  }
  .ccoa-app-card__shine {
    position: absolute; inset: -40% -10% auto auto;
    width: 160%; height: 70%;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
    transform: rotate(8deg);
    pointer-events: none;
    animation: ccoaCardShine2 7s ease-in-out infinite;
    mix-blend-mode: overlay;
  }
  @keyframes ccoaCardShine2 {
    0%, 100% { transform: translateX(-30%) rotate(8deg); opacity: 0.5; }
    50% { transform: translateX(20%) rotate(8deg); opacity: 0.9; }
  }
  .ccoa-app-card__inner {
    position: relative; z-index: 2;
  }
  .ccoa-app-card__logo {
    height: 18px; width: auto; display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
  }
  .ccoa-app-card__balance {
    font-family: var(--font-impact);
    font-size: 2.6rem;
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1;
    margin-top: 12px;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,0.22);
  }
  .ccoa-app-card__sub {
    text-align: center;
    font-size: 9px;
    letter-spacing: 0.04em;
    opacity: 0.78;
    margin-top: 4px;
    font-weight: 500;
  }
  .ccoa-app-card__pill {
    margin-top: 11px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 12px;
    padding: 7px 9px;
    display: flex; align-items: center; gap: 7px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .ccoa-app-card__pill-ico {
    width: 22px; height: 22px;
    border-radius: 7px;
    background: rgba(255,255,255,0.15);
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .ccoa-app-card__pill-eyebrow {
    font-size: 7.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.78;
    font-weight: 700;
  }
  .ccoa-app-card__pill-text {
    font-size: 11px;
    font-weight: 700;
    margin-top: 1px;
    line-height: 1.1;
  }

  /* Action tiles */
  .ccoa-app-actions {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; margin-bottom: 12px;
  }
  .ccoa-app-tile {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
  }
  .ccoa-app-tile__ico {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: rgba(91,46,204,0.08);
    display: grid; place-items: center;
    color: #5B2ECC;
  }
  .ccoa-app-tile__label {
    font-size: 8.5px;
    color: #2B2437;
    font-weight: 500;
    letter-spacing: 0.01em;
  }

  /* Recargar puntos pill */
  .ccoa-app-btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    background: linear-gradient(180deg, #6F3FE0 0%, #5B2ECC 100%);
    color: #FFF;
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
    box-shadow: 0 6px 14px -4px rgba(91,46,204,0.45), inset 0 1px 0 rgba(255,255,255,0.2);
  }

  /* Para ti section */
  .ccoa-app-section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 7px;
    padding: 0 2px;
  }
  .ccoa-app-section-head__title {
    font-size: 11px; font-weight: 700; color: #1A1233;
  }
  .ccoa-app-section-head__link {
    font-size: 9.5px; color: #5B2ECC; font-weight: 600;
  }
  .ccoa-app-referidos {
    background: #E9DFF6;
    border-radius: 14px;
    padding: 11px 12px;
    display: flex; align-items: center; gap: 10px;
    border: 1px solid rgba(91,46,204,0.06);
  }
  .ccoa-app-referidos__body { flex: 1; min-width: 0; line-height: 1.15; }
  .ccoa-app-referidos__title {
    font-size: 11.5px; font-weight: 700; color: #1A1233;
  }
  .ccoa-app-referidos__sub {
    font-size: 9.5px; color: #4F4761; margin-top: 2px;
  }
  .ccoa-app-referidos__link {
    font-size: 9.5px; color: #5B2ECC; font-weight: 600; margin-top: 4px;
  }
  .ccoa-app-referidos__btn {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6F3FE0, #5B2ECC);
    color: #FFF;
    display: grid; place-items: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px -2px rgba(91,46,204,0.45);
  }

  .ccoa-hide-initial { visibility: hidden; }
`;

// Comercios shown as logo chips in the CTA stage. Real partner logos live in /public/images/empresas.
const CTA_COMERCIOS = [
  {n:'Terracor',       logo:'public/images/empresas/ISOLOGOTIPO%20TERRACOR.png'},
  {n:'M40',            logo:'public/images/empresas/LOGO%20M40%20NEGRO.png'},
  {n:'Viaje Espacial', logo:'public/images/empresas/Logo%20Viaje%20Espacial.png'},
  {n:'Ame Coffee',     logo:'public/images/empresas/ame%20coffe.png'},
  {n:'Babycorp',       logo:'public/images/empresas/babycorp.png'},
  {n:'Amarket',        logo:'public/images/empresas/logotipo%20AMARKET%20rROJO.jpg'},
  {n:'O Boticário',    logo:'public/images/empresas/oboticario.png'},
  {n:'Opticorp',       logo:'public/images/empresas/opticorp1.jpeg'},
];

function CtaComerciosRows() {
  const items = CTA_COMERCIOS;
  const rows = React.useMemo(() => {
    const half = Math.ceil(items.length / 2);
    return [
      items.slice(0, half),
      items.slice(half),
    ];
  }, [items]);

  const renderChip = (c, i, rowIdx) => {
    return (
      <div key={`${rowIdx}-${i}-${c.n}`} className="ccoa-cta-chip" title={c.n}>
        <div className="ccoa-cta-chip__mark">
          {c.logo
            ? <img src={c.logo} alt={c.n} loading="lazy" decoding="async" />
            : c.n.split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase()}
        </div>
        <span>{c.n}</span>
      </div>
    );
  };

  return (
    <div className="ccoa-cta-logos" aria-hidden="true">
      {rows.map((row, rowIdx) => {
        const dir = rowIdx === 1 ? 'left' : 'right';
        // Repeat the row enough times that the track always exceeds the viewport width
        // for a seamless loop, even when there are very few items.
        const repeated = row.length
          ? Array.from({ length: Math.max(2, Math.ceil(8 / row.length)) }, () => row).flat()
          : [];
        // Final track is two halves so the -50% translate loop is seamless.
        const doubled = [...repeated, ...repeated];
        return (
          <div key={rowIdx} className="ccoa-cta-logos__row">
            <div className={`ccoa-cta-logos__track ccoa-cta-logos__track--${dir}`}>
              {doubled.map((c, i) => renderChip(c, i, rowIdx))}
            </div>
          </div>
        );
      })}
    </div>
  );
}

function CinematicCocoa({
  brandName = "COCOA",
  tagline1 = "Tu dinero vale más.",
  tagline2 = "Cada cocoa cuenta.",
  cardHeading = "Ahorro real, visible.",
  cardDescription = (
    <>
      <strong>Cocoa</strong> te devuelve valor en cada compra. Acumulá Cocoas con cashback automático y mirá cómo tu saldo crece en tiempo real — 1 Cocoa = 1 Bs, siempre.
    </>
  ),
  metricValue = 2847,
  metricLabel = "Cocoas acumulados",
  ctaHeading = "Empezá a ahorrar hoy.",
  ctaDescription = "Descargá Cocoa y sumate a los +3K usuarios que ya ahorran en cada compra en +60 comercios de Bolivia.",
} = {}) {
  const containerRef = React.useRef(null);
  const cardRef = React.useRef(null);
  const mockupRef = React.useRef(null);
  const rafRef = React.useRef(0);

  // Mouse-follow sheen on card + parallax tilt on phone
  React.useEffect(() => {
    const onMove = (e) => {
      if (window.scrollY > window.innerHeight * 2) return;
      cancelAnimationFrame(rafRef.current);
      rafRef.current = requestAnimationFrame(() => {
        const card = cardRef.current;
        const phone = mockupRef.current;
        if (!card) return;
        const rect = card.getBoundingClientRect();
        card.style.setProperty('--mx', `${e.clientX - rect.left}px`);
        card.style.setProperty('--my', `${e.clientY - rect.top}px`);
        if (phone && window.gsap) {
          const xVal = (e.clientX / window.innerWidth - 0.5) * 2;
          const yVal = (e.clientY / window.innerHeight - 0.5) * 2;
          window.gsap.to(phone, {
            rotationY: xVal * 10,
            rotationX: -yVal * 10,
            ease: 'power3.out',
            duration: 1.2,
          });
        }
      });
    };
    window.addEventListener('mousemove', onMove);
    return () => {
      window.removeEventListener('mousemove', onMove);
      cancelAnimationFrame(rafRef.current);
    };
  }, []);

  // Scroll-pinned cinematic timeline
  React.useEffect(() => {
    const gsap = window.gsap;
    const ScrollTrigger = window.ScrollTrigger;
    if (!gsap || !ScrollTrigger) return;
    gsap.registerPlugin(ScrollTrigger);
    const container = containerRef.current;
    if (!container) return;

    const isMobile = window.innerWidth < 768;

    const ctx = gsap.context(() => {
      // initial states
      gsap.set('.ccoa-hero-1', { autoAlpha: 0, y: 60, scale: 0.85, filter: 'blur(20px)', rotationX: -20 });
      gsap.set('.ccoa-hero-2', { autoAlpha: 1, clipPath: 'inset(0 100% 0 0)' });
      gsap.set('.ccoa-card', { y: window.innerHeight + 200, autoAlpha: 1 });
      gsap.set(['.ccoa-card-left', '.ccoa-card-right', '.ccoa-card-mockup', '.ccoa-badge', '.ccoa-widget'], { autoAlpha: 0 });
      gsap.set('.ccoa-cta-wrap', { autoAlpha: 0, scale: 0.85, filter: 'blur(24px)' });

      // entrance of hero text
      const intro = gsap.timeline({ delay: 0.1 });
      intro
        .to('.ccoa-hero-1', { duration: 1.4, autoAlpha: 1, y: 0, scale: 1, filter: 'blur(0px)', rotationX: 0, ease: 'expo.out' })
        .to('.ccoa-hero-2', { duration: 1.2, clipPath: 'inset(0 0% 0 0)', ease: 'power4.inOut' }, '-=0.8');

      // scrub timeline
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: container,
          start: 'top top',
          end: '+=6000',
          pin: true,
          scrub: 1,
          anticipatePin: 1,
        },
      });

      tl
        .to(['.ccoa-hero-wrap', '.ccoa-grid'], { scale: 1.12, filter: 'blur(18px)', opacity: 0.2, ease: 'power2.inOut', duration: 2 }, 0)
        .to('.ccoa-card', { y: 0, ease: 'power3.inOut', duration: 2 }, 0)
        .to('.ccoa-card', { width: '100%', height: '100%', borderRadius: '0px', ease: 'power3.inOut', duration: 1.5 })
        .fromTo('.ccoa-card-mockup',
          { y: 300, z: -500, rotationX: 50, rotationY: -30, autoAlpha: 0, scale: 0.6 },
          { y: 0, z: 0, rotationX: 0, rotationY: 0, autoAlpha: 1, scale: 1, ease: 'expo.out', duration: 2.2 }, '-=0.7')
        .fromTo('.ccoa-widget',
          { y: 40, autoAlpha: 0, scale: 0.95 },
          { y: 0, autoAlpha: 1, scale: 1, stagger: 0.14, ease: 'back.out(1.2)', duration: 1.2 }, '-=1.4')
        .to('.ccoa-ring', { strokeDashoffset: 60, duration: 2, ease: 'power3.inOut' }, '-=1.1')
        .to('.ccoa-counter', { innerHTML: metricValue, snap: { innerHTML: 1 }, duration: 2, ease: 'expo.out' }, '-=1.9')
        .fromTo('.ccoa-badge',
          { y: 80, autoAlpha: 0, scale: 0.7, rotationZ: -10 },
          { y: 0, autoAlpha: 1, scale: 1, rotationZ: 0, ease: 'back.out(1.5)', duration: 1.4, stagger: 0.18 }, '-=1.8')
        .fromTo('.ccoa-card-left',
          { x: -50, autoAlpha: 0 },
          { x: 0, autoAlpha: 1, ease: 'power4.out', duration: 1.4 }, '-=1.3')
        .fromTo('.ccoa-card-right',
          { x: 50, autoAlpha: 0, scale: 0.8 },
          { x: 0, autoAlpha: 1, scale: 1, ease: 'expo.out', duration: 1.4 }, '<')
        .to({}, { duration: 2.5 })
        .set('.ccoa-hero-wrap', { autoAlpha: 0 })
        .set('.ccoa-cta-wrap', { autoAlpha: 1 })
        .to({}, { duration: 1.5 })
        .to(['.ccoa-card-mockup', '.ccoa-badge', '.ccoa-card-left', '.ccoa-card-right'], {
          scale: 0.9, y: -40, z: -200, autoAlpha: 0, ease: 'power3.in', duration: 1.1, stagger: 0.05,
        })
        .to('.ccoa-card', {
          width: isMobile ? '92vw' : '85vw',
          height: isMobile ? '92vh' : '85vh',
          borderRadius: isMobile ? '32px' : '40px',
          ease: 'expo.inOut',
          duration: 1.6,
        }, 'pullback')
        .to('.ccoa-cta-wrap', { scale: 1, filter: 'blur(0px)', ease: 'expo.inOut', duration: 1.6 }, 'pullback')
        .to('.ccoa-card', { y: -window.innerHeight - 300, ease: 'power3.in', duration: 1.4 });

    }, container);

    return () => ctx.revert();
  }, [metricValue]);

  return (
    <React.Fragment>
      <style dangerouslySetInnerHTML={{ __html: CINEMATIC_CSS }} />
      <section ref={containerRef} className="ccoa-section" aria-label="Cocoa cinematic showcase">
        <div className="ccoa-grain" aria-hidden="true" />
        <div className="ccoa-grid" aria-hidden="true" />

        {/* BACKGROUND: big hero tagline */}
        <div className="ccoa-hero-wrap">
          <h2 className="ccoa-hero-1">{tagline1}</h2>
          <h2 className="ccoa-hero-2">{tagline2}</h2>
        </div>

        {/* BACKGROUND 2: CTA state */}
        <div className="ccoa-cta-wrap">
          <h2 className="ccoa-cta-title">{ctaHeading}</h2>
          <p className="ccoa-cta-desc">{ctaDescription}</p>
          <div className="ccoa-cta-btns">
            <a href="https://apps.apple.com/py/app/cocoa-billetera-de-beneficios/id6746419933" target="_blank" rel="noopener noreferrer" className="ccoa-store ccoa-store--light" aria-label="Descargar en App Store">
              <svg width="28" height="28" viewBox="0 0 384 512" fill="currentColor" aria-hidden="true"><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/></svg>
              <div>
                <div className="ccoa-store__sub">Descargar en</div>
                <div className="ccoa-store__main">App Store</div>
              </div>
            </a>
            <a href="https://play.google.com/store/apps/details?id=com.cocoa.cocoaprod&hl=es_BO" target="_blank" rel="noopener noreferrer" className="ccoa-store ccoa-store--dark" aria-label="Descargar en Google Play">
              <svg width="26" height="26" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true"><path d="M325.3 234.3L104.6 13l280.8 161.2-60.1 60.1zM47 0C34 6.8 25.3 19.2 25.3 35.3v441.3c0 16.1 8.7 28.5 21.7 35.3l256.6-256L47 0zm425.2 225.6l-58.9-34.1-65.7 64.5 65.7 64.5 60.1-34.1c18-14.3 18-46.5-1.2-60.8zM104.6 499l280.8-161.2-60.1-60.1L104.6 499z"/></svg>
              <div>
                <div className="ccoa-store__sub">Disponible en</div>
                <div className="ccoa-store__main">Google Play</div>
              </div>
            </a>
          </div>

          {/* 3-row comercios marquee under the buttons */}
          <CtaComerciosRows />
        </div>

        {/* FOREGROUND: the cocoa purple card */}
        <div className="ccoa-card-stage">
          <div ref={cardRef} className="ccoa-card">
            <div className="ccoa-card-sheen" aria-hidden="true" />

            <div className="ccoa-card-grid">
              {/* LEFT: accountability copy */}
              <div className="ccoa-card-left">
                <h3>{cardHeading}</h3>
                <p>{cardDescription}</p>
              </div>

              {/* CENTER: phone mockup */}
              <div className="ccoa-card-mockup">
                <div className="ccoa-card-mockup-inner">
                  <div ref={mockupRef} className="ccoa-phone">
                    <div className="ccoa-phone-btn" style={{top: 120, left: -3, width: 3, height: 25, borderRadius: '3px 0 0 3px'}} aria-hidden="true" />
                    <div className="ccoa-phone-btn" style={{top: 160, left: -3, width: 3, height: 45, borderRadius: '3px 0 0 3px'}} aria-hidden="true" />
                    <div className="ccoa-phone-btn" style={{top: 220, left: -3, width: 3, height: 45, borderRadius: '3px 0 0 3px'}} aria-hidden="true" />
                    <div className="ccoa-phone-btn" style={{top: 170, right: -3, width: 3, height: 70, borderRadius: '0 3px 3px 0', transform: 'scaleX(-1)'}} aria-hidden="true" />

                    <div className="ccoa-phone-screen">
                      <div className="ccoa-phone-glare" aria-hidden="true" />
                      <div className="ccoa-phone-notch" aria-hidden="true">
                        <div className="ccoa-pulse-dot" />
                      </div>

                      <div className="ccoa-phone-body ccoa-app">
                        {/* Status bar */}
                        <div className="ccoa-app-status">
                          <span>9:41</span>
                          <span className="ccoa-app-status__icons">
                            <svg width="13" height="9" viewBox="0 0 18 12" fill="currentColor" aria-hidden="true"><rect x="0" y="8" width="3" height="4" rx="0.5"/><rect x="5" y="5" width="3" height="7" rx="0.5"/><rect x="10" y="2" width="3" height="10" rx="0.5"/><rect x="15" y="0" width="3" height="12" rx="0.5"/></svg>
                            <svg width="13" height="9" viewBox="0 0 18 14" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true"><path d="M1 5.5a12 12 0 0 1 16 0M3.5 8.5a8 8 0 0 1 11 0M6 11.5a4 4 0 0 1 6 0" strokeLinecap="round"/><circle cx="9" cy="13" r="0.6" fill="currentColor"/></svg>
                            <svg width="18" height="9" viewBox="0 0 24 12" fill="none" aria-hidden="true"><rect x="0.5" y="0.5" width="20" height="11" rx="2" stroke="currentColor"/><rect x="2" y="2" width="17" height="8" rx="1" fill="currentColor"/><rect x="21.5" y="3.5" width="2" height="5" rx="1" fill="currentColor"/></svg>
                          </span>
                        </div>

                        {/* Header */}
                        <div className="ccoa-widget ccoa-app-header">
                          <div className="ccoa-app-avatar" aria-hidden="true" />
                          <div className="ccoa-app-greeting">
                            <div className="ccoa-app-hi">Hola,</div>
                            <div className="ccoa-app-name">María Rodríguez</div>
                          </div>
                          <div className="ccoa-app-spark" aria-hidden="true">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                              <path d="M12 2l1.6 5.4L19 9l-5.4 1.6L12 16l-1.6-5.4L5 9l5.4-1.6L12 2zm6 11l.9 2.6L21 16.5l-2.1.9L18 20l-.9-2.6L15 16.5l2.1-.9L18 13z"/>
                            </svg>
                          </div>
                        </div>

                        {/* THE STAR — balance card */}
                        <div className="ccoa-widget ccoa-app-card">
                          <div className="ccoa-app-card__shine" aria-hidden="true" />
                          <div className="ccoa-app-card__inner">
                            <img src="public/images/Cocoa_Logo_Blanco.png" alt="Cocoa" className="ccoa-app-card__logo" />
                            <div className="ccoa-app-card__balance">247.80</div>
                            <div className="ccoa-app-card__sub">1 cocoa = 1 Bs.</div>
                            <div className="ccoa-app-card__pill">
                              <div className="ccoa-app-card__pill-ico">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                                  <circle cx="12" cy="13" r="8"/>
                                  <path d="M12 9v4l2.5 1.5"/>
                                  <path d="M9 2h6"/>
                                </svg>
                              </div>
                              <div>
                                <div className="ccoa-app-card__pill-eyebrow">Gasta en</div>
                                <div className="ccoa-app-card__pill-text">57:45:25 y gana +10 puntos</div>
                              </div>
                            </div>
                          </div>
                        </div>

                        {/* Action tiles */}
                        <div className="ccoa-widget ccoa-app-actions">
                          <div className="ccoa-app-tile">
                            <div className="ccoa-app-tile__ico">
                              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                                <path d="M22 2 11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/>
                              </svg>
                            </div>
                            <div className="ccoa-app-tile__label">Enviar puntos</div>
                          </div>
                          <div className="ccoa-app-tile">
                            <div className="ccoa-app-tile__ico">
                              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                                <rect x="2" y="6" width="20" height="14" rx="2"/><path d="M2 11h20"/>
                              </svg>
                            </div>
                            <div className="ccoa-app-tile__label">Vincular tarjeta</div>
                          </div>
                          <div className="ccoa-app-tile">
                            <div className="ccoa-app-tile__ico">
                              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                                <path d="M3 8h14l-3-3"/><path d="M21 16H7l3 3"/>
                              </svg>
                            </div>
                            <div className="ccoa-app-tile__label">Intercambio</div>
                          </div>
                        </div>

                        {/* Recargar Puntos */}
                        <div className="ccoa-widget ccoa-app-btn">
                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                            <rect x="2" y="6" width="20" height="14" rx="2"/><path d="M2 11h20"/>
                          </svg>
                          Recargar Puntos
                        </div>

                        {/* Para ti */}
                        <div className="ccoa-widget">
                          <div className="ccoa-app-section-head">
                            <span className="ccoa-app-section-head__title">Para ti</span>
                            <span className="ccoa-app-section-head__link">Ver todo</span>
                          </div>
                          <div className="ccoa-app-referidos">
                            <div className="ccoa-app-referidos__body">
                              <div className="ccoa-app-referidos__title">Programa de Referidos</div>
                              <div className="ccoa-app-referidos__sub">Invita y gana 50 BOB</div>
                              <div className="ccoa-app-referidos__link">Ver más ›</div>
                            </div>
                            <div className="ccoa-app-referidos__btn" aria-hidden="true">
                              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                                <circle cx="8.5" cy="7" r="4"/>
                                <path d="M20 8v6M23 11h-6"/>
                              </svg>
                            </div>
                          </div>
                        </div>

                        <div className="ccoa-home-indicator" />
                      </div>
                    </div>
                  </div>

                  {/* Floating badges */}
                  <div className="ccoa-badge ccoa-badge--tl">
                    <div className="ccoa-badge-ico ccoa-badge-ico--teal" aria-hidden="true">💰</div>
                    <div>
                      <div className="ccoa-badge-title">+2,847 Cocoas</div>
                      <div className="ccoa-badge-sub">Ahorrado este año</div>
                    </div>
                  </div>
                  <div className="ccoa-badge ccoa-badge--br">
                    <div className="ccoa-badge-ico ccoa-badge-ico--cocoa" aria-hidden="true">⚡</div>
                    <div>
                      <div className="ccoa-badge-title">QR Pagado</div>
                      <div className="ccoa-badge-sub">Hace 2 minutos</div>
                    </div>
                  </div>

                  <div className="ccoa-badge ccoa-badge--tr">
                    <div className="ccoa-badge-ico ccoa-badge-ico--mint" aria-hidden="true">
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                    </div>
                    <div>
                      <div className="ccoa-badge-title">+8% cashback</div>
                      <div className="ccoa-badge-sub">Hipermaxi · auto</div>
                    </div>
                  </div>

                  <div className="ccoa-badge ccoa-badge--bl">
                    <div className="ccoa-badge-ico ccoa-badge-ico--amber" aria-hidden="true">
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M3 10h18"/></svg>
                    </div>
                    <div>
                      <div className="ccoa-badge-title">Cargá saldo</div>
                      <div className="ccoa-badge-sub">Tigo Money · banco</div>
                    </div>
                  </div>

                  <div className="ccoa-badge ccoa-badge--ml">
                    <div className="ccoa-badge-ico ccoa-badge-ico--rose" aria-hidden="true">
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 1 0-7.8 7.8l1 1 7.8 7.8 7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8Z"/></svg>
                    </div>
                    <div>
                      <div className="ccoa-badge-title">Favoritos</div>
                      <div className="ccoa-badge-sub">Promos cerca tuyo</div>
                    </div>
                  </div>

                  <div className="ccoa-badge ccoa-badge--mr">
                    <div className="ccoa-badge-ico ccoa-badge-ico--sky" aria-hidden="true">
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><path d="M14 14h7v7h-7z"/></svg>
                    </div>
                    <div>
                      <div className="ccoa-badge-title">Escaneá QR</div>
                      <div className="ccoa-badge-sub">Pago instantáneo</div>
                    </div>
                  </div>
                </div>
              </div>

              {/* RIGHT: brand logo */}
              <div className="ccoa-card-right">
                <img
                  src="public/images/Cocoa_Logo_Blanco.png"
                  alt={brandName}
                  className="ccoa-card-right__logo"
                  loading="lazy"
                  decoding="async"
                />
              </div>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.CinematicCocoa = CinematicCocoa;