// Caret landing — hero: spirit mesh, headline, CTAs, and the animated keyboard-flow stage.

const HERO_SUMMARY = ['Steady','growth','across','regions.','EMEA','beat','projections','by','12%;','APAC','held','flat.'];
const HERO_SUMMARY_STR = HERO_SUMMARY.join(' ');
const HERO_SELECTED = 'The quarterly report shows steady growth across all regions, with EMEA outperforming projections by twelve percent while APAC stayed flat against a strong prior year.';

const HERO_INIT = { visible: false, query: '', showCursor: false, mode: 'list', activeAlias: null, result: '', streaming: false, keyflash: null, replaced: false };
const HERO_STATIC = { visible: true, query: 'ss', showCursor: false, mode: 'result', activeAlias: 'ss', result: HERO_SUMMARY_STR, streaming: false, keyflash: null, replaced: true };

const HERO_EVENTS = [
  { t: 500,  patch: { keyflash: 'summon' } },
  { t: 720,  patch: { visible: true } },
  { t: 760,  patch: { showCursor: true } },
  { t: 1150, patch: { keyflash: null } },
  { t: 1500, patch: { query: 's', keyflash: 'type' } },
  { t: 1660, patch: { query: 'ss', activeAlias: 'ss' } },
  { t: 1980, patch: { keyflash: null } },
  { t: 2300, patch: { keyflash: 'run' } },
  { t: 2470, patch: { mode: 'result', streaming: true, showCursor: false, result: '' } },
  ...streamEvents(HERO_SUMMARY, 2600, 115),
  { t: 2920, patch: { keyflash: null } },
  { t: 4250, patch: { streaming: false } },
  { t: 4950, patch: { keyflash: 'replace' } },
  { t: 5150, patch: { replaced: true } },
  { t: 5600, patch: { visible: false, keyflash: null } },
];
const HERO_LOOP = 6700;

const FLASHES = {
  summon:  { keys: ['⌥', 'Space'], label: 'Summon Caret' },
  type:    { keys: ['s', 's'],     label: 'Type the alias' },
  run:     { keys: ['↩'],          label: 'Run' },
  replace: { keys: ['⌘', '⇧', '↩'], label: 'Replace selection' },
};

function KeyFlash({ flash }) {
  const f = flash && FLASHES[flash];
  return (
    <div style={{ position: 'absolute', left: '50%', bottom: -22, transform: 'translateX(-50%)',
      pointerEvents: 'none', zIndex: 5,
      opacity: f ? 1 : 0, transition: 'opacity .18s var(--ease-out), transform .18s var(--ease-spring)',
      transform: `translateX(-50%) scale(${f ? 1 : 0.9})` }}>
      {f && (
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '9px 14px', borderRadius: 999,
          background: 'rgba(20,22,30,0.82)', WebkitBackdropFilter: 'blur(18px)', backdropFilter: 'blur(18px)',
          border: '1px solid rgba(255,255,255,0.14)', boxShadow: '0 12px 34px rgba(8,12,26,0.4)' }}>
          <Combo keys={f.keys} dark />
          <span style={{ color: 'rgba(255,255,255,0.78)', fontSize: 13, fontWeight: 500 }}>{f.label}</span>
        </div>
      )}
    </div>
  );
}

// the document "behind" the panel — the app you're working in
function HeroDoc({ replaced }) {
  return (
    <div className="doc-bg" style={{ width: '100%' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
        <div style={{ width: 26, height: 26, borderRadius: '50%', background: 'linear-gradient(145deg,#2DB7F5,#1F6BFF)' }} />
        <div style={{ flex: 1 }}>
          <div className="doc-line" style={{ width: '34%', height: 8, margin: '3px 0' }} />
          <div className="doc-line" style={{ width: '22%', height: 7, margin: '3px 0', background: 'var(--fill-3)' }} />
        </div>
        <Icon name="reply" size={16} color="var(--fg4)" />
      </div>
      <div className="doc-line" style={{ width: '92%' }} />
      <div className="doc-line" style={{ width: '74%' }} />
      <p style={{ fontSize: 14.5, lineHeight: 1.6, color: replaced ? 'var(--fg1)' : 'var(--fg2)', margin: '14px 0',
        fontWeight: replaced ? 600 : 400, transition: 'all .3s var(--ease-out)' }}>
        <span className={replaced ? '' : 'doc-sel'} style={{ padding: replaced ? 0 : '1px 3px' }}>
          {replaced ? HERO_SUMMARY_STR : HERO_SELECTED}
        </span>
      </p>
      <div className="doc-line" style={{ width: '88%' }} />
      <div className="doc-line" style={{ width: '60%' }} />
    </div>
  );
}

function Hero({ headline, reduced }) {

  return (
    <header id="top" className="mesh" style={{ paddingTop: 150, paddingBottom: 130, marginTop: -62, overflow: 'hidden' }}>
      <div className="wrap" style={{ textAlign: 'center', position: 'relative', zIndex: 2 }}>
        <div className="rise" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '6px 8px 6px 14px', borderRadius: 999,
          background: 'rgba(255,255,255,0.16)', border: '1px solid rgba(255,255,255,0.30)',
          WebkitBackdropFilter: 'blur(10px)', backdropFilter: 'blur(10px)', color: '#fff', fontSize: 13.5, fontWeight: 600 }}>
          <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#5BE49B', boxShadow: '0 0 8px #5BE49B' }} />
          Your keyboard companion for macOS
        </div>
        <h1 className="rise" style={{ fontSize: 'clamp(40px, 6.2vw, 76px)', fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1.02,
          color: '#fff', margin: '24px auto 0', maxWidth: 900, textShadow: '0 2px 30px rgba(0,0,0,0.16)' }}>
          {headline}
        </h1>
        <p className="rise" style={{ fontSize: 'clamp(17px, 2vw, 21px)', lineHeight: 1.5, color: 'rgba(255,255,255,0.92)', maxWidth: 620, margin: '22px auto 0', fontWeight: 450 }}>
          Launch apps, find files, reuse your clipboard, and expand snippets. When you need AI, run an action on your selection and put the result back where you’re working.
        </p>
        <div className="rise" style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 32, flexWrap: 'wrap' }}>
          <a className="btn btn-light" href="https://github.com/arjmandi/caret-releases/releases/latest/download/Caret.dmg"><Icon name="arrow-down-to-line" size={18} color="var(--accent)" /> Download for macOS</a>
          <a className="btn btn-glass-d" href="#actions">Explore the action library →</a>
        </div>
        <div className="rise" style={{ marginTop: 18, fontSize: 13.5, color: 'rgba(255,255,255,0.72)', fontFamily: 'var(--font-mono)', letterSpacing: '0.01em' }}>
          macOS 14 or later · Apple Silicon and Intel · Bring your own AI provider
        </div>
      </div>

      <div className="wrap rise hero-capture">
        <ProductShot file="command-bar-hero.png" alt="Caret command bar with Quick, Writing, Code, Vision, Translate, Apps, Files and Clipboard tabs" eager />
        <p>Apps · Files · Clipboard · Snippets · AI actions</p>
      </div>
    </header>
  );
}
Object.assign(window, { Hero });