const { useState } = React;

// English canonical articles (17 questions, 3 categories)
const CANON_ARTICLES_EN = {
  security: [
    { category: 'PRODUCT OVERVIEW', icon: '\uD83C\uDFD7', title: 'What is Launch Ark?',
      body: 'Launch Ark is a structured continuity package for solo-built and AI-built software projects. It maps what exists, what is missing, what is uncertain, and what another person would need to know to understand how the project survives a bad week. It is not consulting, not certification, and not DevOps implementation.',
      meta: { updated: 'Canonical definition', visibility: 'Public Knowledge' } },
    { category: 'PRIVACY POLICY', icon: '\uD83D\uDD12', title: 'What is the No-Secrets Policy?',
      body: 'The intake form is explicitly designed to exclude credential fields. No secrets, API keys, tokens, passwords, private repository URLs, or connection strings are requested or collected at any stage. Our validator scans for secret-like patterns and blocks any intake that contains them before it reaches any operator.',
      meta: { updated: 'Active policy', visibility: 'Public Knowledge' } },
    { category: 'DATA GOVERNANCE', icon: '\uD83D\uDCBE', title: 'How is my data handled?',
      body: 'We collect only the minimum information required to assemble your package. Raw intake data is deleted after delivery. We retain only minimal metadata needed for order tracking (reference ID, delivery status, date). No marketing use. No third-party sharing.',
      quote: '"Data not stored cannot be stolen." \u2014 Core operating principle',
      meta: { updated: 'Current policy', visibility: 'Public Knowledge' } },
    { category: 'USER RIGHTS', icon: '\uD83D\uDCC4', title: 'What are Deletion Receipts?',
      body: 'When you request deletion of your intake data, we generate a DELETION_RECEIPT.md \u2014 a structured document confirming what input data was received, what was deleted, what minimal metadata was retained, and the timestamp of deletion. Deletion receipts are process records, not cryptographic deletion certificates.',
      meta: { updated: 'Available on request', visibility: 'Public Knowledge' } },
    { category: 'INTAKE BOUNDARY', icon: '\uD83D\uDEAB', title: 'Should I send secrets or credentials?',
      body: 'No. You must not send secrets, production credentials, private repository URLs, API keys, passwords, or customer data dumps. The intake form does not have fields for these. If you include secret-like values, the intake will be rejected. Launch Ark is designed to work with minimal, structured, high-level project descriptions.',
      meta: { updated: 'Hard rule', visibility: 'Public Knowledge' } },
  ],
  product: [
    { category: 'SERVICE TYPE', icon: '\uD83E\uDD1D', title: 'Is this consulting?',
      body: 'No. Launch Ark is an async-first documentation product, not consulting. There are no discovery calls, no advisory sessions, and no ongoing relationship. You provide a structured project description; we assemble a bounded package from it. Scope and price are confirmed by email before proceeding.',
      meta: { updated: 'Product definition', visibility: 'Public Knowledge' } },
    { category: 'PROCESS', icon: '\uD83D\uDCDE', title: 'Do I need a call?',
      body: 'No calls are required or offered at this stage. The entire process is async-first: you submit a project description, we validate it, confirm scope and price by email, and deliver the package. If your project needs a discovery call to define scope, it may not be the right fit for Launch Ark in its current form.',
      meta: { updated: 'Active process', visibility: 'Public Knowledge' } },
    { category: 'ACCESS BOUNDARY', icon: '\uD83D\uDD11', title: 'Do you need access to my repository?',
      body: 'No. We do not require, request, or accept private repository access, production system credentials, or deployment pipeline access. The intake is based on a structured high-level description you provide. If a fact cannot be confirmed from your intake, it is recorded as a gap \u2014 not assumed.',
      meta: { updated: 'Hard boundary', visibility: 'Public Knowledge' } },
    { category: 'PACKAGE SCOPE', icon: '\uD83D\uDCE6', title: 'What is included in a Launch Ark package?',
      body: 'Depending on the selected package tier, the bundle may include: SYSTEM_OVERVIEW.md, ARCHITECTURE_SKETCH.md, SECURITY_BASELINE.md, DATA_MAP_AND_PII.md, ACCESS_AND_ROLES.md, BACKUP_RESTORE_PLAN.md, RELEASE_CHECKLIST.md, RUNBOOK_BROKEN_DEPLOY.md, RUNBOOK_SERVICE_UNAVAILABLE.md, EMERGENCY_CONTINUITY_STEPS.md, ARK_GAPS_REPORT.md, and DELETION_RECEIPT.md. Not all modules are included in every tier.',
      meta: { updated: 'Current spec', visibility: 'Public Knowledge' } },
    { category: 'GAPS POLICY', icon: '\uD83D\uDD0D', title: 'What happens to unknowns?',
      body: 'Unknowns stay visible. If a required field is missing, ambiguous, or contradictory in your intake, it is rendered as a clearly marked placeholder in the relevant document \u2014 not filled with invented content. Every package includes an ARK_GAPS_REPORT.md that explicitly lists all gaps. The gap report is a feature, not a failure.',
      meta: { updated: 'Core behavior', visibility: 'Public Knowledge' } },
    { category: 'GAP REPORT', icon: '\uD83D\uDCCB', title: 'What is the ARK_GAPS_REPORT?',
      body: 'The ARK_GAPS_REPORT.md is a structured document included in every package. It lists every field that was missing, ambiguous, contradictory, or unverifiable in your intake. For each gap, it records: what was expected, what was found, the assessed risk, and the recommended next action. It is the most important document in the package for planning purposes.',
      meta: { updated: 'Core output', visibility: 'Public Knowledge' } },
  ],
  commercial: [
    { category: 'SCOPE BOUNDARY', icon: '\uD83D\uDD10', title: 'Is this a security audit?',
      body: 'No. Launch Ark produces a SECURITY_BASELINE.md that maps known security configurations from your intake. It does not perform penetration testing, vulnerability scanning, code review, or any active security assessment. It does not certify your application as secure. Security gaps are surfaced, not resolved.',
      meta: { updated: 'Hard boundary', visibility: 'Public Knowledge' } },
    { category: 'SCOPE BOUNDARY', icon: '\uD83D\uDCDC', title: 'Is this compliance certification?',
      body: 'No. Launch Ark does not certify compliance with any standard (SOC2, ISO 27001, GDPR, HIPAA, or other). It produces structured documentation that can support compliance preparation \u2014 but the documentation itself is not a certification, not a formal audit, and not a legal compliance record.',
      meta: { updated: 'Hard boundary', visibility: 'Public Knowledge' } },
    { category: 'SCOPE BOUNDARY', icon: '\uD83D\uDE80', title: 'Does this make my app production-ready?',
      body: 'No. Launch Ark documents your current project state \u2014 including its gaps. It does not implement fixes, deploy infrastructure, upgrade security, or resolve the issues it surfaces. A project with a large gaps report is better documented, not more production-ready. Acting on the gaps report is your responsibility.',
      meta: { updated: 'Hard boundary', visibility: 'Public Knowledge' } },
    { category: 'PAYMENT STATUS', icon: '\uD83D\uDCB3', title: 'Is payment active?',
      body: 'Payment and checkout are not yet enabled. All current requests are handled manually through the concierge pilot process. We confirm scope and price by email before any payment is discussed. You will never be charged before you agree to the final scope. No payment provider scripts are active on this site.',
      meta: { updated: 'Current state', visibility: 'Public Knowledge' } },
    { category: 'DELIVERY STATUS', icon: '\uD83D\uDCEC', title: 'Is delivery active?',
      body: 'Customer delivery is not yet authorized as a fully automated process. The current pipeline has passed synthetic end-to-end validation. Live customer intake, payment, and delivery remain separate gates that have not yet been opened. Pilot requests are handled manually on a case-by-case basis.',
      meta: { updated: 'Current state', visibility: 'Public Knowledge' } },
    { category: 'PIPELINE EVIDENCE', icon: '\u2699', title: 'What does synthetic pipeline validation mean?',
      body: 'The generation pipeline (intake validation \u2192 template mapping \u2192 gap detection \u2192 Markdown assembly \u2192 ZIP export) has been tested end-to-end using synthetic, fictional project data \u2014 not real customer data. This is internal quality evidence that the pipeline works as designed. It is not authorization to process real customer data, take payment, or claim live delivery readiness.',
      meta: { updated: 'Technical boundary', visibility: 'Public Knowledge' } },
  ],
};

