// AI Content Check — AI detection score, E-E-A-T, humanization, content health

(function () {

function ScoreGauge({ score, label, hint, invert }) {
  const good  = invert ? score < 30 : score >= 70;
  const warn  = invert ? (score >= 30 && score < 60) : (score >= 40 && score < 70);
  const color = good ? 'var(--good)' : warn ? 'var(--warn)' : 'var(--bad)';
  const bg    = good ? 'var(--good-soft)' : warn ? 'var(--warn-soft)' : 'var(--bad-soft)';
  return (
    <div style={{ background:'var(--surface)', border:`1px solid color-mix(in srgb,${color} 25%,transparent)`, borderRadius:'var(--r-3)', padding:'16px 18px', textAlign:'center' }}>
      <div style={{ fontSize:36, fontWeight:700, color, lineHeight:1, marginBottom:6 }}>{score}</div>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'center', gap:5, marginBottom:8 }}>
        <span style={{ fontSize:12.5, fontWeight:600, color:'var(--ink-2)' }}>{label}</span>
        {hint && <Hint text={hint} width={220}/>}
      </div>
      <div style={{ height:6, background:'var(--surface-3)', borderRadius:99, overflow:'hidden', marginBottom:6 }}>
        <div style={{ width:`${invert ? score : score}%`, height:'100%', background:color, borderRadius:99 }}/>
      </div>
      <span style={{ fontSize:11, fontWeight:700, padding:'2px 8px', borderRadius:100, color, background:bg }}>
        {good ? 'Good' : warn ? 'Needs Work' : 'Poor'}
      </span>
    </div>
  );
}

function CheckRow({ done, text, hint }) {
  return (
    <div style={{ display:'flex', alignItems:'flex-start', gap:10, padding:'9px 0' }}>
      <div style={{ width:18, height:18, borderRadius:'50%', border:`2px solid ${done?'var(--good)':'var(--border)'}`, background:done?'var(--good)':'transparent', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, marginTop:1 }}>
        {done && <Icon name="check" size={10} style={{ color:'#fff' }}/>}
      </div>
      <div style={{ flex:1, minWidth:0, display:'flex', alignItems:'center', gap:5 }}>
        <span style={{ fontSize:13, color:done?'var(--ink)':'var(--ink-3)', lineHeight:1.5 }}>{text}</span>
        {hint && <Hint text={hint} width={220}/>}
      </div>
    </div>
  );
}

