// global-pages.jsx — Static pages for Teknav Global (English, LTR)
import { articles, categories, siteConfig } from '../global-data.js';
import { useNav, NewsletterForm, pillBtn } from './global-ui.jsx';
import { ArticleCard } from './global-home.jsx';

const proseStyle = {
  maxWidth: 720, margin: '0 auto', padding: '60px 24px 80px',
  fontFamily: 'Inter,sans-serif', lineHeight: 1.8, color: '#263238',
};

// ── Category Page ────────────────────────────────────────────────────
export function CategoryPage({ cat }) {
  const { navigate } = useNav();
  const catData = categories.find(c => c.id === cat);
  const catArticles = articles.filter(a => a.category === cat);

  if (!catData) return <NotFoundPage />;

  return (
    <div style={{ paddingTop: 80, background: '#FAF7F0', minHeight: '100vh', fontFamily: 'Inter,sans-serif' }}>
      <div style={{ maxWidth: 1000, margin: '0 auto', padding: '0 24px' }}>
        <div style={{ padding: '40px 0 20px' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: catData.color + '12', border: `1px solid ${catData.color}30`, color: catData.color, padding: '5px 14px', borderRadius: 999, fontSize: 12, fontWeight: 700, marginBottom: 16 }}>
            {catData.name}
          </div>
          <h1 style={{ fontSize: 32, fontWeight: 900, color: '#263238', margin: '0 0 8px', fontFamily: 'Inter,sans-serif', letterSpacing: '-0.02em' }}>{catData.name}</h1>
          <p style={{ fontSize: 15, color: '#5F6B6D', margin: '0 0 32px', lineHeight: 1.7, maxWidth: 600 }}>{catData.description}</p>
          <div style={{ fontSize: 13, color: '#5F6B6D' }}>{catArticles.length} articles</div>
        </div>

        {catArticles.length === 0 ? (
          <div style={{ textAlign: 'center', padding: '60px 0', color: '#5F6B6D' }}>
            <div style={{ fontSize: 48, opacity: 0.3, marginBottom: 12 }}>◎</div>
            <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 8, color: '#263238' }}>No articles yet</div>
            <div style={{ fontSize: 13 }}>Articles in this category are coming soon</div>
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(280px,1fr))', gap: 20, paddingBottom: 60 }}>
            {catArticles.map((a, i) => <ArticleCard key={a.id} article={a} delay={i * 60} />)}
          </div>
        )}
      </div>
    </div>
  );
}

// ── Persian-only page ───────────────────────────────────────────────
export function PersianOnlyPage() {
  const { navigate } = useNav();
  return (
    <div style={{ paddingTop: 80, background: '#FAF7F0', minHeight: '100vh', fontFamily: 'Inter,sans-serif' }}>
      <div style={{ maxWidth: 560, margin: '0 auto', padding: '80px 24px', textAlign: 'center' }}>
        <div style={{ fontSize: 48, marginBottom: 16 }}>🇮🇷</div>
        <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 12, color: '#263238', fontFamily: 'Inter,sans-serif' }}>
          This article is available in Persian only
        </h1>
        <p style={{ color: '#5F6B6D', fontSize: 16, lineHeight: 1.7, marginBottom: 32 }}>
          The article you're looking for hasn't been adapted for the English edition yet.
          You can read the original Persian version on Teknav.ir.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="https://www.teknav.ir" style={{ ...pillBtn, background: '#0F6B73', color: '#fff', textDecoration: 'none' }}>Read in Persian →</a>
          <button onClick={() => navigate('/')} style={{ ...pillBtn, background: '#F4EFE6', color: '#263238', border: '1px solid #E4DDD2' }}>
            Browse English articles
          </button>
        </div>
      </div>
    </div>
  );
}

// ── 404 ─────────────────────────────────────────────────────────────
export function NotFoundPage() {
  const { navigate } = useNav();
  return (
    <div style={{ paddingTop: 64, minHeight: '100vh', background: '#FAF7F0', fontFamily: 'Inter,sans-serif' }}>
      <div style={{ textAlign: 'center', padding: '100px 24px' }}>
        <div style={{ fontSize: 80, fontWeight: 900, color: '#0F6B73', opacity: 0.2, fontFamily: 'Inter,sans-serif' }}>404</div>
        <h2 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12, color: '#263238' }}>Page not found</h2>
        <p style={{ color: '#5F6B6D', marginBottom: 28 }}>The page you're looking for doesn't exist or has moved.</p>
        <button onClick={() => navigate('/')} style={{ ...pillBtn, background: '#0F6B73', color: '#fff', padding: '12px 28px' }}>Back to home</button>
      </div>
    </div>
  );
}

