const { useState } = React;

const MonoLabel = ({ children, color }) => (
  <div style={{ fontFamily: T.mono, fontSize: 10.5, color: color || T.accent, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8 }}>
    {children}
  </div>
);

// ── 1. Hero ───────────────────────────────────────────────────────────────────
const HeroSection = ({ navigate }) => (
  <section style={{ background: T.bg, borderBottom: `1px solid ${T.border}` }}>
    <div className="ark-hero-grid" style={{ maxWidth: 1100, margin: '0 auto', padding: '80px 40px 60px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
      <div>
        <div style={{ marginBottom: 20 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '4px 12px', borderRadius: 4, background: T.accentSubtle, border: `1px solid ${T.accentDim}`, fontFamily: T.mono, fontSize: 11, color: T.accent, fontWeight: 600, letterSpacing: '0.05em' }}>
            {S.hero_badge}
          </span>
        </div>
        <h1 className="ark-hero-h1" style={{ fontFamily: T.sans, fontSize: 44, fontWeight: 700, color: T.text, lineHeight: 1.1, letterSpacing: '-0.03em', margin: '0 0 20px' }}>
          {S.hero_h1a} {S.hero_h1b} {S.hero_h1c}
        </h1>
        <p style={{ fontFamily: T.sans, fontSize: 16, color: T.muted, lineHeight: 1.72, margin: '0 0 28px', maxWidth: 460 }}>
          {S.hero_sub}
        </p>
        <div className="ark-hero-cta" style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 24 }}>
          <Btn size="lg" onClick={() => navigate('order')}>{S.hero_cta1}</Btn>
          <Btn variant="secondary" size="lg" onClick={() => navigate('faq')}>{S.hero_cta2}</Btn>
        </div>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', borderRadius: 5, background: T.surface, border: `1px solid ${T.border}`, fontFamily: T.mono, fontSize: 11.5 }}>
          <span style={{ color: T.accent, fontSize: 8 }}>●</span>
          <span style={{ color: T.muted }}>{S.hero_trust}</span>
        </div>
      </div>
      <div className="ark-hero-img" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px 0' }}>
        <img
          src={window.__resources && window.__resources.heroImg ? window.__resources.heroImg : 'ark-hero-illustration.png'}
          alt="Launch Ark — continuity package illustration"
          style={{ width: '100%', maxWidth: 460, height: 'auto', objectFit: 'contain', userSelect: 'none' }} />
      </div>
    </div>
  </section>
);