const FAQTrustPage = ({ navigate }) => {
  const [activeCategory, setActiveCategory] = useState('security');

  const getArticles = () => {
    const lang = window.CURRENT_LANG || 'EN';
    if (lang === 'EN') return CANON_ARTICLES_EN;
    return (window.CANON_FAQ_ARTICLES && window.CANON_FAQ_ARTICLES[lang]) || CANON_ARTICLES_EN;
  };

  const trustMetrics = () => [
    { icon: '\uD83D\uDEE1', badge: S.tm1_badge, badgeColor: T.accent,  title: S.tm1_t, body: S.tm1_b, borderColor: T.accentDim },
    { icon: '\u2713',       badge: S.tm2_badge, badgeColor: T.teal,   title: S.tm2_t, body: S.tm2_b, borderColor: 'oklch(48% 0.13 195)' },
    { icon: '\u25cb',       badge: S.tm3_badge, badgeColor: T.muted,  title: S.tm3_t, body: S.tm3_b, borderColor: T.border },
    { icon: '\uD83D\uDCC4', badge: S.tm4_badge, badgeColor: T.muted,  title: S.tm4_t, body: S.tm4_b, borderColor: T.border },
  ];

  const categories = () => [
    { id: 'security',   label: S.fcat1, icon: '\uD83D\uDEE1' },
    { id: 'product',    label: S.fcat2, icon: '\uD83D\uDCCB' },
    { id: 'commercial', label: S.fcat3, icon: '\uD83C\uDFDB' },
  ];

  return (
    <div>
      {/* Hero */}
      <section style={{ background: T.bg, borderBottom: `1px solid ${T.border}` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '64px 40px 52px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
            <span style={{ color: T.accent, fontSize: 13 }}>{'\u2713'}</span>
            <span style={{ fontFamily: T.mono, fontSize: 10.5, color: T.accent, letterSpacing: '0.09em', textTransform: 'uppercase', fontWeight: 600 }}>{S.tc_meta}</span>
          </div>
          <h1 style={{ fontFamily: T.sans, fontSize: 48, fontWeight: 700, color: T.text, letterSpacing: '-0.03em', margin: '0 0 16px' }}>{S.tc_h1}</h1>
          <p style={{ fontFamily: T.sans, fontSize: 16, color: T.muted, lineHeight: 1.7, maxWidth: 560, margin: 0 }}>{S.tc_sub}</p>
        </div>
      </section>

      {/* Trust metric cards */}
      <section style={{ background: T.surface, borderBottom: `1px solid ${T.border}` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '48px 40px' }}>
          <div className="ark-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {trustMetrics().map((m, i) => (
              <div key={i} style={{ background: T.bg, border: `1px solid ${m.borderColor || T.border}`, borderRadius: 10, padding: 24 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
                  <span style={{ fontSize: 22 }}>{m.icon}</span>
                  <span style={{ fontFamily: T.mono, fontSize: 10, fontWeight: 700, color: m.badgeColor, padding: '2px 7px', borderRadius: 3, background: m.badgeColor + '22', letterSpacing: '0.04em' }}>{m.badge}</span>
                </div>
                <h3 style={{ fontFamily: T.sans, fontSize: 14.5, fontWeight: 700, color: T.text, margin: '0 0 8px' }}>{m.title}</h3>
                <p style={{ fontFamily: T.sans, fontSize: 12.5, color: T.muted, lineHeight: 1.6, margin: 0 }}>{m.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ sidebar + articles */}
      <section style={{ background: T.bg, borderBottom: `1px solid ${T.border}` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '56px 40px' }}>
          <div className="ark-faq-layout" style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 48 }}>
            {/* Sidebar */}
            <div className="ark-faq-sidebar">
              <div style={{ fontFamily: T.mono, fontSize: 10, color: T.dim, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 12 }}>{S.cats_label || 'CATEGORIES'}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 28 }}>
                {categories().map(cat => (
                  <button key={cat.id} onClick={() => setActiveCategory(cat.id)} style={{
                    display: 'flex', alignItems: 'center', gap: 10, padding: '9px 14px',
                    borderRadius: 7, border: 'none', cursor: 'pointer', textAlign: 'left',
                    background: activeCategory === cat.id ? T.accent : 'transparent',
                    color: activeCategory === cat.id ? 'white' : T.muted,
                    fontFamily: T.sans, fontSize: 13.5, fontWeight: activeCategory === cat.id ? 600 : 400,
                    transition: 'all 0.14s',
                  }}>
                    <span>{cat.icon}</span><span>{cat.label}</span>
                  </button>
                ))}
              </div>
              <div style={{ border: `1px solid ${T.border}`, borderRadius: 10, padding: 18, background: T.surface }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                  <span style={{ color: T.accent }}>{'\u2709'}</span>
                  <span style={{ fontFamily: T.sans, fontSize: 13, fontWeight: 600, color: T.text }}>{S.fcon_t}</span>
                </div>
                <p style={{ fontFamily: T.sans, fontSize: 12.5, color: T.muted, lineHeight: 1.6, margin: '0 0 14px' }}>{S.fcon_b}</p>
                <Btn size="sm" variant="secondary" style={{ width: '100%', justifyContent: 'center' }} onClick={() => navigate('order')}>
                  {S.fcon_btn}
                </Btn>
              </div>
            </div>

            {/* Articles */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
              {(getArticles()[activeCategory] || []).map((art, i) => (
                <div key={i} style={{ background: T.surface, border: `1px solid ${T.border}`, borderRadius: 12, padding: '28px 32px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                    <span style={{ width: 32, height: 32, borderRadius: 8, background: T.accentSubtle, border: `1px solid ${T.accentDim}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14 }}>{art.icon}</span>
                    <span style={{ fontFamily: T.mono, fontSize: 10, fontWeight: 700, color: T.accent, letterSpacing: '0.09em', textTransform: 'uppercase' }}>{art.category}</span>
                  </div>
                  <h2 style={{ fontFamily: T.sans, fontSize: 19, fontWeight: 700, color: T.text, letterSpacing: '-0.02em', margin: '0 0 12px' }}>{art.title}</h2>
                  <p style={{ fontFamily: T.sans, fontSize: 14, color: T.muted, lineHeight: 1.75, margin: 0 }}>{art.body}</p>
                  {art.quote && (
                    <blockquote style={{ margin: '16px 0 0', paddingLeft: 16, borderLeft: `3px solid ${T.border}`, fontFamily: T.sans, fontSize: 13.5, fontStyle: 'italic', color: T.muted, lineHeight: 1.65 }}>{art.quote}</blockquote>
                  )}
                  <div style={{ marginTop: 20, paddingTop: 16, borderTop: `1px solid ${T.border}`, display: 'flex', gap: 20 }}>
                    {[['рџ•ђ', art.meta.updated], ['рџ‘Ѓ', art.meta.visibility]].map(([icon, label], j) => (
                      <span key={j} style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: T.sans, fontSize: 12, color: T.dim }}>
                        <span>{icon}</span><span>{label}</span>
                      </span>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Boundary footer */}
      <section style={{ background: T.surface, borderBottom: `1px solid ${T.border}` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '48px 40px' }}>
          <div style={{ background: T.bg, border: `1px solid ${T.border}`, borderRadius: 14, padding: '40px 48px', textAlign: 'center' }}>
            <div style={{ width: 48, height: 48, borderRadius: '50%', background: T.accentSubtle, border: `1px solid ${T.accentDim}`, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px', fontSize: 20 }}>рџ¤ќ</div>
            <h2 style={{ fontFamily: T.sans, fontSize: 28, fontWeight: 700, color: T.text, letterSpacing: '-0.025em', margin: '0 0 12px' }}>{S.fc_h2}</h2>
            <p style={{ fontFamily: T.sans, fontSize: 14.5, color: T.muted, lineHeight: 1.68, margin: '0 auto 28px', maxWidth: 440 }}>{S.fc_sub}</p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
              <Btn onClick={() => navigate('order')}>{S.fc_btn1}</Btn>
              <Btn variant="secondary" onClick={() => navigate('home')}>{S.fc_btn2}</Btn>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

window.FAQTrustPage = FAQTrustPage;