// CCM "Story" — immersive case presentation replicating Paulo's PDF-slide
// aesthetic: browser-framed screens drifting on tilted planes over an infinite
// slate background, blue selection-balloon annotations and 25→100% milestones.
// Tilt = CSS 3D (perspective + rotateX/rotateZ) — no extra libs needed.

const CCMS = {
  bg: '#2A3850', bg2: '#243149', bgDeep: '#1D2940',
  blue: '#4DA3FF', blueSoft: 'rgba(77,163,255,0.16)',
  txt: '#EAF0F8', sub: '#A8B6CC', mut: '#73839E',
  chrome: '#dadce0', font: "'Inter',system-ui,sans-serif",
  mono: "'JetBrains Mono',monospace"
};

/* Browser chrome frame (like the slides) */
function CCMSBrowser({ src, w, alt, url }) {
  return (
    <div style={{ width: w, borderRadius: 10, overflow: 'hidden', boxShadow: '0 30px 60px rgba(8,14,26,0.5)', background: '#fff', flexShrink: 0 }}>
      <div style={{ height: 24, background: CCMS.chrome, display: 'flex', alignItems: 'center', padding: '0 10px', gap: 5 }}>
        <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#f45952' }} />
        <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#f5b50e' }} />
        <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#3bb143' }} />
        <span style={{ flex: 1, height: 13, margin: '0 14px', background: '#fff', borderRadius: 7, fontSize: 7.5, color: '#7a8699', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: CCMS.mono, overflow: 'hidden', whiteSpace: 'nowrap' }}>{url || 'https://www.t6.digital'}</span>
      </div>
      <img src={src} alt={alt || ''} loading="lazy" style={{ display: 'block', width: '100%', height: 'auto' }} />
    </div>
  );
}

/* Blue selection-balloon annotation (corner handles + underlined italic text) */
function CCMSBalloon({ children, maxWidth = 420 }) {
  const handle = (pos) => <span style={{ position: 'absolute', width: 9, height: 9, background: '#fff', border: `1.5px solid ${CCMS.blue}`, ...pos }} />;
  return (
    <div style={{ position: 'relative', maxWidth, background: 'rgba(36,49,73,0.66)', backdropFilter: 'blur(6px)', border: `1.5px solid ${CCMS.blue}`, padding: '18px 22px', boxShadow: '0 18px 50px rgba(8,14,26,0.45)' }}>
      {handle({ top: -5, left: -5 })}{handle({ top: -5, right: -5 })}{handle({ bottom: -5, left: -5 })}{handle({ bottom: -5, right: -5 })}
      {handle({ top: -5, left: '50%', transform: 'translateX(-50%)' })}{handle({ bottom: -5, left: '50%', transform: 'translateX(-50%)' })}
      <div style={{ fontFamily: CCMS.font, fontStyle: 'italic', fontWeight: 500, fontSize: 'clamp(13.5px, 1.5vw, 16.5px)', lineHeight: 1.75, color: CCMS.txt }}>
        <span style={{ textDecorationLine: 'underline', textDecorationColor: 'rgba(77,163,255,0.55)', textUnderlineOffset: 5, textDecorationThickness: 1 }}>{children}</span>
      </div>
    </div>
  );
}

/* Progress ring milestone (25 / 50 / 75 / 100%) */
function CCMSRing({ pct, size = 64 }) {
  const [drawn, setDrawn] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((es) => { es.forEach((e) => { if (e.isIntersecting) { setDrawn(true); io.disconnect(); } }); }, { threshold: 0.4 });
    io.observe(el); return () => io.disconnect();
  }, []);
  const r = 26, C = 2 * Math.PI * r;
  return (
    <div ref={ref} style={{ width: size, height: size, flexShrink: 0 }}>
      <svg viewBox="0 0 64 64" style={{ width: '100%', height: '100%' }}>
        <circle cx="32" cy="32" r={r} fill="rgba(36,49,73,0.8)" stroke="rgba(255,255,255,0.18)" strokeWidth="5" />
        <circle cx="32" cy="32" r={r} fill="none" stroke={CCMS.blue} strokeWidth="5" strokeLinecap="round"
          strokeDasharray={C} strokeDashoffset={drawn ? C * (1 - pct / 100) : C} transform="rotate(-90 32 32)"
          style={{ transition: 'stroke-dashoffset 1.2s cubic-bezier(0.22,0.61,0.36,1)' }} />
        <text x="32" y="36.5" textAnchor="middle" fill="#fff" fontSize="13" fontWeight="700" fontFamily="Inter">{pct}%</text>
      </svg>
    </div>
  );
}

