/* ReportPreview — the premium dark dashboard (the visual star).
   + ComparisonTeaser ("you vs them"). Findings carry the "so what"
   AND "here's what to do". CircadiaZen sample, clearly labelled. */

const FINDINGS = [
{
  sev: 'crit', tag: 'INDEXING',
  title: 'Your best-selling product page is hidden from AI',
  so: 'A “do-not-read” tag was left on the Deep Sleep page by mistake. AI answer engines skip it entirely — so when someone asks for a sleep supplement, your flagship product can’t even be considered.',
  fix: 'Remove the blocking tag on /products/deep-sleep.'
},
{
  sev: 'crit', tag: 'PROOF',
  title: 'The clinical research, your strongest proof, is invisible',
  so: 'Your science page is the reason buyers trust you. AI can’t read it, so it never cites your clinical backing when comparing brands. Your biggest advantage counts for nothing.',
  fix: 'Make the research, citations, and advisory board readable as plain text, not script-only.'
},
{
  sev: 'warn', tag: 'COVERAGE',
  title: 'Buyers ask ~80 questions. Your site answers a handful',
  so: 'People ask AI things like “is magnesium glycinate safe long-term?” before they buy. If your site doesn’t answer it in plain language, AI answers from someone else and recommends them.',
  fix: 'Publish clear answers to the top buyer questions in your category. We hand you the list.'
},
{
  sev: 'warn', tag: 'COMPARISON',
  title: 'When buyers ask “Thorne vs. CircadiaZen,” AI has nothing to cite',
  so: 'No page compares you to your top competitor. So when a buyer asks AI to compare, your competitor controls the narrative.',
  fix: 'Create a comparison page. Give AI the facts so it represents you fairly.'
},
{
  sev: 'good', tag: "WHAT'S WORKING",
  title: 'You have credible material to build on',
  so: 'Named founders, excellent press, and an active blog are what AI rewards. Your credibility exists, but it’s not in a form AI can read yet.',
  fix: 'Good news: the fix is to make what you already have visible, not create it from scratch.'
}];


const SEV_LABEL = { crit: 'Critical', warn: 'Needs work', good: 'Working' };
const repStyles = {
  panel: {
    background: 'radial-gradient(130% 100% at 100% 0%, #131d38 0%, #0b1124 60%)',
    border: '1px solid var(--line-strong)', borderRadius: 'var(--r-2xl)',
    boxShadow: 'var(--sh-float)', overflow: 'hidden', color: 'var(--fg)'
  },
  head: { padding: 'clamp(18px,2.4vw,30px)', borderBottom: '1px solid var(--line)' },
  row: {
    display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 'clamp(14px,1.6vw,20px)',
    padding: 'clamp(16px,2vw,22px) clamp(18px,2.4vw,30px)', borderTop: '1px solid var(--line)'
  }
};

function ScoreRing({ value = 38 }) {
  const r = 30,c = 2 * Math.PI * r,off = c * (1 - value / 100);
  return (
    <div style={{ position: 'relative', width: 76, height: 76, flex: '0 0 auto' }}>
      <svg width="76" height="76" viewBox="0 0 76 76">
        <circle cx="38" cy="38" r={r} fill="none" stroke="var(--line-strong)" strokeWidth="6" />
        <circle cx="38" cy="38" r={r} fill="none" stroke="var(--crit)" strokeWidth="6" strokeLinecap="round"
        strokeDasharray={c} strokeDashoffset={off} transform="rotate(-90 38 38)" />
      </svg>
      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 700, lineHeight: 1 }}>{value}</span>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 8.5, color: 'var(--fg-subtle)', letterSpacing: '0.1em' }}>/ 100</span>
      </div>
    </div>);

}

function SevDot({ sev }) {
  const col = `var(--${sev})`;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, paddingTop: 3 }}>
      <span style={{ width: 12, height: 12, borderRadius: '50%', background: col, boxShadow: `0 0 12px ${col}` }}></span>
      <span style={{ writingMode: 'vertical-rl', fontFamily: 'var(--font-mono)', fontSize: 8.5,
        letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-subtle)' }}>{SEV_LABEL[sev]}</span>
    </div>);

}

