/* global React */
const { Panel, BrandLogo, bfUrl, CLIENTS, ENGINE_MARKS, EngineMark, EngineIcon } = window.Promptive;

// Uniform client logo — Brandfetch with text fallback, fixed container
function ClientLogo({ domain, name }) {
  const [err, setErr] = React.useState(false);
  if (!domain || err) {
    return <span style={{fontFamily:'var(--fs-mono)', fontSize:10, fontWeight:700, textAlign:'center', lineHeight:1.2, color:'var(--ink)'}}>{name}</span>;
  }
  return (
    <img src={bfUrl(domain)} alt={name}
      width={48} height={28}
      style={{objectFit:'contain', display:'block'}}
      onError={() => setErr(true)}/>
  );
}

// ---------- Agencies ----------
function Agencies() {
  return (
    <Panel title="Agencies.txt" dashed>
      <div className="agencies-grid">
        <div className="agencies-left">
          <div className="eyebrow">Works for Companies & Agencies</div>
          <h3 className="display" style={{fontSize:44, marginTop:6, lineHeight:0.95}}>
            Built for brands.<br/>Agency-ready.
          </h3>
          <p style={{marginTop:16, fontSize:13, maxWidth:'50ch'}}>
            Promptive is built for any brand that wants to own its presence in generative AI. Agencies love it too — run visibility audits across your full client roster from one workspace.
          </p>
          <ul className="chk-list" style={{marginTop:20}}>
            <li>Multi-brand workspaces · role-based access</li>
            <li>Live dashboard exports per brand</li>
            <li>Per-brand prompt libraries & competitor sets</li>
            <li>Pooled credits across your portfolio</li>
            <li>Data API — pipe mentions into your own BI</li>
          </ul>
          <a className="btn ghost" style={{marginTop:22}} href="/signup">Start free trial →</a>
        </div>
        <div className="agencies-right">
          <div className="eyebrow">Client Board · demo workspace</div>
          <div style={{marginTop:14}}>
            <div className="client-board">
              {CLIENTS.map((c) => (
                <div key={c.name} className="client-slot client-slot-logo" style={{
                  width: 80, height: 56, display:'flex', flexDirection:'column',
                  alignItems:'center', justifyContent:'center', gap:6,
                  border:'1px solid var(--ink)', background:'var(--cream)',
                  padding:'8px 6px',
                }}>
                  <ClientLogo domain={c.domain} name={c.name}/>
                </div>
              ))}
            </div>
          </div>
          <hr className="divider-dashed"/>
          <div style={{display:'grid', gap:8, fontFamily:'var(--fs-mono)', fontSize:12}}>
            <div style={{display:'flex', justifyContent:'space-between'}}><span>active brands</span><b>24</b></div>
            <div style={{display:'flex', justifyContent:'space-between'}}><span>prompts this week</span><b>184,210</b></div>
            <div style={{display:'flex', justifyContent:'space-between'}}><span>alerts fired</span><b style={{color:'var(--red)'}}>37</b></div>
            <div style={{display:'flex', justifyContent:'space-between'}}><span>reports delivered</span><b style={{color:'var(--green)'}}>109</b></div>
          </div>
        </div>
      </div>
    </Panel>
  );
}