/* Tilted drifting plane of browser screens (the "infinite floor" look) */
function CCMSPlane({ shots, tilt = 'rotateX(18deg) rotateZ(-7deg)', drift = 'ccms-drift-a', height = 460, cols }) {
  return (
    <div style={{ position: 'relative', height, overflow: 'hidden', margin: '0 -60px' }}>
      <div style={{ position: 'absolute', inset: '-30% -25%', perspective: 1300, perspectiveOrigin: '50% 30%' }}>
        <div className={drift} style={{ position: 'absolute', inset: 0, transform: tilt, transformStyle: 'preserve-3d', display: 'grid', gridTemplateColumns: cols || 'repeat(3, minmax(280px, 1fr))', gap: 34, alignContent: 'center', justifyItems: 'center', padding: '40px 60px' }}>
          {shots.map(([src, w, dy], i) => (
            <div key={i} style={{ transform: `translateY(${dy || 0}px)` }}>
              <CCMSBrowser src={src} w={w || 300} />
            </div>
          ))}
        </div>
      </div>
      {/* infinite-background fades */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: `linear-gradient(180deg, ${CCMS.bg} 0%, transparent 16%, transparent 80%, ${CCMS.bg} 100%)` }} />
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: `linear-gradient(90deg, ${CCMS.bg} 0%, transparent 12%, transparent 88%, ${CCMS.bg} 100%)` }} />
    </div>
  );
}

function CCMSSectionHead({ kicker, title }) {
  return (
    <div style={{ padding: '0 0 22px' }}>
      <div style={{ fontFamily: CCMS.mono, fontSize: 10, letterSpacing: 2.2, color: CCMS.blue, marginBottom: 10 }}>{kicker}</div>
      <h3 style={{ margin: 0, fontFamily: "'Space Grotesk','Inter',sans-serif", fontWeight: 700, fontSize: 'clamp(22px, 3vw, 34px)', letterSpacing: -0.8, color: '#fff' }}>{title}</h3>
    </div>
  );
}

