// landing-v6.jsx — v6 public landing page (/). The quiet editorial surface
// shares the report's Geist hierarchy and warm-neutral paper while remaining
// deliberately distinct from the denser Planner workspace. Pricing derives
// from V6_TIERS — single source with the app.

const L6_DESIGN = (typeof window !== 'undefined' && window.CLA_DESIGN) || {
  font: {
    sans:'"Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif',
    display:'"Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif',
    mono:'"Geist Mono", ui-monospace, monospace',
    serif:'"Iowan Old Style", "Hoefler Text", Georgia, serif',
  },
  color: {
    marketing:{ canvas:'#f4f4f1', paper:'#fafaf8', surface:'#fff', ink:'#15171a', muted:'#626872', hairline:'#dfe1e4' },
    toolLight:{ accent:'#1f5bb5', accentSoft:'#edf3ff' },
  },
};
const L6_BG = L6_DESIGN.color.marketing.canvas;
const L6_PAPER = L6_DESIGN.color.marketing.paper;
const L6_SURFACE = L6_DESIGN.color.marketing.surface;
const L6_INK = L6_DESIGN.color.marketing.ink;
const L6_MUTED = L6_DESIGN.color.marketing.muted || '#626872';
const L6_HAIR = L6_DESIGN.color.marketing.hairline || '#dfe1e4';
const L6_ACCENT = (L6_DESIGN.color.toolLight && L6_DESIGN.color.toolLight.accent) || '#1f5bb5';
const L6_ACCENT_SOFT = (L6_DESIGN.color.toolLight && L6_DESIGN.color.toolLight.accentSoft) || '#edf3ff';
const L6_DISPLAY = L6_DESIGN.font.display || L6_DESIGN.font.sans;
const L6_SERIF = L6_DISPLAY; // retained alias for existing display-type call sites
const L6_MONO = L6_DESIGN.font.mono;
const L6_SANS = L6_DESIGN.font.sans;

function V6_LandingNav(){
  const links = [['CLAP','#planner'],['Coach Tagger','#tagger'],['How it works','#how'],['Pricing','#pricing']];
  return (
    <header className="l6-nav" style={{ display:'flex', alignItems:'center', justifyContent:'space-between',
      padding:'18px clamp(20px, 5vw, 56px)', position:'sticky', top: 0, zIndex: 10,
      background:L6_BG, borderBottom:`1px solid ${L6_HAIR}` }}>
      <a className="l6-nav-brand" href="/" aria-label="CLAP home"
        style={{ display:'flex', alignItems:'center', gap:11, color:L6_INK, textDecoration:'none' }}>
        <span style={{ width: 38, height: 38, display:'grid', placeItems:'center', borderRadius: 10,
          background:'#111317', color:'#fff', fontFamily:L6_DISPLAY, fontSize:10, fontWeight:850 }}>CLAP</span>
        <div style={{ display:'grid', gap:2, fontFamily:L6_DISPLAY, color:L6_INK }}>
          <strong style={{ fontSize:14, lineHeight:1 }}>CLAP</strong>
          <span style={{ fontSize:11.5, color:L6_MUTED }}>Planner + Coach Tagger</span>
        </div>
      </a>
      <nav className="l6-product-links" aria-label="Public site"
        style={{ display:'flex', alignItems:'center', gap:24 }}>
        {links.map(([l, href]) => (
          <a key={l} href={href} style={{ fontSize:13, color:L6_MUTED, textDecoration:'none', fontWeight:650 }}>{l}</a>
        ))}
      </nav>
      <div className="l6-nav-actions" style={{ display:'flex', alignItems:'center', gap: 18 }}>
        <L6_InstallChip />
        {/* Plain app.html: an existing session goes straight in (persisted, storageKey
            'cla-auth'); no session hits the required login gate. ?login=1 is reserved for
            an explicit switch-account flow — as an entry link it signed Tim out every visit. */}
        <a href="app.html" style={{ fontSize:13, color:L6_MUTED, textDecoration:'none', fontWeight:650 }}>Sign in</a>
        <a className="l6-nav-cta" href="app.html?signup=1" data-ux="landing-start-free" style={{ background:'#111317', color:'#fff', borderRadius: 10, padding:'10px 17px',
          fontSize:12.5, fontWeight:700, textDecoration:'none' }}>Start free</a>
      </div>
    </header>
  );
}

