// Practivo landing page components — all-in-one (small enough to keep in one file)
const { useState, useEffect, useRef } = React;

/* ---------- Icons (Feather-style, inline SVG) ---------- */
const Icon = {
  ArrowRight: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>),
  ArrowDown: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>),
  Play: (p) => (<svg viewBox="0 0 24 24" fill="currentColor" {...p}><polygon points="6 4 20 12 6 20 6 4"/></svg>),
  Repeat: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>),
  Users: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>),
  BarChart: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/></svg>),
  Clock: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>),
  MessageSquare: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>),
  FileText: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>),
  Briefcase: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>),
  Building: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="4" y="2" width="16" height="20" rx="1"/><line x1="9" y1="7" x2="9" y2="7"/><line x1="15" y1="7" x2="15" y2="7"/><line x1="9" y1="12" x2="9" y2="12"/><line x1="15" y1="12" x2="15" y2="12"/><line x1="9" y1="17" x2="15" y2="17"/></svg>),
  UserCheck: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><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"/><polyline points="17 11 19 13 23 9"/></svg>),
  LinkedIn: (p) => (<svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM0 8h5v16H0V8zm7.5 0H12v2.2h.1c.63-1.2 2.17-2.5 4.5-2.5 4.82 0 5.7 3.17 5.7 7.3V24h-5v-7.3c0-1.74-.03-4-2.44-4-2.44 0-2.81 1.9-2.81 3.87V24h-5V8z"/></svg>),
  Menu: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>),
  X: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>),
  Check: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="20 6 9 17 4 12"/></svg>),
  Sparkle: (p) => (<svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12 2l1.6 6.4L20 10l-6.4 1.6L12 18l-1.6-6.4L4 10l6.4-1.6L12 2z"/></svg>),
};

/* ---------- Practivo logotype ---------- */
const PractivoLogo = ({ light = false }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
    <img
      src={light ? 'assets/logo-practivo-white.png' : 'assets/logo-practivo-ink.png'}
      alt="Practivo logo"
      style={{ width: 32, height: 32, display: 'block', objectFit: 'contain' }}
    />
    <span style={{
      fontFamily: 'var(--pv-font-heading)',
      fontWeight: 700,
      fontSize: 22,
      letterSpacing: '-0.02em',
      color: light ? '#fff' : '#0B1220',
    }}>practivo</span>
  </div>
);

/* ---------- Header ---------- */
const Header = ({ onCta }) => {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll); onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  // Lock body scroll when mobile menu is open
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  const links = [
    ['Problem', '#problem'],
    ['Solution', '#solution'],
    ['How it works', '#how'],
    ['Who it\'s for', '#who'],
    ['Demo', '#demo'],
  ];
  const close = () => setOpen(false);
  return (
    <header className="pv-header" style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: (scrolled || open) ? 'rgba(11,18,32,0.95)' : 'transparent',
      backdropFilter: (scrolled || open) ? 'blur(10px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(255,255,255,.08)' : '1px solid transparent',
      transition: 'all .25s ease',
    }}>
      <div className="pv-container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 24px' }}>
        <a href="#" onClick={(e) => { e.preventDefault(); close(); window.scrollTo({ top: 0, behavior: 'smooth' }); }} style={{ textDecoration: 'none' }}>
          <PractivoLogo light />
        </a>
        <nav className="pv-nav-links" style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
          {links.map(([label, href]) => (
            <a key={href} href={href} style={{
              color: 'rgba(255,255,255,.75)',
              fontFamily: 'var(--pv-font-heading)',
              fontSize: 14, fontWeight: 500,
              transition: 'color .2s',
            }} onMouseEnter={e=>e.currentTarget.style.color='var(--pv-accent)'} onMouseLeave={e=>e.currentTarget.style.color='rgba(255,255,255,.75)'}>{label}</a>
          ))}
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <button className="pv-btn pv-btn--primary pv-header-cta" onClick={onCta}>Request a demo</button>

          {/* Hamburger — visible only on mobile via CSS */}
          <button
            className="pv-hamburger"
            aria-label={open ? 'Close menu' : 'Open menu'}
            aria-expanded={open}
            onClick={() => setOpen(o => !o)}
            style={{
              background: 'transparent', border: '1px solid rgba(255,255,255,.2)',
              color: '#fff', width: 44, height: 44,
              display: 'none', alignItems: 'center', justifyContent: 'center',
              cursor: 'pointer', padding: 0, borderRadius: 0,
              transition: 'border-color .2s',
            }}
          >
            {open ? <Icon.X width={22} height={22} /> : <Icon.Menu width={22} height={22} />}
          </button>
        </div>
      </div>

      {/* Mobile dropdown panel */}
      <div className="pv-mobile-menu" style={{
        maxHeight: open ? '80vh' : 0,
        overflow: 'hidden',
        transition: 'max-height .35s cubic-bezier(.2,.8,.2,1)',
        background: 'rgba(11,18,32,0.98)',
        borderTop: open ? '1px solid rgba(255,255,255,.08)' : '1px solid transparent',
      }}>
        <nav style={{ display: 'flex', flexDirection: 'column', padding: '8px 0' }}>
          {links.map(([label, href]) => (
            <a key={href} href={href} onClick={close} style={{
              padding: '18px 28px',
              color: 'rgba(255,255,255,.85)',
              fontFamily: 'var(--pv-font-heading)',
              fontSize: 17, fontWeight: 500,
              borderBottom: '1px solid rgba(255,255,255,.06)',
            }}>{label}</a>
          ))}
          <div style={{ padding: '20px 28px 28px' }}>
            <button className="pv-btn pv-btn--primary" onClick={() => { close(); onCta(); }} style={{ width: '100%', justifyContent: 'center' }}>
              Request a demo <Icon.ArrowRight />
            </button>
          </div>
        </nav>
      </div>
    </header>
  );
};

