// DemosB.jsx — Row 2 & 3 components
// BeforeAfter, FeatureTabs, PricingToggle, SplitHero, LetterReveal, ParallaxFloat

const { useState, useEffect, useRef } = React;

/* ── Before/After Slider ── */
function BeforeAfter({ accent }) {
  const [pct, setPct] = useState(50);
  const ref = useRef(null);
  const dragging = useRef(false);

  function getX(e) {
    const r = ref.current.getBoundingClientRect();
    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
    return Math.max(5, Math.min(95, ((clientX - r.left) / r.width) * 100));
  }
  function start(e) { dragging.current = true; setPct(getX(e)); }
  function move(e) { if (dragging.current) setPct(getX(e)); }
  function end() { dragging.current = false; }

  useEffect(() => {
    window.addEventListener('mouseup', end);
    window.addEventListener('touchend', end);
    return () => { window.removeEventListener('mouseup', end); window.removeEventListener('touchend', end); };
  }, []);

  return (
    <div ref={ref}
      onMouseDown={start} onMouseMove={move}
      onTouchStart={start} onTouchMove={move}
      style={{
        width: 260, height: 160, borderRadius: 14,
        position: 'relative', overflow: 'hidden',
        cursor: 'col-resize', userSelect: 'none',
        boxShadow: '0 4px 24px #1c181420',
      }}>
      {/* AFTER — dark side */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(135deg, #1c1814 0%, #2c1f14 100%)',
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', gap: 6,
      }}>
        <div style={{ fontFamily: '"DM Serif Display",serif', color: '#f7f3ee', fontSize: 15, letterSpacing: '-0.01em' }}>After</div>
        <div style={{ width: 80, height: 2, background: accent, borderRadius: 2 }} />
        <div style={{ fontFamily: 'DM Sans,sans-serif', color: '#b5a89a', fontSize: 11, letterSpacing: '0.06em' }}>REDESIGNED</div>
      </div>
      {/* BEFORE — light side, clipped */}
      <div style={{
        position: 'absolute', inset: 0,
        clipPath: `inset(0 ${100 - pct}% 0 0)`,
        background: 'linear-gradient(135deg, #f7f3ee 0%, #efe8df 100%)',
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', gap: 6,
      }}>
        <div style={{ fontFamily: '"DM Serif Display",serif', color: '#1c1814', fontSize: 15 }}>Before</div>
        <div style={{ width: 80, height: 2, background: '#d5c9be', borderRadius: 2 }} />
        <div style={{ fontFamily: 'DM Sans,sans-serif', color: '#9a8c82', fontSize: 11, letterSpacing: '0.06em' }}>ORIGINAL</div>
      </div>
      {/* Handle */}
      <div style={{
        position: 'absolute', top: 0, bottom: 0,
        left: `${pct}%`, transform: 'translateX(-50%)',
        width: 2, background: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        pointerEvents: 'none',
      }}>
        <div style={{
          width: 32, height: 32, borderRadius: '50%',
          background: '#fff', boxShadow: '0 2px 12px #00000030',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 12, color: '#9a8c82', fontWeight: 700,
        }}>⇔</div>
      </div>
    </div>
  );
}

/* ── Feature Tabs ── */
function FeatureTabs({ accent }) {
  const tabs = [
    { label: 'Strategy', body: 'Research, IA & content architecture that converts.' },
    { label: 'Design', body: 'Systems thinking with pixel-level craft and care.' },
    { label: 'Build', body: 'React, motion, and production-grade frontend code.' },
  ];
  const [active, setActive] = useState(0);
  const [animDir, setAnimDir] = useState(1);
  const [visible, setVisible] = useState(true);

  function pick(i) {
    if (i === active) return;
    setAnimDir(i > active ? 1 : -1);
    setVisible(false);
    setTimeout(() => { setActive(i); setVisible(true); }, 220);
  }

  return (
    <div style={{ width: 240, fontFamily: 'DM Sans,sans-serif' }}>
      {/* Tab bar */}
      <div style={{
        display: 'flex', background: '#efe8df',
        borderRadius: 10, padding: 4, gap: 2, marginBottom: 16,
        position: 'relative',
      }}>
        {tabs.map((t, i) => (
          <button key={t.label} onClick={() => pick(i)} style={{
            flex: 1, padding: '7px 0', borderRadius: 7, border: 'none',
            background: active === i ? '#fff' : 'transparent',
            color: active === i ? '#1c1814' : '#9a8c82',
            fontSize: 12, fontWeight: active === i ? 600 : 400,
            cursor: 'pointer', fontFamily: 'DM Sans,sans-serif',
            transition: 'all 0.25s',
            boxShadow: active === i ? '0 2px 8px #1c181412' : 'none',
          }}>{t.label}</button>
        ))}
      </div>
      {/* Content */}
      <div style={{
        background: '#fff', borderRadius: 12, padding: '16px 18px',
        border: '1px solid #e5dcd3',
        opacity: visible ? 1 : 0,
        transform: visible ? 'translateX(0)' : `translateX(${animDir * 12}px)`,
        transition: 'opacity 0.22s ease, transform 0.22s ease',
        minHeight: 64,
      }}>
        <div style={{
          width: 28, height: 3, borderRadius: 2,
          background: accent, marginBottom: 10,
        }} />
        <div style={{ fontSize: 13, color: '#1c1814', lineHeight: 1.6 }}>
          {tabs[active].body}
        </div>
      </div>
    </div>
  );
}