// ⬇ Install app (Tim 2026-07-19: "can we link that from the home page?").
// Pops the browser's REAL install dialog when it's on offer (auth.jsx parks the
// beforeinstallprompt event on window.__claInstallPrompt); otherwise shows a
// short per-browser how-to. Hidden when already running as the installed app.
//
// Never pitch an install to a coach who already installed it (Tim 2026-07-29:
// "if i already have the app installed on the device then don't prompt me to
// download the app... prompt me to open in app or keep using on the web"):
//   • Chrome/Edge → navigator.getInstalledRelatedApps() reports our own PWA
//     (needs manifest related_applications, added the same day), so the chip
//     flips to "Open in app" on its own.
//   • Safari/iOS ships NO equivalent API — there is no way to detect a
//     home-screen install. So the how-to popover carries a one-tap "I already
//     have it", remembered in localStorage, which retires the chip for good.
const L6_INSTALL_DISMISS_KEY = 'cla-install-chip-off';
function L6_InstallChip(){
  const [, bump] = React.useState(0);
  const [hint, setHint] = React.useState('');
  const [installed, setInstalled] = React.useState(false);
  const [off, setOff] = React.useState(()=>{
    try { return localStorage.getItem(L6_INSTALL_DISMISS_KEY) === '1'; } catch (_) { return false; }
  });
  React.useEffect(() => {
    const on = () => bump((n) => n + 1);
    window.addEventListener('cla:can-install', on);
    return () => window.removeEventListener('cla:can-install', on);
  }, []);
  React.useEffect(() => {
    if (!navigator.getInstalledRelatedApps) return undefined;
    let live = true;
    navigator.getInstalledRelatedApps()
      .then((apps)=>{ if (live && apps && apps.length) setInstalled(true); })
      .catch(()=>{});
    return ()=>{ live = false; };
  }, []);
  if (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) return null;
  if (off) return null;
  function retire(){
    try { localStorage.setItem(L6_INSTALL_DISMISS_KEY, '1'); } catch (_) {}
    setOff(true);
  }
  // Already on the device: offer the app, never the download. Following /app
  // lets Android/Chrome hand the navigation to the installed PWA; where the OS
  // doesn't capture links the coach simply stays on the web app, which is the
  // other half of what he asked for.
  if (installed) {
    return (
      <span style={{ display:'inline-flex', alignItems:'center', gap: 10 }}>
        <a href="/app" data-ux="landing-open-in-app"
          style={{ fontSize: 13, color:'rgba(22,17,14,.7)', fontWeight: 500, textDecoration:'none' }}>
          ⧉ Open in app
        </a>
        <button type="button" onClick={retire} data-ux="landing-keep-web"
          style={{ background:'transparent', border: 0, padding: 0, cursor:'pointer', fontFamily:'inherit',
            fontSize: 13, color:'rgba(22,17,14,.45)', fontWeight: 500 }}>
          Keep using web
        </button>
      </span>
    );
  }
  async function click(){
    const p = window.__claInstallPrompt;
    if (p) {
      window.__claInstallPrompt = null;
      try { p.prompt(); await p.userChoice; } catch (_) {}
      return;
    }
    const ios = /iPad|iPhone|iPod/.test(navigator.userAgent)
      || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1); // iPadOS masquerades as Mac
    setHint(ios ? 'On iPad / iPhone: tap Share, then “Add to Home Screen”.'
      : 'In Chrome or Edge: click the install icon at the right end of the address bar.');
    setTimeout(() => setHint(''), 12000);
  }
  return (
    <span style={{ position:'relative' }}>
      <button type="button" onClick={click} data-ux="landing-install-app"
        style={{ background:'transparent', border: 0, padding: 0, cursor:'pointer', fontFamily:'inherit',
          fontSize: 13, color:'rgba(22,17,14,.7)', fontWeight: 500 }}>
        ⬇ Install app
      </button>
      {hint && (
        <span style={{ position:'absolute', top:'calc(100% + 10px)', right: 0, width: 230, zIndex: 50,
          background:L6_SURFACE, color: L6_INK, borderRadius: 10, padding:'10px 12px',
          fontSize: 12, lineHeight: 1.45, fontWeight: 500, display:'block',
          boxShadow:'0 12px 34px rgba(22,17,14,.22), 0 0 0 .5px rgba(22,17,14,.12)' }}>
          {hint}
          <button type="button" onClick={retire} data-ux="landing-already-installed"
            style={{ display:'block', marginTop: 8, background:'transparent', border: 0, padding: 0,
              cursor:'pointer', fontFamily:'inherit', fontSize: 12, fontWeight: 600,
              color:'rgba(22,17,14,.55)', textAlign:'left' }}>
            I already have it — stop showing this
          </button>
        </span>
      )}
    </span>
  );
}

