const { Button, Card, Badge, GenerateOrb } = window.TaglyDesignSystem_1a793a;
const { ResultsPanel } = window.TaglyResults;

function SeoPage() {
  const cfg = window.__TAGLY_SEO__ || {};
  const [keyword, setKeyword] = React.useState(cfg.topic || '');
  const [results, setResults] = React.useState(null);
  const [toast, setToast] = React.useState(null);

  React.useEffect(() => {
    if (cfg.topic && cfg.platform) {
      setResults(window.TaglyEngine.generate(cfg.topic, cfg.platform));
    }
  }, []);

  function runGenerate() {
    const clean = (keyword || '').trim().slice(0, 60);
    if (!clean) return;
    setResults(window.TaglyEngine.generate(clean, cfg.platform));
  }

  return (
    <React.Fragment>
      <header style={{ display: 'flex', alignItems: 'center', height: 72, padding: '0 40px', background: 'var(--surface-canvas)', borderBottom: '1px solid var(--border-default)', fontFamily: 'var(--font-sans)', boxSizing: 'border-box' }}>
        <a href="../index.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, textDecoration: 'none' }}>
          <span style={{ color: 'var(--accent)', fontSize: 22, lineHeight: 1 }} aria-hidden>#</span>
          <span style={{ fontSize: 22, fontWeight: 700, color: 'var(--text-heading)', letterSpacing: '-0.5px' }}>Tagly</span>
        </a>
        <div style={{ marginLeft: 'auto' }}><a href="../index.html" style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-body)' }}>All tools</a></div>
      </header>

      <nav aria-label="Breadcrumb" style={{ maxWidth: 720, margin: '20px auto 0', padding: '0 24px', fontSize: 13, color: 'var(--text-muted)' }}>
        <a href="../index.html" style={{ color: 'var(--text-muted)' }}>Tagly</a> <span> / </span>
        <a href="./index.html" style={{ color: 'var(--text-muted)' }}>Guides</a> <span> / </span>
        <span style={{ color: 'var(--text-heading)' }}>{cfg.platform} {cfg.tagWordLabel || 'tags'} for {cfg.topic}</span>
      </nav>

      <section style={{ padding: '28px 24px 28px', textAlign: 'center' }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--tg-primary)', marginBottom: 12 }}>
          {cfg.platform} · free forever · no login
        </div>
        <h1 style={{ fontFamily: 'var(--font-sans)', fontSize: 36, lineHeight: 1.15, letterSpacing: '-0.02em', color: 'var(--text-heading)', margin: '0 0 12px', maxWidth: 720, marginLeft: 'auto', marginRight: 'auto', textWrap: 'balance' }}>
          {cfg.h1}
        </h1>
        <p style={{ color: 'var(--text-muted)', fontSize: 16.5, maxWidth: 560, margin: '0 auto 12px' }}>{cfg.intro}</p>
        {cfg.directAnswer && <p style={{ color: 'var(--text-body)', fontSize: 15, maxWidth: 620, margin: '0 auto 32px', lineHeight: 1.6, background: 'var(--surface-soft)', borderRadius: 'var(--radius-md)', padding: '14px 20px' }}>{cfg.directAnswer}</p>}

        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4, background: 'var(--surface-canvas)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-full)', boxShadow: 'var(--shadow-float)', height: 66, padding: '0 8px 0 24px', maxWidth: 640, width: '100%', boxSizing: 'border-box' }}>
            <input value={keyword} onChange={e => setKeyword(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') runGenerate(); }} maxLength={60} placeholder="Add a topic or video title" style={{ flex: 1, minWidth: 0, height: 40, border: 'none', outline: 'none', background: 'transparent', fontFamily: 'var(--font-sans)', fontSize: 16, color: 'var(--text-heading)' }} />
            <GenerateOrb onClick={runGenerate} label="Generate" extended size={50} />
          </div>
        </div>
      </section>

      {results && <ResultsPanel results={results} isPro={true} onGoPro={() => { window.location.href = '../index.html#pricing'; }} />}

      {cfg.faqs && cfg.faqs.length > 0 && (
        <section style={{ padding: '24px 24px 72px' }}>
          <h2 style={{ textAlign: 'center', fontSize: 22, color: 'var(--text-heading)', marginBottom: 24 }}>Frequently asked</h2>
          <div style={{ maxWidth: 760, margin: '0 auto', display: 'grid', gap: 10 }}>
            {cfg.faqs.map((f, i) => (
              <Card key={i}>
                <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-heading)', marginBottom: 6 }}>{f.q}</div>
                <div style={{ fontSize: 13.5, color: 'var(--text-muted)', lineHeight: 1.55 }}>{f.a}</div>
              </Card>
            ))}
          </div>
        </section>
      )}

      <footer style={{ textAlign: 'center', padding: '32px 24px', borderTop: '1px solid var(--border-default)', fontSize: 13, color: 'var(--text-muted)' }}>
        <a href="./index.html">Browse all guides</a> · <a href="../index.html">More Tagly tools →</a>
      </footer>
    </React.Fragment>
  );
}

window.TaglySeoPage = SeoPage;