/* ── Pricing Toggle ── */
function PricingToggle({ accent }) {
  const [annual, setAnnual] = useState(false);
  const price = annual ? 49 : 79;

  return (
    <div style={{ textAlign: 'center', fontFamily: 'DM Sans,sans-serif', width: 200 }}>
      {/* Toggle row */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, marginBottom: 20 }}>
        <span style={{ fontSize: 12, color: !annual ? '#1c1814' : '#b5a89a', fontWeight: !annual ? 600 : 400, transition: 'all 0.3s' }}>Monthly</span>
        <button onClick={() => setAnnual(a => !a)} style={{
          width: 44, height: 24, borderRadius: 100, border: 'none', cursor: 'pointer',
          background: annual ? accent : '#d5c9be', padding: 3,
          position: 'relative', transition: 'background 0.3s',
        }}>
          <div style={{
            width: 18, height: 18, borderRadius: '50%', background: '#fff',
            position: 'absolute', left: 3,
            transform: annual ? 'translateX(20px)' : 'translateX(0)',
            transition: 'transform 0.4s cubic-bezier(0.34,1.56,0.64,1)',
            boxShadow: '0 1px 4px #1c181825',
          }} />
        </button>
        <span style={{ fontSize: 12, color: annual ? '#1c1814' : '#b5a89a', fontWeight: annual ? 600 : 400, transition: 'all 0.3s' }}>Annual</span>
        {annual && <span style={{ fontSize: 10, fontWeight: 700, color: accent, background: accent + '18', borderRadius: 20, padding: '2px 7px' }}>–38%</span>}
      </div>
      {/* Price card */}
      <div style={{
        background: '#1c1814', borderRadius: 16, padding: '22px 20px',
        boxShadow: `0 8px 32px #1c181430`,
      }}>
        <div style={{ fontSize: 11, color: '#b5a89a', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 12 }}>
          Pro Studio
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 4 }}>
          <span style={{ fontFamily: '"DM Serif Display",serif', fontSize: 42, color: '#f7f3ee', lineHeight: 1 }}>${price}</span>
          <span style={{ fontSize: 12, color: '#b5a89a' }}>/mo</span>
        </div>
        <div style={{
          marginTop: 16, padding: '10px 16px', background: accent,
          borderRadius: 10, fontSize: 13, fontWeight: 600, color: '#fff',
          cursor: 'pointer', transition: 'opacity 0.2s',
        }}>Get started</div>
      </div>
    </div>
  );
}