// ── 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 (
    <section style={{ background: T.surface, borderBottom: `1px solid ${T.border}` }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '72px 40px' }}>
        <MonoLabel>{S.prob_label}</MonoLabel>
        <h2 style={{ fontFamily: T.sans, fontSize: 34, fontWeight: 700, color: T.text, letterSpacing: '-0.025em', margin: '0 0 8px', maxWidth: 680 }}>{S.prob_h2}</h2>
        <p style={{ fontFamily: T.sans, fontSize: 15, color: T.muted, lineHeight: 1.72, margin: '0 0 40px', maxWidth: 680 }}>{S.prob_sub}</p>
        <div className="ark-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {cards().map((c, i) => {
            const bc = badgeColors[c.impact] || badgeColors.HIGH;
            return (
              <div key={i} style={{ background: T.bg, border: `1px solid ${T.border}`, borderRadius: 10, padding: 28, display: 'flex', flexDirection: 'column' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
                  <h3 style={{ fontFamily: T.sans, fontSize: 16, fontWeight: 600, color: T.text, margin: 0 }}>{c.title}</h3>
                  <span style={{ fontSize: 16, color: T.muted }}>{c.icon}</span>
                </div>
                <p style={{ fontFamily: T.sans, fontSize: 13.5, color: T.muted, lineHeight: 1.68, flex: 1, margin: '0 0 20px' }}>{c.body}</p>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 8px', borderRadius: 3, background: bc.bg, border: `1px solid ${bc.border}`, fontFamily: T.mono, fontSize: 10, fontWeight: 700, color: bc.color, letterSpacing: '0.06em', alignSelf: 'flex-start' }}>
                  {c.impact === 'HIGH' ? S.impact_high : S.impact_crit}
                </span>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ── 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 (
    <section style={{ background: T.bg, borderBottom: `1px solid ${T.border}` }}>
      <div className="ark-grid-2" style={{ maxWidth: 1100, margin: '0 auto', padding: '72px 40px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
        <div>
          <MonoLabel>{S.offer_label}</MonoLabel>
          <h2 style={{ fontFamily: T.sans, fontSize: 34, fontWeight: 700, color: T.text, letterSpacing: '-0.025em', margin: '0 0 20px' }}>{S.offer_h2}</h2>
          <p style={{ fontFamily: T.sans, fontSize: 15, color: T.muted, lineHeight: 1.75, margin: '0 0 16px' }}>{S.offer_p1}</p>
          <p style={{ fontFamily: T.sans, fontSize: 15, color: T.muted, lineHeight: 1.75, margin: 0 }}>{S.offer_p2}</p>
        </div>
        <div style={{ background: T.surface, border: `1px solid ${T.border}`, borderRadius: 12, padding: 32 }}>
          <div style={{ fontFamily: T.mono, fontSize: 10.5, color: T.muted, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 20 }}>{S.offer_attrs_label}</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {attrs().map((a, i) => (
              <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'center', paddingBottom: i === 3 ? 16 : 0, borderBottom: i === 3 ? `1px solid ${T.border}` : 'none', marginBottom: i === 3 ? 4 : 0 }}>
                <span style={{ color: a.positive ? T.accent : T.dim, fontSize: 13, fontFamily: T.mono, flexShrink: 0 }}>{a.positive ? '\u2713' : '\u25cb'}</span>
                <span style={{ fontFamily: T.sans, fontSize: 14, color: a.positive ? T.text : T.dim, fontWeight: a.positive ? 500 : 400 }}>{a.label}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ── 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 (
    <section style={{ background: T.surface, borderBottom: `1px solid ${T.border}` }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '72px 40px' }}>
        <MonoLabel>{S.get_label}</MonoLabel>
        <h2 style={{ fontFamily: T.sans, fontSize: 34, fontWeight: 700, color: T.text, letterSpacing: '-0.025em', margin: '0 0 8px' }}>{S.get_h2}</h2>
        <p style={{ fontFamily: T.sans, fontSize: 15, color: T.muted, margin: '0 0 36px', lineHeight: 1.7, maxWidth: 600 }}>{S.get_sub}</p>
        <div className="ark-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 24 }}>
          {modules.map((m, i) => (
            <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'center', background: T.bg, border: `1px solid ${T.border}`, borderRadius: 7, padding: '11px 16px' }}>
              <span style={{ color: T.accent, fontSize: 10 }}>●</span>
              <span style={{ fontFamily: T.mono, fontSize: 11.5, color: T.text }}>{m}</span>
            </div>
          ))}
        </div>
        <div style={{ background: T.accentSubtle, border: `1px solid ${T.accentDim}`, borderRadius: 8, padding: '12px 18px', fontFamily: T.sans, fontSize: 13.5, color: T.muted, lineHeight: 1.6 }}>
          {S.get_note}
        </div>
      </div>
    </section>
  );
};

// ── 5. Visible Gap Example ────────────────────────────────────────────────────
const VisibleGapSection = () => (
  <section style={{ background: T.bg, borderBottom: `1px solid ${T.border}` }}>
    <div style={{ maxWidth: 1100, margin: '0 auto', padding: '72px 40px' }}>
      <MonoLabel>{S.egap_label}</MonoLabel>
      <h2 style={{ fontFamily: T.sans, fontSize: 34, fontWeight: 700, color: T.text, letterSpacing: '-0.025em', margin: '0 0 8px' }}>{S.egap_h2}</h2>
      <p style={{ fontFamily: T.sans, fontSize: 15, color: T.muted, margin: '0 0 36px' }}>{S.egap_sub}</p>
      <div style={{ maxWidth: 640 }}>
        <div style={{ background: 'oklch(11% 0.015 240)', border: '1px solid oklch(22% 0.02 240)', borderRadius: 10, overflow: 'hidden' }}>
          <div style={{ background: 'oklch(16% 0.018 240)', padding: '10px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid oklch(22% 0.02 240)' }}>
            <div style={{ display: 'flex', gap: 8 }}>
              {['oklch(64% 0.18 25)','oklch(70% 0.18 75)','oklch(64% 0.18 145)'].map((c,i) => (
                <div key={i} style={{ width: 10, height: 10, borderRadius: '50%', background: c }} />
              ))}
            </div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
              <span style={{ fontFamily: T.mono, fontSize: 11, color: 'oklch(40% 0.01 240)' }}>ARK_GAPS_REPORT.md</span>
              <span style={{ padding: '2px 8px', borderRadius: 3, background: 'oklch(18% 0.05 75)', border: '1px solid oklch(30% 0.08 75)', fontFamily: T.mono, fontSize: 9, color: 'oklch(70% 0.15 75)', letterSpacing: '0.06em', fontWeight: 700 }}>{S.egap_synth}</span>
            </div>
          </div>
          <div style={{ padding: '20px 24px', display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              ['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) => (
              <div key={i} style={{ display: 'flex', gap: 16 }}>
                <span style={{ fontFamily: T.mono, fontSize: 11, color: 'oklch(40% 0.01 240)', minWidth: 92, paddingTop: 1 }}>{k}:</span>
                <span style={{ fontFamily: T.mono, fontSize: 12, color: c, lineHeight: 1.6 }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ── 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 (
    <section style={{ background: T.surface, borderBottom: `1px solid ${T.border}` }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '72px 40px' }}>
        <MonoLabel>{S.how_label}</MonoLabel>
        <h2 style={{ fontFamily: T.sans, fontSize: 34, fontWeight: 700, color: T.text, letterSpacing: '-0.025em', margin: '0 0 8px' }}>{S.how_h2}</h2>
        <p style={{ fontFamily: T.sans, fontSize: 15, color: T.muted, margin: '0 0 40px' }}>{S.how_sub}</p>
        <div className="ark-grid-5" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>
          {steps().map((s, i) => (
            <div key={i} style={{ background: T.bg, border: `1px solid ${T.border}`, borderRadius: 10, padding: '22px 20px', display: 'flex', flexDirection: 'column' }}>
              <div style={{ fontFamily: T.mono, fontSize: 10, color: T.accent, letterSpacing: '0.08em', marginBottom: 8 }}>STEP {s.num}</div>
              <h3 style={{ fontFamily: T.sans, fontSize: 15, fontWeight: 700, color: T.text, margin: '0 0 10px' }}>{s.title}</h3>
              <p style={{ fontFamily: T.sans, fontSize: 12.5, color: T.muted, lineHeight: 1.65, margin: 0, flex: 1 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── 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 (
    <section style={{ background: T.bg, borderBottom: `1px solid ${T.border}` }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '72px 40px' }}>
        <MonoLabel>{S.dont_label}</MonoLabel>
        <h2 style={{ fontFamily: T.sans, fontSize: 34, fontWeight: 700, color: T.text, letterSpacing: '-0.025em', margin: '0 0 36px' }}>{S.dont_h2}</h2>
        <div className="ark-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 28 }}>
          {items().map((item, i) => (
            <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', background: T.surface, border: `1px solid ${T.border}`, borderRadius: 8, padding: '12px 16px' }}>
              <span style={{ color: T.red, fontSize: 13, fontFamily: T.mono, flexShrink: 0, marginTop: 1 }}>{'\u2715'}</span>
              <span style={{ fontFamily: T.sans, fontSize: 13.5, color: T.muted, lineHeight: 1.5 }}>{item}</span>
            </div>
          ))}
        </div>
        <div style={{ background: T.accentSubtle, border: `1px solid ${T.accentDim}`, borderRadius: 10, padding: '20px 28px', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
          <span style={{ color: T.accent, fontSize: 18, flexShrink: 0 }}>{'\u2192'}</span>
          <span style={{ fontFamily: T.sans, fontSize: 14.5, color: T.text, lineHeight: 1.7 }}>
            <strong>{S.dont_pos_label}</strong>{' '}{S.dont_pos}
          </span>
        </div>
      </div>
    </section>
  );
};

// ── 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 (
    <section style={{ background: T.surface, borderBottom: `1px solid ${T.border}` }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '72px 40px' }}>
        <div className="ark-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56 }}>
          <div>
            <MonoLabel>{S.wf_label}</MonoLabel>
            <h2 style={{ fontFamily: T.sans, fontSize: 26, fontWeight: 700, color: T.text, letterSpacing: '-0.02em', margin: '0 0 28px', lineHeight: 1.25 }}>{S.wf_h2}</h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {forItems().map((item, i) => (
                <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <span style={{ color: T.accent, fontSize: 12, flexShrink: 0, marginTop: 3 }}>{'\u2713'}</span>
                  <span style={{ fontFamily: T.sans, fontSize: 14, color: T.muted, lineHeight: 1.5 }}>{item}</span>
                </div>
              ))}
            </div>
          </div>
          <div>
            <MonoLabel color={T.muted}>{S.wf_not_label}</MonoLabel>
            <h2 style={{ fontFamily: T.sans, fontSize: 26, fontWeight: 700, color: T.text, letterSpacing: '-0.02em', margin: '0 0 28px', lineHeight: 1.25 }}>{S.wf_not_h2}</h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {notForItems().map((item, i) => (
                <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <span style={{ color: T.dim, fontSize: 12, flexShrink: 0, marginTop: 3 }}>{'\u25cb'}</span>
                  <span style={{ fontFamily: T.sans, fontSize: 14, color: T.dim, lineHeight: 1.5 }}>{item}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ── 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 (
    <section style={{ background: T.bg, borderBottom: `1px solid ${T.border}` }}>
      <div className="ark-grid-2" style={{ maxWidth: 1100, margin: '0 auto', padding: '72px 40px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
        <div>
          <MonoLabel>{S.pipe_label}</MonoLabel>
          <h2 style={{ fontFamily: T.sans, fontSize: 26, fontWeight: 700, color: T.text, letterSpacing: '-0.02em', margin: '0 0 16px' }}>{S.pipe_h2}</h2>
          <p style={{ fontFamily: T.sans, fontSize: 14, color: T.muted, lineHeight: 1.72, margin: '0 0 20px' }}>{S.pipe_sub}</p>
          <div style={{ background: T.accentSubtle, border: `1px solid ${T.accentDim}`, borderRadius: 8, padding: '14px 18px', fontFamily: T.sans, fontSize: 13, color: T.muted, lineHeight: 1.65 }}>
            <strong style={{ color: T.text }}>{S.pipe_note}</strong>
          </div>
        </div>
        <div style={{ background: T.surface, border: `1px solid ${T.border}`, borderRadius: 10, overflow: 'hidden' }}>
          {rows().map((row, i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 20px', borderBottom: i < rows().length - 1 ? `1px solid ${T.border}` : 'none', background: i % 2 === 0 ? T.surface : T.bg }}>
              <span style={{ fontFamily: T.mono, fontSize: 12, color: T.muted }}>{row.label}</span>
              <span style={{ fontFamily: T.mono, fontSize: 10.5, fontWeight: 700, color: row.ok ? T.accent : T.dim, padding: '2px 8px', borderRadius: 3, background: row.ok ? T.accentSubtle : T.surfaceRaised, border: `1px solid ${row.ok ? T.accentDim : T.border}`, letterSpacing: '0.04em' }}>
                {row.status}
              </span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── 10. Safe CTA ──────────────────────────────────────────────────────────────
const CTASection = ({ navigate }) => (
  <section style={{ background: T.surface, borderBottom: `1px solid ${T.border}` }}>
    <div style={{ maxWidth: 1100, margin: '0 auto', padding: '64px 40px' }}>
      <div style={{ border: `1px solid ${T.border}`, borderRadius: 14, padding: '56px 48px', textAlign: 'center', background: T.bg }}>
        <h2 style={{ fontFamily: T.sans, fontSize: 38, fontWeight: 700, color: T.text, letterSpacing: '-0.03em', margin: '0 0 14px' }}>{S.cta_h2}</h2>
        <p style={{ fontFamily: T.sans, fontSize: 15, color: T.muted, lineHeight: 1.68, margin: '0 auto 32px', maxWidth: 480 }}>{S.cta_sub}</p>
        <div className="ark-cta-btns" style={{ display: 'flex', gap: 12, justifyContent: 'center', marginBottom: 16 }}>
          <Btn size="lg" onClick={() => navigate('order')}>{S.cta_order}</Btn>
          <Btn variant="secondary" size="lg" onClick={() => navigate('pricing')}>{S.cta_pricing}</Btn>
        </div>
        <p style={{ fontFamily: T.mono, fontSize: 10.5, color: T.dim, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{S.cta_note}</p>
      </div>
    </div>
  </section>
);

const LandingPage = ({ navigate }) => (
  <div>
    <HeroSection navigate={navigate} />
    <ProblemSection />
    <OfferSection />
    <WhatYouGetSection />
    <VisibleGapSection />
    <HowItWorksSection />
    <WhatWeDoNotDoSection />
    <WhoForSection />
    <PipelineSection />
    <CTASection navigate={navigate} />
  </div>
);

window.LandingPage = LandingPage;
