const { useState } = React; const MonoLabel = ({ children, color }) => (
{children}
); // ── 1. Hero ─────────────────────────────────────────────────────────────────── const HeroSection = ({ navigate }) => (
{S.hero_badge}

{S.hero_h1a} {S.hero_h1b} {S.hero_h1c}

{S.hero_sub}

navigate('order')}>{S.hero_cta1} navigate('faq')}>{S.hero_cta2}
● {S.hero_trust}
Launch Ark — continuity package illustration
); // ── 2. Problem ──────────────────────────────────────────────────────────────── const ProblemSection = () => { const cards = () => [ { title: S.prob_c1_t, icon: '\u25b3', impact: 'HIGH', body: S.prob_c1_b }, { title: S.prob_c2_t, icon: '\uD83D\uDD12', impact: 'CRITICAL', body: S.prob_c2_b }, { title: S.prob_c3_t, icon: '\u229e', impact: 'HIGH', body: S.prob_c3_b }, ]; const badgeColors = { HIGH: { bg: 'oklch(96% 0.04 25)', color: 'oklch(45% 0.22 25)', border: 'oklch(88% 0.08 25)' }, CRITICAL: { bg: 'oklch(94% 0.05 25)', color: 'oklch(38% 0.22 25)', border: 'oklch(82% 0.10 25)' }, }; return (
{S.prob_label}

{S.prob_h2}

{S.prob_sub}

{cards().map((c, i) => { const bc = badgeColors[c.impact] || badgeColors.HIGH; return (

{c.title}

{c.icon}

{c.body}

{c.impact === 'HIGH' ? S.impact_high : S.impact_crit}
); })}
); }; // ── 3. Offer ────────────────────────────────────────────────────────────────── const OfferSection = () => { const attrs = () => [ { label: S.offer_a1, positive: true }, { label: S.offer_a2, positive: true }, { label: S.offer_a3, positive: true }, { label: S.offer_a4, positive: true }, { label: S.offer_a5, positive: false }, { label: S.offer_a6, positive: false }, { label: S.offer_a7, positive: false }, ]; return (
{S.offer_label}

{S.offer_h2}

{S.offer_p1}

{S.offer_p2}

{S.offer_attrs_label}
{attrs().map((a, i) => (
{a.positive ? '\u2713' : '\u25cb'} {a.label}
))}
); }; // ── 4. What you get ─────────────────────────────────────────────────────────── const WhatYouGetSection = () => { const modules = [ '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','DELETION_RECEIPT.md', ]; return (
{S.get_label}

{S.get_h2}

{S.get_sub}

{modules.map((m, i) => (
● {m}
))}
{S.get_note}
); }; // ── 5. Visible Gap Example ──────────────────────────────────────────────────── const VisibleGapSection = () => (
{S.egap_label}

{S.egap_h2}

{S.egap_sub}

{['oklch(64% 0.18 25)','oklch(70% 0.18 75)','oklch(64% 0.18 145)'].map((c,i) => (
))}
ARK_GAPS_REPORT.md {S.egap_synth}
{[ ['field', 'backup_restore_tested', 'oklch(72% 0.01 240)'], ['evidence', 'not confirmed', 'oklch(70% 0.15 75)'], ['risk', 'Recovery may exist only as an assumption. Restore has not been tested under real conditions.', 'oklch(62% 0.18 25)'], ['output', 'GAP_RESTORE_NOT_TESTED', 'oklch(64% 0.22 240)'], ['next_action', 'Perform and document a restore test before claiming recovery readiness.', 'oklch(64% 0.18 145)'], ].map(([k, v, c], i) => (
{k}: {v}
))}
); // ── 6. How it works ─────────────────────────────────────────────────────────── const HowItWorksSection = () => { const steps = () => [ { num: '01', title: S.how_s1_t, body: S.how_s1_b }, { num: '02', title: S.how_s2_t, body: S.how_s2_b }, { num: '03', title: S.how_s3_t, body: S.how_s3_b }, { num: '04', title: S.how_s4_t, body: S.how_s4_b }, { num: '05', title: S.how_s5_t, body: S.how_s5_b }, ]; return (
{S.how_label}

{S.how_h2}

{S.how_sub}

{steps().map((s, i) => (
STEP {s.num}

{s.title}

{s.body}

))}
); }; // ── 7. What we do NOT do ────────────────────────────────────────────────────── const WhatWeDoNotDoSection = () => { const items = () => [ S.dont_1, S.dont_2, S.dont_3, S.dont_4, S.dont_5, S.dont_6, S.dont_7, S.dont_8, S.dont_9, S.dont_10, ]; return (
{S.dont_label}

{S.dont_h2}

{items().map((item, i) => (
{'\u2715'} {item}
))}
{'\u2192'} {S.dont_pos_label}{' '}{S.dont_pos}
); }; // ── 8. Who for / not for ────────────────────────────────────────────────────── const WhoForSection = () => { const forItems = () => [S.wf_1, S.wf_2, S.wf_3, S.wf_4, S.wf_5, S.wf_6]; const notForItems = () => [S.wf_not_1, S.wf_not_2, S.wf_not_3, S.wf_not_4, S.wf_not_5, S.wf_not_6]; return (
{S.wf_label}

{S.wf_h2}

{forItems().map((item, i) => (
{'\u2713'} {item}
))}
{S.wf_not_label}

{S.wf_not_h2}

{notForItems().map((item, i) => (
{'\u25cb'} {item}
))}
); }; // ── 9. Pipeline status ──────────────────────────────────────────────────────── const PipelineSection = () => { const rows = () => [ { label: S.pipe_r1_l, status: S.pipe_r1_s, ok: true }, { label: S.pipe_r2_l, status: S.pipe_r2_s, ok: false }, { label: S.pipe_r3_l, status: S.pipe_r3_s, ok: false }, { label: S.pipe_r4_l, status: S.pipe_r4_s, ok: false }, { label: S.pipe_r5_l, status: S.pipe_r5_s, ok: false }, ]; return (
{S.pipe_label}

{S.pipe_h2}

{S.pipe_sub}

{S.pipe_note}
{rows().map((row, i) => (
{row.label} {row.status}
))}
); }; // ── 10. Safe CTA ────────────────────────────────────────────────────────────── const CTASection = ({ navigate }) => (

{S.cta_h2}

{S.cta_sub}

navigate('order')}>{S.cta_order} navigate('pricing')}>{S.cta_pricing}

{S.cta_note}

); const LandingPage = ({ navigate }) => (
); window.LandingPage = LandingPage;