// the hero artifact — a real practice ribbon computed from the shared model
function V6_LandingRibbon(){
  const p = DEFAULT_PRACTICE;
  const t = totals(p);
  return (
    <div style={{ background:L6_SURFACE, borderRadius: 16, padding: 22,
      boxShadow:'0 1px 0 rgba(22,17,14,.06), 0 24px 60px -28px rgba(22,17,14,.35), 0 0 0 .5px rgba(22,17,14,.1)' }}>
      <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom: 12 }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: L6_INK, fontFamily: L6_SANS }}>{p.date} · {fmtTimeShort(p.start)}</div>
        <div style={{ fontSize: 10.5, color:'rgba(22,17,14,.5)', fontFamily: L6_MONO }}>{t.totalMin} min · {p.blocks.length} blocks</div>
      </div>
      <div style={{ display:'flex', width:'100%', height: 34, borderRadius: 8, overflow:'hidden', boxShadow:'inset 0 0 0 .5px rgba(22,17,14,.14)' }}>
        {t.blocks.map((b)=>(
          <div key={b.id} title={`${b.name} · ${b.dur}m`} style={{ flex: b.dur, background: CATEGORIES[b.cat].ink,
            display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontSize: 9, fontWeight: 700,
            borderRight:'1px solid rgba(255,255,255,.25)', overflow:'hidden', whiteSpace:'nowrap' }}>
            {b.dur >= 8 ? b.dur : ''}
          </div>
        ))}
      </div>
      <div style={{ marginTop: 14, display:'flex', flexDirection:'column', gap: 6 }}>
        {t.blocks.slice(0, 5).map((b)=>(
          <div key={b.id} style={{ display:'flex', alignItems:'center', gap: 9, fontFamily: L6_SANS }}>
            <span style={{ fontFamily: L6_MONO, fontSize: 10.5, color:'rgba(22,17,14,.5)', width: 40, flexShrink: 0 }}>{fmtTimeShort(b.start)}</span>
            <span style={{ width: 8, height: 8, borderRadius: 2, background: CATEGORIES[b.cat].ink, flexShrink: 0 }} />
            <span style={{ fontSize: 12.5, fontWeight: 600, color: L6_INK, flex: 1, minWidth: 0, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{b.name}</span>
            <span style={{ fontFamily: L6_MONO, fontSize: 10.5, color:'rgba(22,17,14,.5)' }}>{b.dur}m</span>
          </div>
        ))}
        <div style={{ fontSize: 10.5, color:'rgba(22,17,14,.4)', fontFamily: L6_MONO, paddingLeft: 49 }}>+ {t.blocks.length - 5} more…</div>
      </div>
      <div style={{ display:'flex', gap: 8, marginTop: 14, paddingTop: 12, borderTop:'.5px solid rgba(22,17,14,.08)' }}>
        {[['HC', t.halfMin+'m'],['FC', t.fullMin+'m'],['Live', t.liveMin+'m']].map(([k,v])=>(
          <div key={k} style={{ flex: 1, textAlign:'center', padding:'6px 0', background:'rgba(22,17,14,.04)', borderRadius: 8 }}>
            <div style={{ fontSize: 8.5, fontWeight: 800, letterSpacing:'.1em', color:'rgba(22,17,14,.45)', fontFamily: L6_SANS }}>{k}</div>
            <div style={{ fontSize: 14, fontWeight: 700, fontFamily: L6_MONO, color: L6_INK }}>{v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// The public hero must prove the product relationship before it explains
// secondary capabilities. This is deliberately a faithful, non-interactive
// specimen: Planner stays light, Tagger stays film-dark, and the shared strip
// names the handoff without implying that device-owned film is uploaded.
function V6_LandingSystemArt(){
  const p = DEFAULT_PRACTICE;
  const t = totals(p);
  return (
    <div className="l6-system-art" data-ux="landing-connected-products"
      aria-label="CLAP Practice Planner and Coach Tagger connected in one coaching workflow">
      <div className="l6-system-art-head">
        <span>ONE COACHING WORKSPACE</span>
        <b>PLANNER + TAGGER · CONNECTED</b>
      </div>
      <div className="l6-system-panels">
        <section className="l6-system-planner" aria-label="Practice Planner preview">
          <div className="l6-system-panel-title"><span>01 · PLANNER</span><b>Practice 12</b></div>
          <div className="l6-system-plan-bar" aria-hidden="true">
            {t.blocks.slice(0,6).map((block)=><i key={block.id} style={{ flex:block.dur, background:CATEGORIES[block.cat].ink }} />)}
          </div>
          <div className="l6-system-plan-rows">
            {t.blocks.slice(0,4).map((block)=><div key={block.id}>
              <time>{fmtTimeShort(block.start)}</time><strong>{block.name}</strong><span>{block.dur}m</span>
            </div>)}
          </div>
          <small>Build it once. Coach from the same plan.</small>
        </section>
        <section className="l6-system-tagger" aria-label="Video Tagger preview">
          <img src="/tagger/tagger-game-frame.jpg" alt="Basketball game film inside Coach Tagger" />
          <span className="l6-system-film-scrim" aria-hidden="true" />
          <div className="l6-system-film-top"><span>02 · TAGGER</span><b>Review</b></div>
          <div className="l6-system-film-note"><strong>BALL SCREEN</strong><span>TEACH · NEXT PRACTICE</span></div>
          <div className="l6-system-film-clips" aria-label="Tagged teaching clips"><i /><i /><i /><i /></div>
        </section>
      </div>
      <div className="l6-system-bridge">
        <div>{['Plan','Coach','Tag','Improve'].map((label,index)=><span key={label}><b>{String(index+1).padStart(2,'0')}</b>{label}</span>)}</div>
        <p><strong>Team work stays synced.</strong> Film stays private until you choose to share it.</p>
      </div>
    </div>
  );
}

function V6_LandingSupport(){
  const items = [
    ['Staff-ready plans','Print, share, assign staff, and run practice from the same plan.'],
    ['Your coaching language','Keep drills, roster, vocabulary, notes, and film labels together.'],
    ['Evidence when needed','History, reports, and load data stay available without taking over the workflow.'],
    ['Ready courtside','Autosave, Undo, version history, and offline work protect the plan.'],
  ];
  return (
    <section className="l6-support" aria-labelledby="l6-support-title">
      <div className="l6-support-heading">
        <span>POWER WITHOUT THE CLUTTER</span>
        <h2 id="l6-support-title">The details are there when you need them.</h2>
        <p>Planner and Tagger stay simple at first glance. Deeper coaching tools appear in the context where they help.</p>
      </div>
      <div className="l6-support-grid">
        {items.map(([title,body],index)=><article key={title}><span>{String(index+1).padStart(2,'0')}</span><strong>{title}</strong><p>{body}</p></article>)}
      </div>
    </section>
  );
}

function V6_LandingFeature({ id, kicker, title, body, points, flip, art }){
  return (
    <section id={id} className="l6-feature" style={{ display:'grid', gap:48, alignItems:'center',
      padding:'72px clamp(20px, 5vw, 72px)', borderTop:`1px solid ${L6_HAIR}` }}>
      <div className="l6-feature-copy" style={{ order:flip ? 2 : 1 }}>
        <div style={{ fontSize:11, letterSpacing:'.15em', textTransform:'uppercase', color:L6_ACCENT,
          fontFamily:L6_MONO, fontWeight:700, marginBottom:14 }}>{kicker}</div>
        <div style={{ fontFamily: L6_SERIF, fontSize: 'clamp(26px, 3.2vw, 34px)', lineHeight: 1.15, color: L6_INK, letterSpacing:'-.01em' }}>{title}</div>
        <p style={{ fontFamily:L6_SANS, fontSize:15, lineHeight:1.65, color:L6_MUTED, marginTop:16, maxWidth:510 }}>{body}</p>
        <div style={{ display:'flex', flexDirection:'column', gap: 8, marginTop: 16 }}>
          {points.map((pt)=>(
            <div key={pt} style={{ display:'flex', gap:10, alignItems:'baseline', fontFamily:L6_SANS, fontSize:13.5, color:L6_MUTED }}>
              <span aria-hidden="true" style={{ color:L6_ACCENT, fontWeight:700 }}>—</span>{pt}
            </div>
          ))}
        </div>
      </div>
      <div className="l6-feature-art" style={{ order:flip ? 1 : 2 }}>{art}</div>
    </section>
  );
}

function V6_LandingTaggerArt(){
  return (
    <div style={{ background:'#17191d', color:'#e8e9ec', borderRadius: 16, padding: 14,
      boxShadow:'0 1px 0 rgba(255,255,255,.06), 0 28px 64px -28px rgba(22,17,14,.55)' }}>
      <div style={{ display:'flex', alignItems:'center', gap: 7, marginBottom: 10, fontFamily:L6_SANS, fontSize:10.5 }}>
        <b style={{ color:'#fff' }}>Coach Tagger</b><span style={{ flex:1 }} />
        {['Tag','Review','Build'].map((x,i)=><span key={x} style={{ padding:'4px 8px', borderRadius:6,
          background:i===0?'#4d82df':'rgba(255,255,255,.07)', color:i===0?'#fff':'#b7bbc2', fontWeight:700 }}>{x}</span>)}
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 150px', gap:10 }}>
        <div style={{ aspectRatio:'16/9', borderRadius:10, background:'#0b0d10', position:'relative', overflow:'hidden',
          boxShadow:'inset 0 0 0 1px rgba(255,255,255,.08)' }}>
          <img src="/tagger/tagger-game-frame.jpg" alt="" loading="lazy"
            style={{ width:'100%', height:'100%', objectFit:'cover', display:'block', opacity:.82 }} />
          <span aria-hidden="true" style={{ position:'absolute', inset:0, background:'rgba(0,0,0,.2)' }} />
          <span style={{ position:'absolute', left:10, bottom:10, padding:'4px 8px', borderRadius:5,
            background:'rgba(0,0,0,.62)', fontSize:10, fontWeight:700 }}>BALL SCREEN · TEACH</span>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:7 }}>
          {['OFFENSE','DEFENSE','TRANSITION'].map((x,i)=><div key={x} style={{ height:30, padding:'0 9px', borderRadius:7,
            display:'flex', alignItems:'center', justifyContent:'space-between', background:['#315e91','#8b6720','#6a3f76'][i],
            fontFamily:L6_SANS, fontSize:9.5, fontWeight:750 }}><span>{x}</span><span>{i+1}</span></div>)}
        </div>
      </div>
      <div style={{ height:34, marginTop:10, borderRadius:8, background:'rgba(255,255,255,.045)', position:'relative', overflow:'hidden' }}>
        {[8,21,38,53,72,86].map((x)=><span key={x} style={{ position:'absolute', left:`${x}%`, top:8, width:3, height:18,
          borderRadius:2, background:'#4d82df', opacity:.9 }} />)}
      </div>
    </div>
  );
}

function V6_LandingPricing(){
  // [label, free, coach, staff, proteam] — ladder v2 (Doc 03, answers refiled 2026-08-04)
  const rows = [
    ['Practice planning, autosave & history', true, true, true, true],
    ['Drill bank, film tagging & review', true, true, true, true],
    ['Roster, breakdowns & vocabulary', true, true, true, true],
    ['Print — all-details sheet', true, true, true, true],
    ['Teams', '1', '∞', '∞', '∞'],
    ['Clip & playlist downloads (MP4)', false, true, true, true],
    ['Vocabulary ⇄ video library sync', false, true, true, true],
    ['Custom categories', false, true, true, true],
    ['AI assistant (metered)', false, V6_COACH_AI_LIVE || 'soon', V6_COACH_AI_LIVE || 'soon', V6_COACH_AI_LIVE || 'soon'],
    ['Templates, imports & all print modes', false, true, true, true],
    ['Staff logins on one team', false, false, '3 + $20/seat', '∞'],
    ['White-label printing', false, false, true, true],
    ['Load data (Kinexon / Smartabase)', false, false, false, true],
    ['Dedicated onboarding & direct line', false, false, false, true],
  ];
  const cell = (v)=> v===true ? <span style={{ color:'#3d8a4f', fontWeight: 700 }}>✓</span>
    : v===false ? <span style={{ color:'rgba(22,17,14,.25)' }}>—</span>
    : v==='soon' ? <span style={{ fontSize: 9, fontWeight: 800, letterSpacing:'.06em', color:'#8a5f10', fontFamily: L6_SANS }}>SOON</span>
    : <span style={{ fontWeight: 700, fontFamily: L6_MONO, fontSize: 12 }}>{v}</span>;
  return (
    <div id="pricing" style={{ padding:'64px clamp(20px, 5vw, 56px) 72px', borderTop:'.5px solid rgba(22,17,14,.08)' }}>
      <div style={{ textAlign:'center', marginBottom: 36 }}>
        <div style={{ fontSize:11, letterSpacing:'.16em', textTransform:'uppercase', color:L6_ACCENT,
          fontFamily:L6_MONO, fontWeight:700, marginBottom:12 }}>Pricing · monthly or by the season, cancel anytime</div>
        <div style={{ fontFamily:L6_SERIF, fontSize:'clamp(28px, 3.6vw, 38px)', color:L6_INK }}>Start free. Grow when your staff does.</div>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(240px, 1fr))', gap: 18, maxWidth: 980, margin:'0 auto' }}>
        {V6_TIER_ORDER.map((k)=>{
          const t = V6_TIERS[k];
          const best = k === 'coach';
          return (
            <div key={k} style={{ background:L6_SURFACE, borderRadius: 16, padding:'26px 24px', position:'relative',
              boxShadow: best ? `0 0 0 2px ${L6_INK}, 0 24px 50px -24px rgba(22,17,14,.4)` : '0 0 0 .5px rgba(22,17,14,.12), 0 14px 34px -22px rgba(22,17,14,.3)' }}>
              {best && <div style={{ position:'absolute', top: -11, left:'50%', transform:'translateX(-50%)', background: L6_INK, color:L6_PAPER,
                fontFamily: L6_MONO, fontSize: 9.5, letterSpacing:'.12em', padding:'3px 12px', borderRadius: 999 }}>MOST COACHES</div>}
              <div style={{ fontFamily: L6_SANS, fontSize: 13, fontWeight: 800, letterSpacing:'.06em', textTransform:'uppercase', color:'rgba(22,17,14,.6)' }}>{t.label}</div>
              <div style={{ fontFamily: L6_SERIF, fontSize: t.contact ? 27 : 40, color: L6_INK, marginTop: t.contact ? 17 : 8, minHeight: t.contact ? 44 : undefined, display: t.contact ? 'flex' : undefined, alignItems: t.contact ? 'flex-end' : undefined }}>
                {t.price}<span style={{ fontSize: 14, fontFamily: L6_MONO, color:'rgba(22,17,14,.45)' }}> {t.per || ''}</span>
              </div>
              <div style={{ fontFamily: L6_MONO, fontSize: 11, color:'rgba(22,17,14,.5)', marginTop: 3, minHeight: 14 }}>{t.season ? `${t.season} — two months free` : ''}</div>
              <div style={{ fontFamily: L6_SANS, fontSize: 12, fontWeight: 700, color: L6_ACCENT, marginTop: 4, minHeight: 16 }}>{t.founding || ''}</div>
              <div style={{ fontFamily: L6_SANS, fontSize: 13, color:'rgba(22,17,14,.65)', marginTop: 6, minHeight: 34 }}>{t.blurb}</div>
              <a href={k === 'proteam'
                  ? 'mailto:timothyfanning@gmail.com?subject=' + encodeURIComponent('CLAP — Pro Team')
                  : 'app.html?signup=1'}
                style={{ display:'block', textAlign:'center', marginTop: 16, padding:'11px 0', borderRadius: 10, textDecoration:'none',
                fontFamily: L6_SANS, fontSize: 13.5, fontWeight: 700,
                background: best ? L6_ACCENT : 'transparent', color: best ? '#fff' : L6_INK,
                boxShadow: best ? 'none' : 'inset 0 0 0 1.5px rgba(22,17,14,.7)' }}>
                {k === 'free' ? 'Start free' : k === 'proteam' ? 'Talk to us' : `Get ${t.label}`}
              </a>
            </div>
          );
        })}
      </div>
      {/* compact matrix */}
      <div style={{ maxWidth:760, margin:'42px auto 0', fontFamily:L6_SANS, overflowX:'auto',
        WebkitOverflowScrolling:'touch' }} tabIndex="0" aria-label="Compare CLAP plans">
        <div style={{ display:'grid', gridTemplateColumns:'2fr .6fr .6fr .8fr .6fr', gap: 6, padding:'8px 12px',
          fontSize: 10, fontWeight: 800, letterSpacing:'.1em', textTransform:'uppercase', color:'rgba(22,17,14,.45)' }}>
          <div>What's included</div><div style={{ textAlign:'center' }}>Free</div><div style={{ textAlign:'center' }}>Coach</div><div style={{ textAlign:'center' }}>Staff</div><div style={{ textAlign:'center' }}>Pro Team</div>
        </div>
        {rows.map(([label, f, c, s, pt])=>(
          <div key={label} style={{ display:'grid', gridTemplateColumns:'2fr .6fr .6fr .8fr .6fr', gap: 6, padding:'9px 12px',
            borderTop:'.5px solid rgba(22,17,14,.08)', fontSize: 12.5, color:'rgba(22,17,14,.8)', alignItems:'center' }}>
            <div>{label}</div>
            {[f,c,s,pt].map((v,i)=><div key={i} style={{ textAlign:'center' }}>{cell(v)}</div>)}
          </div>
        ))}
      </div>
    </div>
  );
}

function V6_LandingPage(){
  // CLA flag 6b61f1ef — if the visitor already has an active Supabase session,
  // send them straight to the planner; not-signed-in visitors stay here and use
  // the Sign in / Start CTAs. `?stay=1` opts out (view marketing while signed in).
  // app.html is auth-gated but never redirects back here (signed-out → its own
  // login gate), so there's no redirect loop. replace() keeps it out of history.
  const { user, loading } = (typeof useClaSession === 'function') ? useClaSession() : { user: null, loading: false };
  React.useEffect(()=>{
    if (loading || !user || typeof window === 'undefined') return;
    try { if (new URLSearchParams(window.location.search).has('stay')) return; } catch(_){}
    window.location.replace('app.html');
  }, [loading, user]);
  return (
    <div style={{ minHeight:'100vh', background: L6_BG, color: L6_INK }} data-screen-label="Landing">
      <V6_LandingNav />
      {/* hero */}
      <section className="l6-hero-section" style={{ padding:'clamp(72px,8vw,116px) clamp(20px,6vw,88px) clamp(64px,8vw,104px)',
        background:L6_PAPER, borderBottom:`1px solid ${L6_HAIR}` }}>
        <div className="l6-hero-grid" style={{ display:'grid', gap:'clamp(48px,7vw,92px)', alignItems:'center', maxWidth:1320, margin:'0 auto' }}>
          <div>
            <div style={{ display:'flex', alignItems:'center', gap: 10, fontSize: 11, letterSpacing:'.16em', textTransform:'uppercase',
              color:L6_ACCENT, fontFamily:L6_MONO, fontWeight:720, marginBottom:22 }}>
              CLAP · PRACTICE PLANNER + VIDEO TAGGER
            </div>
            <h1 className="l6-display-hero" data-ux="landing-intentional-heading" style={{ fontFamily: L6_DISPLAY, fontSize:'clamp(50px, 6.6vw, 86px)', fontWeight:720,
              lineHeight:.94, letterSpacing:'-.06em', margin:0, maxWidth:760 }}>
              Be intentional with every practice.
            </h1>
            <p data-ux="landing-hero-promise" style={{ fontFamily: L6_SANS, fontSize:'clamp(16px,1.5vw,20px)', letterSpacing:'-.015em',
              lineHeight:1.5, color:L6_MUTED, marginTop:26, maxWidth:640 }}>
              <strong style={{ color:L6_INK, fontWeight:680 }}>Plan practice. Tag the film. Keep both connected.</strong>{' '}
              What you intended, what happened, and what comes next stay together in one easy coaching workspace.
            </p>
            <div style={{ display:'flex', gap: 12, marginTop: 26, flexWrap:'wrap' }}>
              <a className="cla-control" href="app.html?signup=1" data-ux="landing-start-free" style={{ minHeight:48, display:'inline-flex', alignItems:'center',
                background:L6_ACCENT, color:'#fff', borderRadius:11, padding:'0 22px',
                fontFamily:L6_SANS, fontSize:14, fontWeight:700, textDecoration:'none' }}>Start free</a>
              <a className="cla-control" href="#how" style={{ minHeight:48, display:'inline-flex', alignItems:'center',
                color:L6_INK, borderRadius:11, padding:'0 20px', fontFamily:L6_SANS, fontSize:14, fontWeight:620,
                textDecoration:'none', boxShadow:`inset 0 0 0 1px ${L6_HAIR}`, background:L6_SURFACE }}>See Planner + Tagger</a>
            </div>
            <div className="l6-proof-row" style={{ display:'flex', gap:26, marginTop:34, fontFamily:L6_MONO,
              fontSize:10.5, color:L6_MUTED, flexWrap:'wrap' }}>
              <span><b style={{ color:L6_INK }}>Planner + Tagger, connected</b></span>
              <span><b style={{ color:L6_INK }}>Online or offline</b></span>
              <span><b style={{ color:L6_INK }}>AI proposes. You decide.</b></span>
            </div>
          </div>
          <div className="l6-hero-art">
            <div style={{ margin:'0 0 12px', display:'flex', justifyContent:'space-between', alignItems:'center',
              color:L6_MUTED, fontFamily:L6_MONO, fontSize:9.5, letterSpacing:'.08em' }}>
              <span>THE COMPLETE COACHING LOOP</span><span style={{ color:L6_ACCENT }}>ONE WORKSPACE</span>
            </div>
            <V6_LandingSystemArt />
            <p className="l6-ai-caption" data-ux="landing-ai-boundary" style={{ margin:'12px 2px 0', color:L6_MUTED, fontFamily:L6_SANS,
              fontSize:11.5, lineHeight:1.45 }}><strong style={{ color:L6_INK }}>AI Coach can help connect the plan to the film.</strong>{' '}
              It proposes from your work; nothing changes until you approve it.</p>
          </div>
        </div>
      </section>

      <section id="how" className="l6-intent-strip" aria-labelledby="l6-how-title">
        <div>
          <p>ONE CONNECTED WORKFLOW</p>
          <h2 id="l6-how-title">Planner and Tagger work as one coaching loop.</h2>
        </div>
        {[['01','Plan + coach together','Build the practice, share it with staff, and use the same plan courtside.'],
          ['02','Tag + review film','Capture teaching moments, organize clips, and present them without leaving CLAP.'],
          ['03','Improve what comes next','Carry the evidence into the next practice; AI may propose, but the coach decides.']].map(([n,title,body])=>(
          <article key={n}><span>{n}</span><strong>{title}</strong><p>{body}</p></article>
        ))}
      </section>

      <V6_LandingFeature id="planner" kicker="CLAP — CLA Planner" flip={false}
        title={<span>Design the practice you <em>intend to coach</em>.</span>}
        body="Build the sequence, timing, constraints, staff roles, and teaching detail in one calm workspace. CLAP keeps the plan useful courtside—not just tidy on a screen."
        points={[ 'Team-scoped drill bank with usage history', 'Concurrent groups — 2 to 6, same or different drills', 'Undo, version history and autosave on every practice' ]}
        art={<V6_LandingRibbon />} />
      <V6_LandingFeature id="tagger" kicker="Coach Tagger" flip
        title={<span>Connect the film <em>to the plan</em>.</span>}
        body="Keep the video large, tag at coaching speed, and turn moments into teaching clips. Review what happened, build reusable workflows, and carry the evidence back into the next practice."
        points={[ 'Distinct Tag, Review, Build, and Present workspaces', 'Keyboard-first tagging with visible, editable hotkeys', 'AI-assisted proposals that save only after coach approval' ]}
        art={<V6_LandingTaggerArt />} />
      <V6_LandingSupport />

      <V6_LandingPricing />

      <div style={{ padding:'26px clamp(20px, 5vw, 56px)', borderTop:'.5px solid rgba(22,17,14,.1)', display:'flex',
        justifyContent:'space-between', alignItems:'center', fontFamily: L6_MONO, fontSize: 11, color:'rgba(22,17,14,.5)', flexWrap:'wrap', gap: 10 }}>
        <span title={typeof v6VersionTitle === 'function' ? v6VersionTitle() : ''}>© 2026 CLAP · CLAP + Coach Tagger · {typeof V6_VERSION !== 'undefined' ? V6_VERSION : 'v6'}</span>
        <span style={{ display:'flex', gap: 18 }}>
          <a href="app.html" style={{ color:'inherit' }}>CLAP</a>
          <a href="/tagger/" style={{ color:'inherit' }}>Coach Tagger</a>
          <a href="/design-system/" style={{ color:'inherit' }}>Visual Standard</a>
        </span>
      </div>
    </div>
  );
}

Object.assign(window, { V6_LandingPage });