/* Cave Recorder — public landing page for the desktop meeting recorder.

   Layout mirrors page-pricing.jsx / page-other.jsx: a stack of section
   components composed into one Page function. Uses StampBadge + Underline
   from page-home.jsx and the global Header / Footer / CTABand from shared.jsx.

   White-label honor: the entire page reads from CR.brandName() so the few
   visible "Cave Recorder" labels can be re-pointed by a tenant subdomain
   without rewriting every section. Default stays "Cave Recorder". Marketing
   site itself runs on a single domain (mammoth-dev.com) — the real branding
   override happens on the portal side via useBrand. This hook is the
   marketing-site mirror so the messaging stays consistent when an agency
   reskins their portal. See cave-white-label initiative.
*/

const CR = {
  // Default product name; can be overridden at runtime if needed for tenant
  // preview. Kept simple — no fetch, no async — because this page is served
  // from Cloudflare Pages as static HTML+JSX and the override happens upstream
  // on the portal CTA.
  brandName: () => (typeof window !== 'undefined' && window.CAVE_RECORDER_NAME) || 'Cave Recorder',
  // Sends visitors to the in-portal Desktop Apps hub (auth-gated download),
  // not a raw GitHub release. A tenant can still override via the global.
  dmgUrl: () => (typeof window !== 'undefined' && window.CAVE_RECORDER_DMG_URL) || 'https://app.mammoth-dev.com/desktop-apps',
  ghUrl: () => 'https://github.com/dsdfsdf1/mcp-router',
};