/* ---------- Hero — full-bleed video background ---------- */
const Hero = ({ onCta, onSeeHow, variant = 'video' }) => {
  return (
    <section className="pv-hero" style={{
      position: 'relative',
      background: 'var(--pv-ink-900)',
      color: '#fff',
      minHeight: '100vh',
      display: 'flex', alignItems: 'center',
      paddingTop: 160, paddingBottom: 120,
      overflow: 'hidden',
    }}>
      {/* Background video */}
      {variant === 'video' && (
        <video
          autoPlay muted loop playsInline
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover',
            zIndex: 0,
          }}
          src="assets/practivo-video.mp4"
        />
      )}
      {variant === 'image' && (
        <img src="assets/practivo-screen.png" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', zIndex: 0 }} />
      )}

      {/* Dark overlay for legibility — full dark, not gradient (IF rule) */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: 'linear-gradient(100deg, rgba(11,18,32,0.92) 0%, rgba(11,18,32,0.78) 45%, rgba(11,18,32,0.55) 100%)',
      }} />
      {/* teal glow */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: 'radial-gradient(900px 400px at 15% 30%, rgba(20,184,166,0.16), transparent 60%)',
        pointerEvents: 'none',
      }} />

      <div className="pv-container pv-grid-hero" style={{ position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <span className="pv-eyebrow">AI practice for trainers</span>
          <h1 style={{ fontSize: 'clamp(42px, 5.2vw, 68px)', lineHeight: 1.05, color: '#fff', fontWeight: 700, marginBottom: 28, letterSpacing: '-0.02em' }}>
            Give your training a second phase —{' '}
            <span style={{ color: 'var(--pv-accent)' }}>AI practice and proof of results</span>
          </h1>
          <p style={{ fontSize: 21, lineHeight: 1.55, color: 'rgba(255,255,255,.78)', maxWidth: 580, marginBottom: 40 }}>
            Practivo adds AI conversation practice to your training program — and generates evaluation reports you can hand to your client.
          </p>
          <div className="pv-hero-ctas" style={{ display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
            <button className="pv-btn pv-btn--primary" onClick={onCta}>
              Request a demo <Icon.ArrowRight />
            </button>
            <a href="#how" className="pv-btn pv-btn--ghost" onClick={e=>{e.preventDefault(); onSeeHow();}}>
              See how it works <Icon.ArrowDown />
            </a>
          </div>


        </div>

        {/* Floating session card — placed inside hero to echo what video shows */}
        <div className="pv-hero-card-wrap" style={{ position: 'relative', display: 'flex', justifyContent: 'flex-end' }}>
          <HeroFloatingCard />
        </div>
      </div>

      {/* Scroll affordance removed */}

      <style>{`@keyframes pv-pulse { 0%,100%{opacity:1}50%{opacity:.3} }`}</style>
    </section>
  );
};

const HeroFloatingCard = () => (
  <div style={{
    background: 'rgba(11,18,32,.7)',
    backdropFilter: 'blur(16px)',
    border: '1px solid rgba(255,255,255,.1)',
    padding: '24px 28px',
    width: 360,
    color: '#fff',
    boxShadow: '0 30px 60px -20px rgba(0,0,0,.6)',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
      <div style={{ fontFamily: 'var(--pv-font-heading)', fontSize: 11, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,.55)' }}>Session report</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--pv-accent)', fontFamily: 'var(--pv-font-heading)', fontSize: 11, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase' }}>
        <span style={{ width: 6, height: 6, background: 'var(--pv-accent)', borderRadius: '50%' }} />
        Complete
      </div>
    </div>
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 20 }}>
      <span style={{ fontFamily: 'var(--pv-font-heading)', fontWeight: 700, fontSize: 44, color: '#fff', lineHeight: 1 }}>7.8</span>
      <span style={{ color: 'rgba(255,255,255,.5)', fontSize: 15 }}>/ 10</span>
      <span style={{ marginLeft: 'auto', color: 'var(--pv-accent)', fontSize: 13, fontWeight: 600, fontFamily: 'var(--pv-font-heading)' }}>+1.4 vs. last</span>
    </div>
    {[
      ['Active listening', 0.82],
      ['Objection handling', 0.74],
      ['Closing', 0.65],
    ].map(([label, v]) => (
      <div key={label} style={{ marginBottom: 12 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, fontFamily: 'var(--pv-font-heading)', fontWeight: 500, color: 'rgba(255,255,255,.7)', marginBottom: 6 }}>
          <span>{label}</span><span>{Math.round(v*100)}%</span>
        </div>
        <div style={{ height: 4, background: 'rgba(255,255,255,.08)' }}>
          <div style={{ height: '100%', width: `${v*100}%`, background: 'var(--pv-accent)' }} />
        </div>
      </div>
    ))}
  </div>
);

Object.assign(window, { Icon, PractivoLogo, Header, Hero });