/* ── Mini Design System exhibit (Cores · Tipografia · Botões · Ícones) ── */
function CCMSDesignSystem() {
  const swatch = (hex, name) => (
    <div key={hex} style={{ borderRadius: 10, overflow: 'hidden', background: '#fff', boxShadow: '0 10px 24px rgba(8,14,26,0.35)' }}>
      <div style={{ height: 52, background: hex }} />
      <div style={{ padding: '7px 10px' }}>
        <div style={{ fontSize: 10.5, fontWeight: 700, color: '#1a2332', fontFamily: CCMS.font }}>{name}</div>
        <div style={{ fontSize: 9, color: '#8a94a8', fontFamily: CCMS.mono }}>{hex}</div>
      </div>
    </div>
  );
  const panel = (title, body, grow) => (
    <div style={{ background: '#F6F8FB', borderRadius: 14, overflow: 'hidden', boxShadow: '0 24px 50px rgba(8,14,26,0.4)', flex: grow ? '1 1 300px' : '0 1 auto', minWidth: 260 }}>
      <div style={{ padding: '10px 16px', background: 'linear-gradient(90deg,#27466F,#3E587E)', color: '#fff', fontFamily: CCMS.font, fontWeight: 700, fontSize: 13 }}>{title}</div>
      <div style={{ padding: 16 }}>{body}</div>
    </div>
  );
  const btn = (label, style) => <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: '8px 16px', borderRadius: 8, fontFamily: CCMS.font, fontWeight: 600, fontSize: 11.5, cursor: 'default', ...style }}>{label}</span>;
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 18 }}>
      {panel('Cores', (
        <div>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1, color: '#5a6478', fontFamily: CCMS.font, marginBottom: 8 }}>BRAND COLORS</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
            {swatch('#2D9CDB', 'Primary Pure')}{swatch('#7AC1EA', 'Primary Light')}{swatch('#1B6FA8', 'Primary Medium')}{swatch('#0E3A5C', 'Primary Dark')}
          </div>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1, color: '#5a6478', fontFamily: CCMS.font, margin: '12px 0 8px' }}>HIGHLIGHT</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
            {swatch('#ED5F8F', 'Pure')}{swatch('#F4A0BE', 'Light')}{swatch('#B23A66', 'Medium')}{swatch('#6E1F3D', 'Dark')}
          </div>
        </div>
      ), true)}
      {panel('Tipografia', (
        <div style={{ fontFamily: CCMS.font, color: '#1a2332' }}>
          <div style={{ fontSize: 44, fontWeight: 800, lineHeight: 1, marginBottom: 6 }}>Aa</div>
          <div style={{ fontSize: 11.5, color: '#5a6478', marginBottom: 12 }}>Montserrat — família única da marca</div>
          {[['Bold', 800], ['SemiBold', 700], ['Medium', 600], ['Regular', 400]].map(([n, w]) => (
            <div key={n} style={{ display: 'flex', alignItems: 'baseline', gap: 10, padding: '4px 0', borderBottom: '1px solid #e8ecf2' }}>
              <span style={{ fontWeight: w, fontSize: 14 }}>Montserrat {n}</span>
              <span style={{ marginLeft: 'auto', fontFamily: CCMS.mono, fontSize: 9, color: '#8a94a8' }}>{w}</span>
            </div>
          ))}
        </div>
      ), true)}
      {panel('Botões', (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {btn('Primary', { background: '#2D9CDB', color: '#fff' })}
            {btn('Secondary', { background: '#fff', color: '#2D9CDB', border: '1.5px solid #2D9CDB' })}
            {btn('Ghost', { background: 'transparent', color: '#2D9CDB' })}
          </div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {btn('Disabled', { background: '#E2E8F0', color: '#9aa6b8' })}
            {btn('Danger', { background: '#E45858', color: '#fff' })}
            {btn('+ Split', { background: '#1B6FA8', color: '#fff' })}
          </div>
          <div style={{ fontSize: 10, color: '#8a94a8', fontFamily: CCMS.font }}>Estados: default · hover · pressed · disabled — radius 8, Montserrat SemiBold.</div>
        </div>
      ), true)}
      {panel('Ícones', (
        <div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 8, color: '#42536b' }}>
            {['M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z', 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z', 'M22 2 11 13M22 2l-7 20-4-9-9-4z', 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z', 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2', 'M22 16.92V21a1 1 0 0 1-1.09 1A19.86 19.86 0 0 1 3 4.09 1 1 0 0 1 4 3h4.09a1 1 0 0 1 1 .75 12.84 12.84 0 0 0 .7 2.81 1 1 0 0 1-.27 1.05l-1.27 1.27a16 16 0 0 0 6.87 6.87l1.27-1.27a1 1 0 0 1 1.05-.27 12.84 12.84 0 0 0 2.81.7 1 1 0 0 1 .75 1z', 'M4 4h16v16H4z', 'M12 2v20M2 12h20'].map((d, i) => (
              <span key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 30, background: '#fff', borderRadius: 7, boxShadow: '0 3px 8px rgba(8,14,26,0.12)' }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d={d} /></svg>
              </span>
            ))}
          </div>
          <div style={{ fontSize: 10, color: '#8a94a8', fontFamily: CCMS.font, marginTop: 10 }}>Phosphor Icons — set único, 3 pesos, grid 24px.</div>
        </div>
      ), true)}
    </div>
  );
}

/* ── Milestone block: ring + balloon + content ── */
function CCMSMilestone({ pct, kicker, title, quote, children, flip }) {
  return (
    <section style={{ position: 'relative', padding: 'clamp(40px, 6vw, 72px) clamp(20px, 5vw, 60px)' }}>
      <CCMSSectionHead kicker={kicker} title={title} />
      <div style={{ display: 'flex', gap: 22, alignItems: 'flex-start', flexWrap: 'wrap', flexDirection: flip ? 'row-reverse' : 'row', marginBottom: 8 }}>
        <CCMSRing pct={pct} />
        <CCMSBalloon>{quote}</CCMSBalloon>
      </div>
      {children}
    </section>
  );
}

