// Sections 8–9: Get Started CTA + Footer

function GetStarted() {
  const paths = [
    {
      tag: 'path · 1', title: 'Join the waitlist',
      sub: 'early access · limited seats · private beta',
      cta: 'request access →',
      href: 'mailto:contact@fongos.net?subject=Fongos%20waitlist%20%E2%80%94%20early%20access&body=Hi%20Fongos%20team%2C%0A%0AI%27d%20like%20to%20join%20the%20waitlist.%0A%0AUse%20case%3A%20%0ATeam%20size%3A%20%0ATimeline%3A%20%0A%0AThanks.',
      detail: [
        'first in line when seats open',
        'quarterly progress briefings',
        'pricing announced in beta',
        'no commitment until onboarding',
      ],
      accent: FONGOS.cyan,
    },
    {
      tag: 'path · 2', title: 'Book a private demo',
      sub: 'live session · your use case · 30 minutes',
      cta: 'schedule a call →',
      href: 'mailto:contact@fongos.net?subject=Fongos%20%E2%80%94%20private%20demo%20request&body=Hi%20Fongos%20team%2C%0A%0AI%27d%20like%20to%20book%20a%2030-min%20private%20demo.%0A%0AWorkflow%20I%27d%20bring%3A%20%0AAvailability%3A%20%0A%0AThanks.',
      detail: [
        'watch fongos run live',
        'bring a real workflow',
        'Q&A with the team',
        'decide if the trade fits',
      ],
      accent: FONGOS.purpleSoft,
      featured: true,
    },
    {
      tag: 'path · 3', title: 'Talk to our team',
      sub: 'fleet deployments · custom integrations · SLA',
      cta: 'contact sales →',
      href: 'mailto:contact@fongos.net?subject=Fongos%20%E2%80%94%20fleet%20%2F%20enterprise%20inquiry&body=Hi%20Fongos%20team%2C%0A%0AInterested%20in%20a%20fleet%20deployment.%0A%0ACompany%3A%20%0ASeats%3A%20%0ANetwork%20%2F%20compliance%20notes%3A%20%0A%0AThanks.',
      detail: [
        'pre-configured workstations',
        'on your network, your rules',
        'managed updates · enterprise support',
        'volume pricing',
      ],
      accent: FONGOS.ink,
    },
  ];

  return (
    <section id="install" style={{
      padding: '140px 40px', borderBottom: `1px solid ${FONGOS.line}`,
      position: 'relative',
      background: `radial-gradient(ellipse at top, ${FONGOS.purple}12 0%, transparent 60%)`,
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionLabel num="09" name="Get started"/>
        <Headline size={72} style={{ marginBottom: 16, maxWidth: 820 }}>
          Three ways in.<br/>
          <span style={{ color: FONGOS.inkDim }}>Pick yours.</span>
        </Headline>
        <p style={{ fontSize: 15, color: FONGOS.inkDim, maxWidth: 540, margin: '0 0 56px', lineHeight: 1.55 }}>
          Fongos is a commercial product, in private beta. We're onboarding teams one at a time. Pick the way in that fits.
        </p>

        <div className="fg-paths" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {paths.map((p) => (
            <a key={p.title} href={p.href} style={{
              background: p.featured ? `linear-gradient(180deg, ${FONGOS.purple}12, ${FONGOS.surface})` : FONGOS.surface,
              border: `1px solid ${p.featured ? FONGOS.purple+'55' : FONGOS.line}`,
              padding: '32px 28px 28px', textDecoration: 'none',
              display: 'flex', flexDirection: 'column', position: 'relative',
              transition: 'transform 0.2s, border-color 0.2s',
            }} className="fg-path-card">
              {p.featured && (
                <div style={{
                  position: 'absolute', top: -1, right: 20,
                  fontFamily: FONGOS.mono, fontSize: 9, letterSpacing: '0.22em',
                  color: FONGOS.bg, background: FONGOS.purpleSoft,
                  padding: '4px 10px', textTransform: 'uppercase',
                }}>recommended</div>
              )}
              <div style={{
                fontFamily: FONGOS.mono, fontSize: 10, letterSpacing: '0.22em',
                color: p.accent, textTransform: 'uppercase', marginBottom: 18,
              }}>{p.tag}</div>
              <div style={{ fontSize: 28, fontWeight: 300, color: FONGOS.ink, letterSpacing: '-0.02em', marginBottom: 10, lineHeight: 1.15 }}>
                {p.title}
              </div>
              <div style={{ fontFamily: FONGOS.mono, fontSize: 11, color: FONGOS.inkFaint, letterSpacing: '0.08em', marginBottom: 24, lineHeight: 1.6 }}>
                {p.sub}
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, flexGrow: 1, display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }}>
                {p.detail.map((d) => (
                  <li key={d} style={{ display: 'flex', gap: 10, fontSize: 13, color: FONGOS.inkDim, fontFamily: FONGOS.mono }}>
                    <span style={{ color: p.accent, flexShrink: 0 }}>▸</span>
                    <span>{d}</span>
                  </li>
                ))}
              </ul>
              <div style={{
                paddingTop: 18, borderTop: `1px solid ${FONGOS.line}`,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                fontSize: 13, color: FONGOS.ink, fontFamily: FONGOS.sans,
              }}>
                <span>{p.cta}</span>
                <span style={{ fontFamily: FONGOS.mono, color: p.accent }}>↗</span>
              </div>
            </a>
          ))}
        </div>

        <div style={{
          marginTop: 48, display:'flex', justifyContent:'center', alignItems:'center', gap: 14,
          fontFamily: FONGOS.mono, fontSize: 12, letterSpacing: '0.12em',
          color: FONGOS.inkDim,
        }}>
          <span style={{ width: 28, height: 1, background: FONGOS.line }}/>
          <span style={{ textTransform:'uppercase', color: FONGOS.inkFaint }}>or write to us directly</span>
          <a href="mailto:contact@fongos.net?subject=Fongos%20%E2%80%94%20hello" style={{
            color: FONGOS.ink, textDecoration:'none',
            borderBottom: `1px solid ${FONGOS.purpleSoft}55`, paddingBottom: 2,
          }}>contact@fongos.net</a>
          <span style={{ width: 28, height: 1, background: FONGOS.line }}/>
        </div>

        <p style={{
          marginTop: 64, textAlign: 'center',
          fontFamily: FONGOS.mono, fontSize: 11, letterSpacing: '0.15em',
          color: FONGOS.inkFaint, textTransform: 'uppercase', lineHeight: 1.8,
        }}>
          it remembers what you told him three weeks ago.<br/>
          <span style={{ color: FONGOS.inkDim }}>he finds his own bugs. we were there when it happened.</span>
        </p>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{
      padding: '80px 40px 60px',
      background: FONGOS.bg,
      position: 'relative',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div className="fg-footer-grid" style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48,
          marginBottom: 64, alignItems: 'start',
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
              <svg width="40" height="40" style={{ animation: 'fongosMushroomFloat 4s ease-in-out infinite' }}>
                <use href="#mushroom-logo"/>
              </svg>
              <span style={{ fontFamily: FONGOS.mono, fontSize: 14, letterSpacing: '0.22em', color: FONGOS.ink }}>FONGOS</span>
            </div>
            <p style={{ fontSize: 13, color: FONGOS.inkDim, lineHeight: 1.65, margin: '0 0 20px', maxWidth: 340 }}>
              an autonomous agent that uses your computer instead of you. he watches, remembers, learns — and helps when he's sure.
            </p>
            <div style={{ fontFamily: FONGOS.mono, fontSize: 10, letterSpacing: '0.15em', color: FONGOS.inkFaint, textTransform: 'uppercase' }}>
              private beta · invite only · windows today · macOS + linux coming
            </div>
          </div>

          {[
            { t: 'learn', ls: [['how it works','#architecture'],['compare','#compare'],['proof','#proof'],['faq','#faq']] },
            { t: 'product', ls: [['waitlist','#install'],['self-correction','#demo'],['moments','#moments'],['who is fongos','#who']] },
            { t: 'company', ls: [['about','#who'],['sales','mailto:contact@fongos.net?subject=Fongos%20%E2%80%94%20sales%20inquiry'],['contact','mailto:contact@fongos.net'],['press','mailto:contact@fongos.net?subject=Fongos%20%E2%80%94%20press%20inquiry']] },
          ].map((col) => (
            <div key={col.t}>
              <div style={{ fontFamily: FONGOS.mono, fontSize: 10, letterSpacing: '0.22em', color: FONGOS.inkFaint, textTransform: 'uppercase', marginBottom: 18 }}>
                {col.t}
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {col.ls.map(([label, href]) => (
                  <li key={label}><a href={href} style={{ color: FONGOS.inkDim, textDecoration: 'none', fontSize: 13 }}>{label}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Easter egg line */}
        <div style={{
          padding: '20px 0', borderTop: `1px solid ${FONGOS.line}`,
          borderBottom: `1px solid ${FONGOS.line}`,
          display: 'flex', alignItems: 'center', gap: 12,
          fontFamily: FONGOS.mono, fontSize: 12, color: FONGOS.inkDim,
        }}>
          <span style={{ color: FONGOS.purpleSoft }}>&gt;</span>
          <span>fongos watched this page render. He has thoughts.</span>
          <span style={{ width: 8, height: 14, background: FONGOS.ink, animation: 'fongosBlink 1s step-end infinite' }}/>
        </div>

        <div className="fg-footer-bottom" style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          marginTop: 28, flexWrap: 'wrap', gap: 16,
          fontFamily: FONGOS.mono, fontSize: 10, letterSpacing: '0.18em',
          color: FONGOS.inkFaint, textTransform: 'uppercase',
        }}>
          <span>© 2026 fongos inc. · all rights reserved</span>
          <a href="mailto:contact@fongos.net" style={{ color: FONGOS.inkDim, textDecoration:'none', letterSpacing:'0.18em' }}>contact@fongos.net</a>
          <span>v0.9.1 · build a3f7e2 · 04.19.26</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { GetStarted, Footer });