function AIContentPage({ go }) {
  const c    = window.CP_CLIENT || {};
  const ct   = c.content || {};
  const eeat = ct.eeat || {};

  const aiScore      = ct.aiReadiness   || 28;
  const aiDetect     = ct.aiDetection   || { avgScore:42, risky:2, clean:12 };
  const humanScore   = 100 - (aiDetect.avgScore || 42);

  const PAGE_SAMPLES = (c.content && c.content.aiPages) || [
    { page:'Homepage',    aiScore:18, status:'clean' },
    { page:'About Us',   aiScore:31, status:'clean' },
    { page:'Custom Cakes',aiScore:55, status:'watch' },
    { page:'Blog: Sourdough', aiScore:71, status:'risky' },
    { page:'Blog: Gluten-Free', aiScore:78, status:'risky' },
    { page:'Contact',    aiScore:12, status:'clean' },
  ];

  const statusMap = {
    clean: { label:'Human', color:'var(--good)',    bg:'var(--good-soft)' },
    watch: { label:'Watch',  color:'var(--warn)',    bg:'var(--warn-soft)' },
    risky: { label:'AI Risk',color:'var(--bad)',     bg:'var(--bad-soft)'  },
  };

  return (
    <div>
      <div style={{ marginBottom:24 }}>
        <h2 className="hk-h3" style={{ marginBottom:4 }}>AI Content Check</h2>
        <p className="hk-small" style={{ color:'var(--ink-3)' }}>
          Content authenticity & quality signals for <strong>{c.domain}</strong>
        </p>
      </div>

      {/* Info banner */}
      <div style={{ display:'flex', alignItems:'flex-start', gap:12, padding:'12px 16px', background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-3)', marginBottom:24 }}>
        <Icon name="info" size={16} style={{ color:'var(--accent)', flexShrink:0, marginTop:1 }}/>
        <div className="hk-small" style={{ color:'var(--ink-2)', lineHeight:1.6 }}>
          Google's 2024 Helpful Content Update penalizes pages that read as AI-generated or thin. This check shows which pages are at risk and how to improve your E-E-A-T signals.
        </div>
      </div>

      {/* Score row */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(165px,1fr))', gap:12, marginBottom:24 }}>
        <ScoreGauge score={humanScore} label="Human Writing Score"
          hint="Higher is better. Shows how 'human' your content reads. Under 50 = Google may see it as AI-generated and demote it."/>
        <ScoreGauge score={eeat.experience||45}    label="Experience (E-E-A-T)"
          hint="Does your content show first-hand experience? Google wants to see real photos, real stories, real expertise from the actual business owner."/>
        <ScoreGauge score={eeat.expertise||52}     label="Expertise (E-E-A-T)"
          hint="Does your content show deep knowledge of your craft? Expert content includes specifics, techniques, and insights that only a professional would know."/>
        <ScoreGauge score={eeat.trustworthiness||48} label="Trustworthiness"
          hint="Do you have reviews, credentials, or trust signals on your site? Google measures this via reviews, about page, author bios, and citations."/>
      </div>

      {/* Per-page AI scan */}
      <div style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-3)', padding:'18px 20px', marginBottom:24 }}>
        <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:16 }}>
          <span className="hk-h4">Page-by-Page AI Detection</span>
          <Hint text="AI detection score per page. Over 60 = high risk of being flagged as AI-generated. Google doesn't just look at the whole site — individual pages can be demoted." width={250}/>
          <div style={{ marginLeft:'auto', display:'flex', gap:8 }}>
            {Object.entries(statusMap).map(([k,v]) => (
              <span key={k} style={{ fontSize:11, fontWeight:700, padding:'2px 7px', borderRadius:4, color:v.color, background:v.bg }}>{v.label}</span>
            ))}
          </div>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
          {PAGE_SAMPLES.map((p,i) => {
            const s = statusMap[p.status];
            const barColor = p.aiScore < 40 ? 'var(--good)' : p.aiScore < 60 ? 'var(--warn)' : 'var(--bad)';
            return (
              <div key={i} style={{ display:'flex', alignItems:'center', gap:12 }}>
                <span style={{ fontSize:13, color:'var(--ink-2)', minWidth:180, flexShrink:0 }}>{p.page}</span>
                <div style={{ flex:1, height:6, background:'var(--surface-3)', borderRadius:99, overflow:'hidden' }}>
                  <div style={{ width:`${p.aiScore}%`, height:'100%', background:barColor, borderRadius:99 }}/>
                </div>
                <span style={{ fontSize:12.5, fontWeight:700, color:barColor, width:28, textAlign:'right', flexShrink:0 }}>{p.aiScore}</span>
                <span style={{ fontSize:11, fontWeight:700, padding:'2px 7px', borderRadius:4, color:s.color, background:s.bg, flexShrink:0, minWidth:60, textAlign:'center' }}>{s.label}</span>
              </div>
            );
          })}
        </div>
      </div>

      {/* E-E-A-T Improvement Checklist */}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginBottom:24 }}>
        <div style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-3)', padding:'18px 20px' }}>
          <div style={{ display:'flex', alignItems:'center', gap:6, marginBottom:2 }}>
            <span className="hk-h4">You can do today</span>
          </div>
          <div className="hk-tiny" style={{ color:'var(--ink-3)', marginBottom:12 }}>No tech skills needed</div>
          <div style={{ display:'flex', flexDirection:'column' }}>
            {((c.content && c.content.eeatTasks) || [
              { done:false, text:"Add a real photo of yourself on the About page", hint:"Google calls this 'Experience' — real people, real faces, builds trust." },
              { done:false, text:"Add your bakery's founding story (at least 150 words)" },
              { done:false, text:"Mention specific techniques you use (e.g. long fermentation, European butter)" },
              { done:true,  text:"Google Business Profile is claimed and verified" },
              { done:false, text:"Add credentials or awards to your homepage" }
            ]).map((t,i) => <CheckRow key={i} {...t}/>)}
          </div>
        </div>

        <LockedSection
          label="HiKit's Content Humanization Service"
          sub="Our writers rewrite at-risk pages to be authentic, E-E-A-T compliant, and Google-proof — using your real voice and brand story."
          ctaLabel="Learn About Content Fix"
        >
          <div style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-3)', padding:'18px 20px' }}>
            <div className="hk-h4" style={{ marginBottom:2 }}>HiKit handles for you</div>
            <div className="hk-tiny" style={{ color:'var(--ink-3)', marginBottom:12 }}>Professional content services</div>
            <div style={{ display:'flex', flexDirection:'column' }}>
              {((c.content && c.content.humanizationTasks) || ['Rewrite AI-flagged pages in your authentic voice','Add E-E-A-T signals: author bios, photo captions, "why we do this"','Implement FAQ schema on key pages','Add Organization + Course schema markup','Run monthly content freshness audit']).map((t,i) => (
                <div key={i} style={{ display:'flex', gap:10, padding:'9px 0', borderBottom:i<4?'1px solid var(--surface-3)':'' }}>
                  <Icon name="check" size={14} style={{ color:'var(--good)', flexShrink:0, marginTop:2 }}/>
                  <span style={{ fontSize:13, color:'var(--ink)' }}>{t}</span>
                </div>
              ))}
            </div>
          </div>
        </LockedSection>
      </div>

      {/* AI Search Readiness */}
      <div style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-3)', padding:'18px 20px' }}>
        <div style={{ display:'flex', alignItems:'center', gap:6, marginBottom:14 }}>
          <span className="hk-h4">AI Search Readiness</span>
          <Hint text="ChatGPT, Perplexity, and Google AI Overviews are now answering questions directly. If your site isn't structured for AI citation, you miss this growing traffic source." width={260}/>
          <div style={{ marginLeft:'auto', fontSize:32, fontWeight:700, color:aiScore<50?'var(--bad)':'var(--warn)', lineHeight:1 }}>{aiScore}<span style={{ fontSize:14, color:'var(--ink-3)', fontWeight:400 }}>/100</span></div>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(200px,1fr))', gap:8 }}>
          {[
            { label:'FAQ sections present',         done:false, hint:'AI tools love Q&A format — they pull FAQs directly into their answers.' },
            { label:'Structured answer formats',    done:false, hint:'Clear headers + short answers = more likely to be cited by AI search tools.' },
            { label:'Entity markup (schema)',        done:false, hint:'Schema tells AI exactly what your business is, what you sell, and where you are.' },
            { label:'First-party content/studies',  done:false, hint:'Original data or local expertise makes your content uniquely citable.' },
            { label:'Author E-E-A-T signals',        done:false },
            { label:'llms.txt configured',           done:false, hint:"New standard that tells AI crawlers what content they're allowed to use from your site." },
          ].map((item,i) => (
            <div key={i} style={{ display:'flex', alignItems:'center', gap:8, padding:'8px 0', borderBottom:i<5?'1px solid var(--surface-3)':'' }}>
              <div style={{ width:14, height:14, borderRadius:3, border:`1.5px solid ${item.done?'var(--good)':'var(--border)'}`, background:item.done?'var(--good)':'transparent', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                {item.done && <Icon name="check" size={8} style={{ color:'#fff' }}/>}
              </div>
              <span className="hk-tiny" style={{ color:item.done?'var(--ink)':'var(--ink-3)', flex:1 }}>{item.label}</span>
              {item.hint && <Hint text={item.hint} width={220}/>}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

CP_PAGES['ai-content'] = { title: 'AI Content', component: AIContentPage };

})();