/* ── Split Hero ── */
function SplitHero({ accent }) {
  const [entered, setEntered] = useState(false);
  useEffect(() => { setTimeout(() => setEntered(true), 100); }, []);

  return (
    <div style={{
      display: 'flex', gap: 0, width: 280, height: 150,
      borderRadius: 14, overflow: 'hidden', boxShadow: '0 4px 20px #1c181418',
    }}>
      {/* Left text */}
      <div style={{
        flex: 1, background: '#f7f3ee', padding: '18px 16px',
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
        borderRight: '1px solid #e5dcd3',
      }}>
        <div style={{
          fontFamily: '"DM Serif Display",serif', fontSize: 17,
          color: '#1c1814', lineHeight: 1.2, marginBottom: 8,
          opacity: entered ? 1 : 0,
          transform: entered ? 'translateX(0)' : 'translateX(-12px)',
          transition: 'all 0.6s cubic-bezier(0.23,1,0.32,1)',
        }}>Build with<br /><em style={{ color: accent }}>intention.</em></div>
        <div style={{
          fontFamily: 'DM Sans,sans-serif', fontSize: 10, color: '#b5a89a',
          opacity: entered ? 1 : 0,
          transform: entered ? 'translateY(0)' : 'translateY(8px)',
          transition: 'all 0.6s 0.15s cubic-bezier(0.23,1,0.32,1)',
        }}>Creative Technologist</div>
      </div>
      {/* Right visual */}
      <div style={{
        width: 100, background: 'linear-gradient(160deg, #2c1f14 0%, #1c1814 100%)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          width: 48, height: 48, borderRadius: '50%',
          border: `2px solid ${accent}`,
          opacity: entered ? 1 : 0,
          transform: entered ? 'scale(1)' : 'scale(0.6)',
          transition: 'all 0.7s 0.25s cubic-bezier(0.23,1,0.32,1)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <div style={{ fontFamily: '"DM Serif Display",serif', color: '#f7f3ee', fontSize: 16, fontStyle: 'italic' }}>KK</div>
        </div>
        {/* orbiting dot */}
        <div style={{
          position: 'absolute', width: 6, height: 6, borderRadius: '50%', background: accent,
          top: 28, right: 22,
          opacity: entered ? 1 : 0,
          transition: 'opacity 0.5s 0.5s',
          animation: entered ? 'orbit 3s linear infinite' : 'none',
        }} />
        <style>{`@keyframes orbit { from{transform:rotate(0deg) translateX(32px)} to{transform:rotate(360deg) translateX(32px)} }`}</style>
      </div>
    </div>
  );
}

/* ── Letter Reveal ── */
function LetterReveal({ accent }) {
  const text = 'Crafted with care.';
  const [shown, setShown] = useState(0);
  function trigger() {
    setShown(0);
    let i = 0;
    const t = setInterval(() => {
      i++;
      setShown(i);
      if (i >= text.length) clearInterval(t);
    }, 45);
  }
  useEffect(() => { trigger(); }, []);

  return (
    <div style={{ textAlign: 'center' }}>
      <div style={{
        fontFamily: '"DM Serif Display",serif', fontSize: 26,
        color: '#1c1814', lineHeight: 1.3, marginBottom: 20,
        letterSpacing: '-0.01em',
      }}>
        {text.split('').map((ch, i) => (
          <span key={i} style={{
            opacity: i < shown ? 1 : 0,
            transform: i < shown ? 'translateY(0)' : 'translateY(10px)',
            display: 'inline-block',
            transition: 'opacity 0.3s ease, transform 0.3s ease',
            color: ch === '.' ? accent : '#1c1814',
            whiteSpace: ch === ' ' ? 'pre' : 'normal',
          }}>{ch}</span>
        ))}
      </div>
      <button onClick={trigger} style={{
        background: 'none', border: `1px solid ${accent}`, color: accent,
        borderRadius: 8, padding: '6px 16px', fontSize: 12,
        fontFamily: 'DM Sans,sans-serif', fontWeight: 600, cursor: 'pointer',
      }}>replay ↺</button>
    </div>
  );
}

/* ── Parallax Float ── */
function ParallaxFloat({ accent }) {
  const ref = useRef(null);
  const [mouse, setMouse] = useState({ x: 0, y: 0 });

  function onMove(e) {
    const r = ref.current.getBoundingClientRect();
    setMouse({
      x: ((e.clientX - r.left) / r.width - 0.5) * 2,
      y: ((e.clientY - r.top) / r.height - 0.5) * 2,
    });
  }

  const blobs = [
    { size: 60, depth: 18, x: '20%', y: '25%', color: accent + 'aa' },
    { size: 40, depth: 28, x: '65%', y: '55%', color: '#1c181466' },
    { size: 24, depth: 38, x: '75%', y: '20%', color: accent + '66' },
    { size: 16, depth: 50, x: '30%', y: '70%', color: '#b5a89a88' },
  ];

  return (
    <div ref={ref} onMouseMove={onMove}
      style={{
        width: 260, height: 150, borderRadius: 14, overflow: 'hidden',
        background: 'linear-gradient(145deg, #f7f3ee, #efe8df)',
        position: 'relative', cursor: 'crosshair',
        border: '1px solid #e5dcd3',
      }}>
      {blobs.map((b, i) => (
        <div key={i} style={{
          position: 'absolute',
          left: b.x, top: b.y,
          width: b.size, height: b.size, borderRadius: '50%',
          background: b.color,
          transform: `translate(${mouse.x * b.depth * -0.5}px, ${mouse.y * b.depth * -0.5}px)`,
          transition: 'transform 0.15s ease',
          filter: 'blur(1px)',
        }} />
      ))}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <span style={{
          fontFamily: '"DM Serif Display",serif', fontSize: 20,
          color: '#1c1814', position: 'relative',
          transform: `translate(${mouse.x * -6}px, ${mouse.y * -6}px)`,
          transition: 'transform 0.1s ease',
        }}>Move your cursor</span>
      </div>
    </div>
  );
}

Object.assign(window, { BeforeAfter, FeatureTabs, PricingToggle, SplitHero, LetterReveal, ParallaxFloat });