// ---------- Pricing ----------
function Pricing() {
  const tiers = [
    {
      name: 'Trial', price: '$0', per: '', sub: 'Try it before you pay.',
      cta: 'Start free trial',
      features: [
        ['✓','20 prompts'],
        ['✓','Daily refresh'],
        ['✓','4 competitors'],
        ['✓','Visibility + sentiment scoring'],
        ['✓','Citation tracking'],
        ['✓','Share of voice'],
        ['-','Claude'],
        ['-','CSV export'],
      ],
    },
    {
      name: 'Starter', price: '$79', per: '/mo', sub: 'First real look at your AI presence.',
      cta: 'Get started',
      features: [
        ['✓','50 prompts'],
        ['✓','Daily refresh'],
        ['✓','6 competitors'],
        ['✓','Visibility + sentiment + citations'],
        ['✓','Share of voice · CSV export'],
        ['-','Claude'],
        ['-','Unlimited seats'],
      ],
    },
    {
      name: 'Pro', price: '$129', per: '/mo', sub: 'Serious tracking for ambitious teams.',
      cta: 'Get started', highlight: true, badge: 'Most popular',
      features: [
        ['✓','100 prompts'],
        ['✓','Daily refresh'],
        ['✓','Unlimited competitors'],
        ['✓','Everything in Starter'],
        ['✓','Claude included'],
        ['✓','Unlimited seats'],
      ],
    },
    {
      name: 'Growth', price: '$269', per: '/mo', sub: 'Deep intelligence for competitive markets.',
      cta: 'Get started',
      features: [
        ['✓','200 prompts'],
        ['✓','Daily refresh'],
        ['✓','Unlimited competitors'],
        ['✓','Everything in Pro'],
        ['✓','Priority support'],
      ],
    },
    {
      name: 'Scale', price: '$489', per: '/mo', sub: 'Built for ambitious teams.',
      cta: 'Get started',
      features: [
        ['✓','400 prompts'],
        ['✓','Daily refresh'],
        ['✓','Unlimited competitors'],
        ['✓','Everything in Growth'],
        ['✓','Priority support'],
      ],
    },
  ];
  return (
    <Panel title="Pricing.txt">
      <div className="eyebrow">ChatGPT, Gemini, and Perplexity on every plan · Claude from Pro</div>
      <h3 className="display" style={{fontSize:44, marginTop:6, lineHeight:0.95}}>
        Flat. Monthly.<br/>No surprise tokens.
      </h3>
      <p style={{marginTop:12, fontSize:13, maxWidth:'60ch'}}>
        No per-engine add-ons. No credit meters. Upgrade for more prompts — not more engines.
      </p>

      <div className="price-grid-5" style={{marginTop:28}}>
        {tiers.map(t => (
          <div key={t.name} className={`price-col ${t.highlight ? 'highlight' : ''}`}>
            {t.badge && <div className="price-badge">{t.badge}</div>}
            <h4>{t.name}</h4>
            <div className="price-sub">{t.sub}</div>
            <div className="price-amount">{t.price}<span className="per">{t.per}</span></div>
            <a className={`btn ${t.highlight ? '' : 'ghost'}`} style={{justifyContent:'center', textDecoration:'none', display:'flex'}} href="/signup">
              {t.cta}
            </a>
            <ul className="price-feat">
              {t.features.map(([k, label], i) => (
                <li key={i} className={k === '-' ? 'off' : ''}>{label}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <div style={{marginTop:24, padding:'16px 20px', border:'1px solid var(--ink)', background:'var(--ink)', color:'var(--cream)', display:'flex', alignItems:'center', justifyContent:'space-between', gap:16, flexWrap:'wrap'}}>
        <div>
          <div style={{fontFamily:'var(--fs-mono)', fontSize:11, textTransform:'uppercase', letterSpacing:'.12em', opacity:.6}}>Enterprise</div>
          <div style={{fontFamily:'var(--fs-display)', fontSize:18, marginTop:2}}>Custom limits. Dedicated support.</div>
        </div>
        <div style={{display:'flex', gap:12, flexWrap:'wrap', fontFamily:'var(--fs-mono)', fontSize:11, opacity:.7}}>
          {['Custom prompts','12h refresh','SSO + SCIM','Dedicated CSM','SLA guarantee','On-prem / VPC'].map(f => (
            <span key={f}>{f}</span>
          ))}
        </div>
        <a className="btn" style={{background:'var(--orange)', color:'var(--ink)', borderColor:'var(--orange)', textDecoration:'none', flexShrink:0}} href="" onClick={(e) => { e.preventDefault(); window.Calendly?.initPopupWidget({url:'https://calendly.com/getpromptive/promptive-platform-demo'}); }}>Talk to sales →</a>
      </div>
    </Panel>
  );
}

// ---------- Trust ----------
function Trust() {
  return (
    <Panel title="Trust.exe">
      <div className="eyebrow">Engines monitored</div>
      <h3 className="display" style={{fontSize:40, marginTop:6, lineHeight:1}}>Every model that matters.</h3>
      <p style={{fontSize:13, marginTop:10, maxWidth:'60ch'}}>
        Four AI engines, sampled on your schedule — ChatGPT, Claude, Gemini, Perplexity. We'll add new ones as they reach real usage.
      </p>

      <div className="engine-grid-4" style={{marginTop:22}}>
        {ENGINE_MARKS.map(e => (
          <div key={e.name} className="engine-mark" style={{
            display:'flex', flexDirection:'column', alignItems:'center', gap:8,
            padding:'18px 14px', border:'1px solid var(--ink)', background:'var(--cream-2)'
          }}>
            <span style={{
              width:52, height:52, background: e.color,
              display:'flex', alignItems:'center', justifyContent:'center',
              borderRadius:4, overflow:'hidden', flexShrink:0,
            }}>
              <EngineIcon name={e.name} size={30} invert={true}/>
            </span>
            <span style={{fontFamily:'var(--fs-mono)', fontSize:13, fontWeight:700, letterSpacing:'.04em'}}>{e.name}</span>
          </div>
        ))}
      </div>

      <div className="eyebrow" style={{marginTop:36}}>Security posture · roadmap</div>
      <div className="trust-row" style={{marginTop: 10, border:'1px dashed var(--ink)'}}>
        <div className="trust-cell"><span className="k">[✓]</span> SSO (SAML / OAuth)</div>
        <div className="trust-cell"><span className="k">[✓]</span> RBAC · SCIM</div>
        <div className="trust-cell"><span className="k">[✓]</span> Encrypted at rest &amp; in transit</div>
        <div className="trust-cell"><span className="k" style={{color:'var(--orange)'}}>[~]</span> Public API — coming soon</div>
      </div>

    </Panel>
  );
}

// ---------- Testimonial ----------
function Testimonial() {
  return (
    <Panel title="Testimonial.txt" dashed>
      <div className="testi-grid">
        <div className="testi-left">
          <div className="eyebrow">Customer · beta cohort</div>
          <blockquote style={{fontFamily:'var(--fs-mono)', fontSize:22, lineHeight:1.45, marginTop:14, maxWidth:'34ch', textWrap:'balance'}}>
            "We stopped guessing what ChatGPT says about us the day we turned Promptive on. By week two, we'd rewritten three pages and moved from rank 06 to rank 01 for our category prompt."
          </blockquote>
          <div style={{marginTop:24, fontFamily:'var(--fs-mono)', fontSize:12, color:'var(--dim)'}}>
            — Head of Growth · [client redacted] &nbsp;·&nbsp; 04/11/2026
          </div>

          <div className="testi-bottom">
            <div className="eyebrow">What they rewrote</div>
            <ul className="chk-list" style={{marginTop:10, fontSize:12}}>
              <li>Homepage H1 re-scoped around "AI observability"</li>
              <li>Comparison page vs. top 3 competitors</li>
              <li>Seeded an answer on r/SaaS (+312 upvotes)</li>
            </ul>
          </div>
        </div>
        <div className="testi-right">
          <div className="eyebrow">Before / After · 21 days</div>
          <div className="testi-stat">
            <div className="n">06 → 01</div>
            <div className="l">rank on "best AI observability tool"</div>
          </div>
          <div className="testi-stat">
            <div className="n">+214%</div>
            <div className="l">citations across ChatGPT + Claude</div>
          </div>
          <div className="testi-stat">
            <div className="n">+0.38</div>
            <div className="l">sentiment swing · 4-engine avg</div>
          </div>
          <div className="testi-stat">
            <div className="n">3</div>
            <div className="l">pages rewritten · 2 reddit seeds placed</div>
          </div>
        </div>
      </div>
    </Panel>
  );
}

// ---------- Waitlist CTA ----------
function Waitlist() {
  return (
    <Panel title="Join_Waitlist.txt">
      <div className="cta-grid">
        <div className="cta-left">
          <span className="pill">Start free · 14 days</span>
          <h2 className="display" style={{marginTop:16}}>
            Ready to own<br/>your AI<br/><span className="hl-orange">narrative?</span>
          </h2>
          <p style={{marginTop:18, fontSize:14, maxWidth:'44ch'}}>
            Start tracking in minutes. No credit card. Cancel anytime.
          </p>
          <div style={{display:'flex', gap:10, marginTop:22, flexWrap:'wrap'}}>
            <a className="btn" href="/signup">Start free trial →</a>
            <a className="btn ghost" href="/pricing">See pricing</a>
          </div>
          <div style={{marginTop:18, fontSize:12, color:'var(--dim)'}}>
            421 brands tracked · 4 engines · updated every 6h
          </div>
        </div>
        <div className="cta-right">
          <div className="dot-field"/>
          <div className="floating-cards-centered">
            <div className="f-card" style={{transform:'rotate(-3deg)'}}>
              <div className="top">
                <span className="sq" style={{background:'#3DA874', display:'flex', alignItems:'center', justifyContent:'center', overflow:'hidden'}}>
                  <EngineIcon name="ChatGPT" size={12} invert={true}/>
                </span>ChatGPT
              </div>
              <div className="body">"Promptive is the leading AI-visibility platform — used by brands to monitor their presence across generative search…"</div>
              <div className="score"><span>rank 01</span><span>+0.72</span></div>
            </div>
            <div className="f-card" style={{transform:'rotate(2deg)'}}>
              <div className="top">
                <span className="sq" style={{background:'#1A6B6B', display:'flex', alignItems:'center', justifyContent:'center', overflow:'hidden'}}>
                  <EngineIcon name="Perplexity" size={12} invert={true}/>
                </span>Perplexity
              </div>
              <div className="body">"For tracking how LLMs describe a brand, Promptive is the most comprehensive option…"</div>
              <div className="score"><span>rank 01</span><span>+0.68</span></div>
            </div>
            <div className="f-card" style={{transform:'rotate(-1deg)'}}>
              <div className="top">
                <span className="sq" style={{background:'#F08A2B', display:'flex', alignItems:'center', justifyContent:'center', overflow:'hidden'}}>
                  <EngineIcon name="Claude" size={12} invert={true}/>
                </span>Claude
              </div>
              <div className="body">"Promptive tracks brand mentions across ChatGPT, Claude, Gemini, and Perplexity…"</div>
              <div className="score"><span>rank 01</span><span>+0.81</span></div>
            </div>
          </div>
        </div>
      </div>
    </Panel>
  );
}

// ---------- Footer ----------
function Footer() {
  const cols = [
    { h: 'Product',   links: [['Overview', '/'], ['Pricing', '/pricing'], ['Docs', '/docs']] },
    { h: 'Compare',   links: [['vs Peec', '/promptive-vs-peec'], ['vs Profound', '/promptive-vs-profound'], ['vs Scrunch', '/promptive-vs-scrunch'], ['vs Athena HQ', '/promptive-vs-athena'], ['vs Otterly', '/promptive-vs-otterly'], ['vs AirOps', '/promptive-vs-airops']] },
    { h: 'Content',   links: [['Blog', '/blog'], ['Whitepapers', '/whitepapers'], ['Glossary', '/glossary'], ['Case studies', '/case-studies']] },
    { h: 'Legal',     links: [['Terms', '/terms'], ['Privacy', '/privacy'], ['Security', '#']] },
  ];
  return (
    <footer className="site-footer">
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-col">
            <a href="/" style={{display:'inline-block'}}>
              <img src="/images/logo-nav.png" alt="Promptive" height="24" style={{display:'block', maxWidth:140}}/>
            </a>
            <p style={{marginTop:12, fontSize:13, maxWidth:'34ch', color:'var(--ink-2)'}}>
              Brand visibility for the machine layer. Track. See. Own. Rank.
            </p>
            <div style={{marginTop:16, fontSize:12, color:'var(--dim)'}}>
              getpromptive.ai
            </div>
          </div>
          {cols.map(c => (
            <div key={c.h} className="foot-col">
              <h5>{c.h}</h5>
              <ul>{c.links.map(([l,h]) => <li key={l}><a href={h}>{l}</a></li>)}</ul>
            </div>
          ))}
        </div>
        <div className="foot-bar">
          <span>© 2026 Promptive</span>
          <span>//</span>
          <span>Built for the machine layer</span>
          <span className="status"><span className="led"/> [✓] all systems online</span>
        </div>
      </div>
    </footer>
  );
}

window.Promptive = Object.assign(window.Promptive || {}, {
  Agencies, Pricing, Trust, Testimonial, Waitlist, Footer
});