// ── Prose wrapper ────────────────────────────────────────────────────
function Prose({ children }) {
  return (
    <div style={{ paddingTop: 80, background: '#FAF7F0', minHeight: '100vh' }}>
      <div style={proseStyle}>
        {children}
      </div>
    </div>
  );
}

const h1Style = { fontSize: 32, fontWeight: 800, marginBottom: 8, letterSpacing: '-0.02em', color: '#0F2A2E', fontFamily: 'Inter,sans-serif' };
const leadStyle = { fontSize: 18, color: '#5F6B6D', marginBottom: 40, lineHeight: 1.7 };
const h2Style = { fontSize: 20, fontWeight: 700, margin: '36px 0 12px', color: '#263238', fontFamily: 'Inter,sans-serif' };
const pStyle = { marginBottom: 18, lineHeight: 1.8, fontSize: 16, color: '#263238' };
const ulStyle = { paddingLeft: 24, marginBottom: 18 };
const liStyle = { marginBottom: 8, lineHeight: 1.7, fontSize: 16 };
const aStyle = { color: '#0F6B73' };

// ── About ────────────────────────────────────────────────────────────
export function AboutPage() {
  return (
    <Prose>
      <h1 style={h1Style}>About Teknav</h1>
      <p style={leadStyle}>Deep technology analysis for engineers, researchers, and technical founders.</p>

      <h2 style={h2Style}>What We Cover</h2>
      <p style={pStyle}>Teknav covers AI engineering, security, software architecture, hardware, and the policy decisions that shape how technology gets built and deployed. We focus on the technical layer — the infrastructure, the tradeoffs, the failure modes, and the engineering decisions that matter to practitioners.</p>
      <p style={pStyle}>We don't cover gadgets, consumer rumors, or executive gossip. We cover the substrate: how AI systems are actually built, how security vulnerabilities actually work, how software architecture decisions actually play out at scale.</p>

      <h2 style={h2Style}>Our Standards</h2>
      <p style={pStyle}>Every article is technically reviewed before publication. Claims are sourced. Uncertainty is stated clearly. We distinguish between what is known, what is inferred, and what is speculation. When we're wrong, we publish corrections.</p>
      <p style={pStyle}>We use AI tools in our research and writing workflow, as any honest technical publication does in 2026. Where AI materially assisted in drafting, we note it. Human editors review and verify all published content.</p>

      <h2 style={h2Style}>Two Editions</h2>
      <p style={pStyle}>Teknav publishes in two independent editions: Persian (<a href="https://www.teknav.ir" style={aStyle}>teknav.ir</a>) and English (teknavglobal.com). The English edition is not a translation — it is adapted and rewritten for international readers, targeting English search intent and international context.</p>

      <h2 style={h2Style}>Editorial Independence</h2>
      <p style={pStyle}>Teknav is independently operated. We do not accept sponsored articles, affiliate payments, or vendor funding that conditions our editorial coverage. Our newsletter and reader support are our primary revenue paths.</p>

      <h2 style={h2Style}>Contact</h2>
      <p style={pStyle}>Editorial questions, corrections, and pitches: reach us through our social profiles listed in the footer. For the Persian editorial team: <a href="https://www.teknav.ir/about" style={aStyle}>teknav.ir/about</a></p>
    </Prose>
  );
}

// ── Editorial Policy ─────────────────────────────────────────────────
export function EditorialPage() {
  return (
    <Prose>
      <h1 style={h1Style}>Editorial Policy</h1>
      <p style={leadStyle}>Our standards for accuracy, independence, transparency, and corrections.</p>

      <h2 style={h2Style}>Accuracy</h2>
      <p style={pStyle}>All factual claims are sourced to primary references — official documentation, research papers, court filings, vendor announcements, or other authoritative primary sources. Technical details — version numbers, benchmark results, API behavior, CVE identifiers — are checked against primary sources before publication.</p>

      <h2 style={h2Style}>Independence</h2>
      <p style={pStyle}>Teknav does not accept sponsored articles. We do not accept payment for editorial coverage. We do not accept vendor briefings that condition publication. Our editorial decisions are made independently of commercial relationships.</p>

      <h2 style={h2Style}>AI-Assisted Content</h2>
      <p style={pStyle}>Teknav uses AI tools in research, drafting, and fact-checking workflows. Our policy:</p>
      <ul style={ulStyle}>
        <li style={liStyle}>All published articles are reviewed and verified by human editors.</li>
        <li style={liStyle}>AI-drafted content that is substantially unedited is not published.</li>
        <li style={liStyle}>Factual accuracy is the responsibility of the named author and editor, regardless of AI tool use.</li>
      </ul>

      <h2 style={h2Style}>Corrections</h2>
      <p style={pStyle}>When we make factual errors, we correct them promptly and visibly. Corrections appear at the top of the affected article with a clear description of what changed and when. We do not silently edit published articles.</p>
    </Prose>
  );
}