function RecorderHero() {
  const name = CR.brandName();
  return (
    <section className="m-section" style={{paddingTop:56, paddingBottom:40}}>
      <div className="m-container">
        <div style={{display:'grid', gridTemplateColumns:'1.05fr 1fr', gap:48, alignItems:'center'}}>
          <div>
            <StampBadge color="var(--russet)">
              <span style={{width:6, height:6, borderRadius:'50%', background:'#E85B45'}}/> New · for Mac
            </StampBadge>
            <h1 style={{marginTop:20, marginBottom:20, textWrap:'balance', fontSize:'clamp(2.2rem, 4.2vw, 3.6rem)'}}>
              Record meetings <Underline>on-device.</Underline><br/>
              Privacy-first. <em style={{fontStyle:'normal', color:'var(--russet)'}}>Cave-integrated.</em>
            </h1>
            <p className="lead" style={{marginBottom:24, maxWidth:560}}>
              {name} captures your calls, transcribes them locally with Whisper,
              diarizes speakers, and gives you a floating AskCave chat that can
              call your CRM and email <strong style={{color:'var(--charcoal)'}}>during the conversation</strong>.
              No cloud transcription. Not by default.
            </p>
            <div className="m-row" style={{gap:12, marginBottom:20}}>
              <a href={CR.dmgUrl()} className="m-btn m-btn-russet m-btn-lg">
                {Ico.download(18,'currentColor')} Get it in the Cave portal
              </a>
              <a href={CR.ghUrl()} target="_blank" rel="noopener" className="m-btn m-btn-ghost m-btn-lg">
                View on GitHub {Ico.arrow(16,'currentColor')}
              </a>
            </div>
            <div style={{display:'flex', gap:20, flexWrap:'wrap', fontSize:13, color:'var(--charcoal-soft)', alignItems:'center'}}>
              <span style={{display:'inline-flex', alignItems:'center', gap:6}}>{Ico.check(14,'var(--teal)')} macOS 13+</span>
              <span style={{display:'inline-flex', alignItems:'center', gap:6}}>{Ico.check(14,'var(--teal)')} Apple Silicon &amp; Intel</span>
              <span style={{display:'inline-flex', alignItems:'center', gap:6}}>{Ico.check(14,'var(--teal)')} Free during alpha</span>
            </div>
          </div>
          <div>
            <img
              src="/cave-recorder/hero-mockup.svg"
              alt={`${name} menubar app with floating AskCave chat`}
              style={{width:'100%', height:'auto', borderRadius:18, border:'1.5px solid var(--mist-2)', background:'var(--white)'}}
            />
            <div style={{textAlign:'center', marginTop:10, fontSize:12, color:'var(--charcoal-soft)', fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.08em'}}>
              placeholder mockup · real screenshot ships post-alpha
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function RecorderDemo() {
  const name = CR.brandName();
  const frames = [
    { src: '/cave-recorder/frame-1-record.svg', alt: 'Hit record', step: 'Record', body: 'One click. Mic + system audio captured locally.' },
    { src: '/cave-recorder/frame-2-transcript.svg', alt: 'Live transcript', step: 'Transcribe', body: 'Live partials stream in with speaker labels.' },
    { src: '/cave-recorder/frame-3-askcave.svg', alt: 'AskCave', step: 'Act', body: '⌘⇧K opens AskCave — it can call your CRM mid-call.' },
  ];
  return (
    <section className="m-section m-section-alt">
      <div className="m-container">
        <div style={{textAlign:'center', marginBottom:36, maxWidth:720, margin:'0 auto 36px'}}>
          <StampBadge color="var(--teal)">Watch the loop · 8 seconds</StampBadge>
          <h2 style={{marginTop:16, marginBottom:8}}>From "record" to "what did Jesse say?" — without leaving the call.</h2>
          <p className="lead">{name} runs in the menubar. Live transcript on one side, AskCave on the other. The chat can call any MCP tool you've connected.</p>
        </div>
        <div className="m-grid m-grid-3" style={{gap:20}}>
          {frames.map((f, i) => (
            <div key={i} className="m-card" style={{padding:0, overflow:'hidden'}}>
              <img src={f.src} alt={f.alt} style={{width:'100%', height:'auto', display:'block', background:'#FAF6F0'}}/>
              <div style={{padding:'20px 24px'}}>
                <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'var(--russet)', letterSpacing:'0.12em', textTransform:'uppercase', marginBottom:6}}>Step {i+1} · {f.step}</div>
                <p style={{margin:0, fontSize:15}}>{f.body}</p>
              </div>
            </div>
          ))}
        </div>
        <p style={{textAlign:'center', marginTop:20, fontSize:13, color:'var(--charcoal-soft)', fontStyle:'italic'}}>
          Frames above are placeholders. The real 8-second loop ships when the first signed build does.
        </p>
      </div>
    </section>
  );
}

function RecorderComparison() {
  const name = CR.brandName();
  // Pricing verified May 2026: Fireflies $18-29/mo monthly billing,
  // $10-19/mo annual; Granola Business $14/mo, Enterprise $35/mo.
  // We use the widest defensible band for each so the table doesn't go
  // stale the moment either vendor moves a SKU.
  const rows = [
    { feature: 'On-device speech-to-text (privacy)',     cave: true,  ff: false, gr: false },
    { feature: 'MCP tool access during the call',        cave: true,  ff: false, gr: false },
    { feature: 'Auto-time-logs to client / project',     cave: true,  ff: false, gr: false },
    { feature: 'Speaker diarization',                    cave: true,  ff: true,  gr: true  },
    { feature: 'Auto-detect Zoom / Teams / Meet',        cave: true,  ff: true,  gr: true  },
    { feature: 'Cross-platform (Win / Linux)',           cave: 'Mac only',  ff: true,  gr: 'Mac only' },
    { feature: 'Per-seat pricing',                       cave: 'Bundled in cave',  ff: '$10–29/user/mo*', gr: '$14–35/user/mo*' },
  ];
  const renderCell = (v, highlight = false) => {
    if (v === true) return <span style={{display:'inline-flex', color:'var(--teal)'}}>{Ico.check(18,'var(--teal)')}</span>;
    if (v === false) return <span style={{display:'inline-flex', color:'#B85C3C'}}>{Ico.x(18)}</span>;
    return <span style={{fontFamily:'JetBrains Mono, monospace', fontSize:13, color: highlight ? 'var(--charcoal)' : 'var(--charcoal-soft)', fontWeight: highlight ? 600 : 400}}>{v}</span>;
  };
  return (
    <section className="m-section">
      <div className="m-container">
        <div style={{textAlign:'center', marginBottom:36, maxWidth:780, margin:'0 auto 36px'}}>
          <StampBadge>The honest comparison</StampBadge>
          <h2 style={{marginTop:16, marginBottom:8}}>{name} vs Fireflies vs Granola</h2>
          <p className="lead">The three desktop recorders worth comparing. {name} is the only one that does the transcription locally <em>and</em> can act on your tools while the call is happening.</p>
        </div>
        <div style={{background:'var(--white)', borderRadius:20, border:'1.5px solid var(--mist-2)', overflow:'hidden', maxWidth:920, margin:'0 auto'}}>
          <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr', background:'var(--cream-2)', padding:'16px 24px', borderBottom:'1.5px solid var(--mist-2)'}}>
            <div></div>
            <div style={{textAlign:'center', fontFamily:'var(--font-head)', fontWeight:800, fontSize:14, color:'var(--russet)'}}>{name}</div>
            <div style={{textAlign:'center', fontFamily:'var(--font-head)', fontWeight:700, fontSize:14, color:'var(--charcoal-soft)'}}>Fireflies</div>
            <div style={{textAlign:'center', fontFamily:'var(--font-head)', fontWeight:700, fontSize:14, color:'var(--charcoal-soft)'}}>Granola</div>
          </div>
          {rows.map((r, i) => (
            <div key={i} style={{display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr', padding:'14px 24px', borderBottom: i<rows.length-1 ? '1px solid var(--mist)' : 'none', alignItems:'center'}}>
              <div style={{fontSize:15}}>{r.feature}</div>
              <div style={{textAlign:'center', background:'rgba(212,162,74,0.10)', borderRadius:8, padding:'8px 4px'}}>{renderCell(r.cave, true)}</div>
              <div style={{textAlign:'center'}}>{renderCell(r.ff)}</div>
              <div style={{textAlign:'center'}}>{renderCell(r.gr)}</div>
            </div>
          ))}
        </div>
        <p style={{textAlign:'center', marginTop:16, fontSize:12, color:'var(--charcoal-soft)', fontStyle:'italic', maxWidth:780, margin:'16px auto 0'}}>
          *Competitor pricing verified May 2026 from fireflies.ai/pricing and granola.ai/pricing. Fireflies Pro $18/mo + Business $29/mo (monthly billing); Granola Business $14/mo + Enterprise $35/mo. {name} during alpha is bundled with your cave subscription at no extra per-seat cost — usage metered, real pricing locked once alpha data lands.
        </p>
      </div>
    </section>
  );
}

function RecorderFeatures() {
  const features = [
    {
      icon: 'shield', tint: 'var(--teal)', title: 'On-device Whisper transcription',
      body: 'Whisper.cpp runs locally on your Mac. Audio never leaves the machine unless you opt in to upload it for re-summary. Privacy that actually means privacy — no enterprise checkbox required.',
    },
    {
      icon: 'person', tint: 'var(--russet)', title: 'Speaker diarization',
      body: 'pyannote.audio labels who said what. Three-person call shows Speaker 1, Speaker 2, Speaker 3 — and the labels can be renamed from your calendar attendees, automatically.',
    },
    {
      icon: 'chat', tint: 'var(--gold-deep)', title: 'Floating AskCave chat (⌘⇧K)',
      body: 'Always-on-top window. Ask anything mid-call. AskCave has full MCP tool access — your CRM, email, brain DB, recordings, Google Calendar. "Pull up his deal" works. So does "create a follow-up task."',
    },
    {
      icon: 'cal', tint: 'var(--charcoal)', title: 'Auto-detect Zoom / Teams / Meet',
      body: 'macOS process watcher knows when you join a meeting. Calendar awareness pulls the title and attendees from Google Calendar one minute before the event starts.',
    },
  ];
  return (
    <section className="m-section m-section-alt">
      <div className="m-container">
        <div style={{textAlign:'center', marginBottom:48}}>
          <StampBadge>What it does</StampBadge>
          <h2 style={{marginTop:16}}>Four things, done well.</h2>
        </div>
        <div className="m-grid m-grid-2" style={{gap:24}}>
          {features.map((f, i) => (
            <div key={i} className="m-card m-card-lift" style={{display:'flex', gap:20, alignItems:'flex-start'}}>
              <div style={{width:56, height:56, borderRadius:14, background:'var(--cream-2)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                {Ico[f.icon](28, f.tint)}
              </div>
              <div>
                <h3 style={{marginBottom:8, fontSize:20}}>{f.title}</h3>
                <p style={{margin:0}}>{f.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function RecorderHowItPlugsIn() {
  const name = CR.brandName();
  return (
    <section className="m-section">
      <div className="m-container" style={{maxWidth:880}}>
        <div style={{textAlign:'center', marginBottom:32}}>
          <StampBadge color="var(--teal)">If you already use cave</StampBadge>
          <h2 style={{marginTop:16, marginBottom:8}}>Plugged into the tools you already connected.</h2>
          <p className="lead" style={{marginTop:0}}>Every recording becomes searchable through the same brain that powers your other skills. Auto-time-logs land in the right client folder. AskCave's tool list is whatever you have wired today.</p>
        </div>
        <div className="m-card" style={{padding:32, background:'var(--cream-2)', display:'grid', gridTemplateColumns:'1fr 1fr', gap:32, alignItems:'center'}}>
          <ul className="m-checklist">
            {[
              `${name} → brain DB transcripts (FTS-searchable)`,
              'AskCave → any MCP tool on your account',
              'time_logs auto-created, tagged by client',
              'R2 audio storage with presigned playback',
              'Stripe billing — usage metered per minute',
            ].map((it, i) => (
              <li key={i} style={{fontSize:15}}>
                <span className="m-check">{Ico.check(12, 'white')}</span>
                <span>{it}</span>
              </li>
            ))}
          </ul>
          <div style={{textAlign:'center'}}>
            <div style={{fontFamily:'var(--font-head)', fontWeight:800, fontSize:48, color:'var(--russet)', lineHeight:1}}>$0/min</div>
            <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'var(--charcoal-soft)', letterSpacing:'0.12em', textTransform:'uppercase', marginTop:8}}>during alpha</div>
            <p style={{fontSize:14, marginTop:16}}>Real per-minute pricing lands once we have a quarter of usage data. Spend caps live from day one.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function RecorderCTAFooter() {
  const name = CR.brandName();
  return (
    <section className="m-section m-section-russet">
      <div className="m-container" style={{textAlign:'center', maxWidth:720}}>
        <StampBadge color="var(--gold)">Get the build</StampBadge>
        <h2 style={{marginTop:16, color:'var(--cream)'}}>Ready to try {name}?</h2>
        <p style={{color:'rgba(255,253,249,0.85)', fontSize:18, marginBottom:28}}>
          Alpha build. Mac only. Free while we collect usage data.
        </p>
        <div className="m-row" style={{justifyContent:'center', gap:14}}>
          <a href={CR.dmgUrl()} className="m-btn m-btn-gold m-btn-lg">
            {Ico.download(18,'currentColor')} Get it in the Cave portal
          </a>
          <a href={CR.ghUrl()} target="_blank" rel="noopener" className="m-btn m-btn-ghost m-btn-lg" style={{borderColor:'var(--cream)', color:'var(--cream)'}}>
            View on GitHub {Ico.arrow(16,'currentColor')}
          </a>
        </div>
        <p style={{marginTop:18, fontSize:13, color:'rgba(255,253,249,0.7)', fontStyle:'italic'}}>
          Final .dmg URL points at the GitHub release page placeholder until PR 9 ships the first signed build.
        </p>
      </div>
    </section>
  );
}

function FeaturesCaveRecorderPage() {
  return (
    <div className="m-root">
      <Header current="" />
      <RecorderHero />
      <RecorderDemo />
      <RecorderComparison />
      <RecorderFeatures />
      <RecorderHowItPlugsIn />
      <RecorderCTAFooter />
      <Footer />
    </div>
  );
}

Object.assign(window, { FeaturesCaveRecorderPage });