function ReportPreview() {
  const counts = FINDINGS.reduce((a, f) => (a[f.sev]++, a), { crit: 0, warn: 0, good: 0 });
  return (
    <div style={repStyles.panel} className="scroll-thin">
      {/* header */}
      <div style={repStyles.head}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 14 }}>
          <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
            <ScoreRing value={38} />
            <div>
              <div className="overline" style={{ marginBottom: 6 }}>AI Visibility Report</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(22px,2.4vw,30px)', fontWeight: 600, lineHeight: 1.05 }}>CircadiaZen</div>
              <div className="mono" style={{ fontSize: 12, color: 'var(--fg-subtle)', marginTop: 5 }}>circadiazen.com · analyzed Jun 3, 2026</div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <span className="chip" style={{ borderColor: 'var(--crit)', color: 'var(--crit)' }}><span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--crit)' }}></span>{counts.crit} critical</span>
            <span className="chip" style={{ borderColor: 'var(--warn)', color: 'var(--warn)' }}><span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--warn)' }}></span>{counts.warn} to fix</span>
          </div>
        </div>
        <div style={{ marginTop: 16, fontSize: 14.5, color: 'var(--fg-muted)', lineHeight: 1.55, maxWidth: 640 }}>Strong brand, largely invisible to AI. Here’s what we recommend. 

        </div>
      </div>

      {/* findings */}
      {FINDINGS.map((f, i) =>
      <div key={i} style={repStyles.row}>
          <SevDot sev={f.sev} />
          <div style={{ minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', marginBottom: 7 }}>
              <span className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--fg-subtle)',
              border: '1px solid var(--line)', padding: '2px 7px', borderRadius: 5 }}>{f.tag}</span>
              <h4 style={{ margin: 0, fontFamily: 'var(--font-sans)', fontSize: 'clamp(15px,1.6vw,17px)', fontWeight: 600, color: 'var(--fg)', lineHeight: 1.25 }}>{f.title}</h4>
            </div>
            <p style={{ margin: '0 0 10px', fontSize: 14, color: 'var(--fg-muted)', lineHeight: 1.55 }}>{f.so}</p>
            <div style={{ display: 'flex', gap: 9, alignItems: 'flex-start', background: `var(--${f.sev}-bg)`,
            border: '1px solid color-mix(in oklab, var(--' + f.sev + ') 28%, transparent)', borderRadius: 'var(--r-md)', padding: '9px 12px' }}>
              <span style={{ flex: '0 0 auto', marginTop: 1, color: `var(--${f.sev})` }}>
                <Icon name={f.sev === 'good' ? 'check' : 'zap'} size={15} stroke={2.2} />
              </span>
              <div style={{ fontSize: 13.5, color: 'var(--fg)', lineHeight: 1.5 }}>
                <b style={{ color: `var(--${f.sev})`, fontWeight: 600 }}>{f.sev === 'good' ? 'Build on it: ' : 'The fix: '}</b>{f.fix}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* footer */}
      <div style={{ padding: 'clamp(14px,1.8vw,20px) clamp(18px,2.4vw,30px)', borderTop: '1px solid var(--line)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
        <span className="mono" style={{ fontSize: 11, color: 'var(--fg-subtle)' }}>+ 6 more findings in the full analysis</span>
        <span className="mono" style={{ fontSize: 11, color: 'var(--fg-subtle)' }}> </span>
      </div>
    </div>);

}

// ---------------- Comparison teaser ----------------
const COMPETITORS = [
{ name: 'Momentous', pct: 90, you: false },
{ name: 'Thorne', pct: 70, you: false },
{ name: 'Pendulum', pct: 50, you: false },
{ name: 'CircadiaZen', pct: 20, you: true }];

function ComparisonTeaser() {
  return (
    <div className="card" style={{ padding: 'clamp(22px,3vw,40px)', maxWidth: 760, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16, flexWrap: 'wrap' }}>
        <span style={{ color: 'var(--accent)' }}><Icon name="bot" size={20} /></span>
        <span className="mono" style={{ fontSize: 13, color: 'var(--fg-muted)' }}>Buyer asks an AI assistant:</span>
      </div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(20px,2.6vw,28px)', fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.2, marginBottom: 22 }}>
        “What’s the best science-backed sleep supplement?”
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
        {COMPETITORS.map((c) =>
        <div key={c.name} style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 128px) minmax(0, 1fr) auto', alignItems: 'center', gap: 14 }}>
            <span style={{ fontSize: 14.5, fontWeight: c.you ? 700 : 500, color: c.you ? 'var(--accent)' : 'var(--fg)' }}>{c.name}{c.you && ' (you)'}</span>
            <div style={{ height: 10, borderRadius: 999, background: 'var(--line)', overflow: 'hidden' }}>
              <div style={{ width: `${c.pct}%`, height: '100%', borderRadius: 999,
              background: c.you ? 'var(--crit)' : 'linear-gradient(90deg, var(--accent-deep), var(--accent))' }}></div>
            </div>
            <span className="mono" style={{ fontSize: 12, color: c.you ? 'var(--crit)' : 'var(--fg-muted)', width: 92, textAlign: 'right' }}>
              {c.you ? '2 of 10 runs' : `${Math.round(c.pct / 10)} of 10`}
            </span>
          </div>
        )}
      </div>
    </div>);

}

Object.assign(window, { ReportPreview, ComparisonTeaser });