// ── Privacy Policy ───────────────────────────────────────────────────
export function PrivacyPage() {
  return (
    <Prose>
      <h1 style={h1Style}>Privacy Policy</h1>
      <p style={leadStyle}>Last updated: June 2026</p>

      <h2 style={h2Style}>What We Collect</h2>
      <p style={pStyle}>When you use Teknav, we may collect:</p>
      <ul style={ulStyle}>
        <li style={liStyle}><strong>Account data</strong> — email address, username, and password hash (Argon2id) if you register.</li>
        <li style={liStyle}><strong>Newsletter subscription</strong> — email address.</li>
        <li style={liStyle}><strong>Push notification subscription</strong> — browser push endpoint, stored per your opt-in.</li>
        <li style={liStyle}><strong>Technical data</strong> — browser type and referrer for aggregate analytics. We do not use third-party tracking pixels.</li>
      </ul>

      <h2 style={h2Style}>What We Don't Collect</h2>
      <ul style={ulStyle}>
        <li style={liStyle}>We do not sell your data to third parties.</li>
        <li style={liStyle}>We do not use advertising networks or behavioral tracking.</li>
        <li style={liStyle}>We do not use third-party analytics that track you across sites.</li>
      </ul>

      <h2 style={h2Style}>Cookies and Sessions</h2>
      <p style={pStyle}>We use a session cookie (<code style={{ fontFamily: 'monospace', background: '#F4EFE6', padding: '1px 5px', borderRadius: 3 }}>tek_sid</code>) for authentication, valid for 14 days with sliding expiration. A CSRF cookie is used to protect against cross-site request forgery. We do not use tracking cookies or third-party cookies.</p>

      <h2 style={h2Style}>Your Rights</h2>
      <ul style={ulStyle}>
        <li style={liStyle}><strong>Access</strong> — you can view your account data in your profile settings.</li>
        <li style={liStyle}><strong>Deletion</strong> — you can delete your account from profile settings.</li>
        <li style={liStyle}><strong>Newsletter unsubscribe</strong> — every newsletter email includes an unsubscribe link.</li>
      </ul>

      <h2 style={h2Style}>Contact</h2>
      <p style={pStyle}>Privacy questions: reach us through the feedback link on any article page.</p>
    </Prose>
  );
}

// ── Terms of Use ─────────────────────────────────────────────────────
export function TermsPage() {
  return (
    <Prose>
      <h1 style={h1Style}>Terms of Use</h1>
      <p style={leadStyle}>Last updated: June 2026</p>

      <h2 style={h2Style}>Acceptance</h2>
      <p style={pStyle}>By accessing teknavglobal.com, you agree to these terms. If you do not agree, do not use the site.</p>

      <h2 style={h2Style}>Content License</h2>
      <p style={pStyle}>All articles, analysis, and editorial content on Teknav are the intellectual property of Teknav and its authors. You may share links and quote short excerpts with attribution. You may not republish full articles, scrape content for AI training, or reproduce content commercially without written permission.</p>

      <h2 style={h2Style}>Accuracy Disclaimer</h2>
      <p style={pStyle}>Teknav publishes technical analysis and editorial opinion. Content is accurate to the best of our knowledge at publication time but may become outdated. Do not rely solely on Teknav content for security, legal, or financial decisions.</p>

      <h2 style={h2Style}>Limitation of Liability</h2>
      <p style={pStyle}>Teknav is not liable for decisions made based on our content. We provide analysis, not professional advice. The site is provided "as is" without warranties of any kind.</p>

      <h2 style={h2Style}>Governing Law</h2>
      <p style={pStyle}>These terms are governed by applicable law. Disputes will be resolved through good-faith negotiation before any legal action.</p>
    </Prose>
  );
}