/* ── The Showcase ── */
const CCMShowcase = () => {
  const reduced = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  React.useEffect(() => {
    if (document.getElementById('ccms-styles')) return;
    const st = document.createElement('style');
    st.id = 'ccms-styles';
    st.textContent = `
      @keyframes ccms-drift-a {0%,100%{transform:rotateX(18deg) rotateZ(-7deg) translate3d(0,0,0)}50%{transform:rotateX(18deg) rotateZ(-7deg) translate3d(-30px,-18px,0)}}
      @keyframes ccms-drift-b {0%,100%{transform:rotateX(16deg) rotateZ(6deg) translate3d(0,0,0)}50%{transform:rotateX(16deg) rotateZ(6deg) translate3d(26px,-14px,0)}}
      .ccms-drift-a{animation:ccms-drift-a 26s ease-in-out infinite}
      .ccms-drift-b{animation:ccms-drift-b 30s ease-in-out infinite}
      @media (prefers-reduced-motion: reduce){.ccms-drift-a,.ccms-drift-b{animation:none}}
    `;
    document.head.appendChild(st);
  }, []);

  const photoChip = (label) => (
    <span style={{ position: 'absolute', left: 12, bottom: 12, background: 'rgba(16,24,38,0.78)', backdropFilter: 'blur(4px)', color: '#fff', fontFamily: CCMS.font, fontWeight: 600, fontSize: 11, padding: '5px 11px', borderRadius: 6 }}>{label}</span>
  );

  return (
    <div style={{ width: '100%', height: '100%', overflowY: 'auto', overflowX: 'hidden', background: `radial-gradient(120% 70% at 50% 0%, ${CCMS.bg} 0%, ${CCMS.bg2} 55%, ${CCMS.bgDeep} 100%)`, color: CCMS.txt }}>
      {/* HERO */}
      <section style={{ position: 'relative', padding: 'clamp(48px, 7vw, 84px) clamp(20px, 5vw, 60px) 0', textAlign: 'center' }}>
        <div style={{ fontFamily: CCMS.mono, fontSize: 10.5, letterSpacing: 3, color: CCMS.blue, marginBottom: 14 }}>CASE STORY · 2023 — NOW</div>
        <h2 style={{ margin: '0 auto', maxWidth: 860, fontFamily: "'Space Grotesk','Inter',sans-serif", fontWeight: 700, fontSize: 'clamp(30px, 5vw, 56px)', letterSpacing: -1.5, lineHeight: 1.05, color: '#fff' }}>
          CCM: <span style={{ color: CCMS.blue }}>Customer Communication Management</span>
        </h2>
        <p style={{ margin: '18px auto 0', maxWidth: 640, fontFamily: CCMS.font, fontSize: 'clamp(13px, 1.6vw, 15.5px)', lineHeight: 1.75, color: CCMS.sub }}>
          From a blank page to a platform pitched to Samsung, Didi and Carrefour — told the way it happened, milestone by milestone.
        </p>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 26, marginTop: 26, flexWrap: 'wrap' }}>
          {[[25, 'Research'], [50, 'Design System'], [75, 'Prototypes'], [100, 'Go-to-market']].map(([p, l]) => (
            <div key={p} style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
              <CCMSRing pct={p} size={40} />
              <span style={{ fontFamily: CCMS.font, fontSize: 11.5, fontWeight: 600, color: CCMS.sub }}>{l}</span>
            </div>
          ))}
        </div>
      </section>

      {/* opening plane — product screens drifting */}
      <CCMSPlane drift={reduced ? '' : 'ccms-drift-a'} height={430}
        shots={[['assets/ccm/screen-4.png', 330, 0], ['assets/ccm/screen-6.png', 360, 40], ['assets/ccm/screen-5.png', 330, -24],
                ['assets/ccm/screen-8.png', 320, 26], ['assets/ccm/screen-9.png', 350, -10], ['assets/ccm/screen-10.png', 320, 30]]} />

      {/* 25% RESEARCH */}
      <CCMSMilestone pct={25} kicker="MILESTONE 01 · RESEARCH & BENCHMARKING" title="Mapping the market before drawing a pixel"
        quote="I helped conduct competitor research, and we built a parametric analysis table of numerous features. I also conducted research on all early adopters, analyzing their characteristics and proposed solutions.">
        <CCMSPlane drift={reduced ? '' : 'ccms-drift-b'} tilt="rotateX(16deg) rotateZ(6deg)" height={400} cols="repeat(2, minmax(300px, 1fr))"
          shots={[['assets/ccm/screen-1.png', 400, 0], ['assets/ccm/screen-2.png', 430, 30], ['assets/ccm/screen-3.png', 400, -16], ['assets/ccm/screen-7.png', 380, 20]]} />
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 4 }}>
          {['Podium', 'Hi Platform', 'Salesforce', 'Zenvia', 'SendPulse', 'Take Blip', 'Voximplant', 'Dynamics 365', 'Zendesk', 'Twilio Segment', 'Sendinblue', 'Mailchimp'].map((c) => (
            <span key={c} style={{ fontFamily: CCMS.font, fontSize: 11, fontWeight: 600, color: CCMS.sub, border: '1px solid rgba(168,182,204,0.3)', borderRadius: 999, padding: '6px 13px' }}>{c}</span>
          ))}
          <span style={{ fontFamily: CCMS.mono, fontSize: 9.5, color: CCMS.mut, alignSelf: 'center', marginLeft: 6 }}>← benchmarked head-to-head</span>
        </div>
      </CCMSMilestone>

      {/* 50% DESIGN SYSTEM */}
      <CCMSMilestone pct={50} kicker="MILESTONE 02 · VISUAL LANGUAGE" title="A style guide the whole team could build on" flip
        quote="I created the visual style for the platform and coordinated the creation, management, and maintenance of our style guide, assisting in the future development of a design system.">
        <CCMSDesignSystem />
      </CCMSMilestone>

      {/* 75% PROTOTYPES */}
      <CCMSMilestone pct={75} kicker="MILESTONE 03 · SCREENS & PROTOTYPES" title="High-definition prototypes, built to ship"
        quote="I worked hard on creating the screens and high-definition prototypes. I oversaw the developers as they coded the interfaces, ensuring that they adhered to the defined rules for both BackEnd and FrontEnd.">
        <CCMSPlane drift={reduced ? '' : 'ccms-drift-a'} height={470}
          shots={[['assets/ccm/proto-2.png', 340, 0], ['assets/ccm/proto-3.png', 360, 36], ['assets/ccm/proto-4.png', 330, -20],
                  ['assets/ccm/proto-5.png', 340, 24], ['assets/ccm/proto-6.png', 350, -8], ['assets/ccm/proto-7.png', 330, 32]]} />
      </CCMSMilestone>

      {/* 100% GO-TO-MARKET */}
      <CCMSMilestone pct={100} kicker="MILESTONE 04 · GO-TO-MARKET & TRAINING" title="Selling it, implementing it, training people on it" flip
        quote="I helped the company with other activities outside of my main responsibility. I helped sell the product to various companies at events, in person and remotely. I also helped implement and train many new clients. I am always helping the StartUp reach break-even.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 14 }}>
          {[['assets/ccm/paulo-present-1.png', 'Event presentation'], ['assets/ccm/paulo-present-3.png', 'Online presentation'],
            ['assets/ccm/paulo-present-4.png', 'Event presentation'], ['assets/ccm/paulo-present-2.png', 'Online presentation']].map(([src, label], i) => (
            <div key={src} style={{ position: 'relative', borderRadius: 12, overflow: 'hidden', boxShadow: '0 22px 50px rgba(8,14,26,0.5)', transform: `rotate(${i % 2 ? 1.2 : -1.2}deg)` }}>
              <img src={src} alt={label} loading="lazy" style={{ display: 'block', width: '100%', height: 230, objectFit: 'cover' }} />
              {photoChip(label)}
            </div>
          ))}
        </div>
      </CCMSMilestone>

      {/* CLOSE */}
      <section style={{ textAlign: 'center', padding: '12px 24px clamp(56px, 7vw, 90px)' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 14, padding: '16px 26px', border: `1px solid rgba(77,163,255,0.4)`, borderRadius: 14, background: CCMS.blueSoft }}>
          <CCMSRing pct={100} size={46} />
          <div style={{ textAlign: 'left' }}>
            <div style={{ fontFamily: "'Space Grotesk','Inter',sans-serif", fontWeight: 700, fontSize: 17, color: '#fff' }}>Platform reached break-even</div>
            <div style={{ fontFamily: CCMS.font, fontSize: 12, color: CCMS.sub, marginTop: 3 }}>Pitched to Samsung, Didi Global and Carrefour · full story on the Case tab</div>
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { CCMShowcase });