// CTA — closing moment + install + footer
const CTA = () => {
  return (
    <section id="install" style={{
      padding: 'clamp(80px, 14vh, 200px) 0 clamp(60px, 10vh, 140px)',
      position: 'relative',
      overflow: 'hidden',
      borderTop: '1px solid var(--rule)',
    }}>
      {/* Giant background word */}
      <div aria-hidden style={{
        position: 'absolute',
        left: 'calc(50% - 2vw)',
        bottom: '-12vw',
        transform: 'translateX(-50%)',
        fontFamily: 'var(--serif)',
        fontStyle: 'italic',
        fontSize: 'clamp(180px, 32vw, 540px)',
        lineHeight: 0.8,
        color: 'var(--paper-3)',
        opacity: 0.55,
        userSelect: 'none',
        pointerEvents: 'none',
        whiteSpace: 'nowrap',
        letterSpacing: '-0.04em',
      }}>
        ship&nbsp;it.
      </div>

      <div className="container" style={{position:'relative', zIndex: 2}}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(120px, 200px) 1fr',
          gap: 'clamp(24px, 5vw, 64px)',
          alignItems: 'baseline',
          marginBottom: 'clamp(36px, 6vh, 80px)',
        }}>
          <div className="eyebrow"><span className="dot"></span> 06 — Get started</div>
          <h2 className="display h-xl" style={{maxWidth: '13ch'}}>
            Your code is <span className="it">done.</span><br/>
            Now let pitchkit<br/>
            <span style={{color: 'var(--vermillion)'}}>launch it.</span>
          </h2>
        </div>

        <div style={{
          display:'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 'clamp(24px, 4vw, 64px)',
          alignItems: 'end',
        }} className="cta-grid">
          <div>
            <p style={{fontSize: 18, lineHeight: 1.55, color: 'var(--ink-2)', maxWidth: 44*16, marginBottom: 28}}>
              Two commands. Five minutes. A promo film, a deck, a landing page —
              all rendered locally, all yours to ship.
            </p>
            <div style={{display:'flex', gap: 14, flexWrap:'wrap'}}>
              <a href="https://github.com" className="btn btn-primary">
                <Icon.Github size={14} />
                Star on GitHub
                <Icon.Arrow className="arrow" />
              </a>
              <a href="#" className="btn btn-ghost">
                Read the docs
              </a>
            </div>
            <div className="mono" style={{
              marginTop: 24,
              fontSize: 11,
              letterSpacing: '0.16em',
              textTransform: 'uppercase',
              color: 'var(--ink-mute)',
              display: 'flex', gap: 18, flexWrap:'wrap',
            }}>
              <span>★ 8.4k stars</span>
              <span>· 142 contributors</span>
              <span>· v0.4.2 · MIT</span>
            </div>
          </div>

          {/* Install card */}
          <div style={{
            background: 'var(--ink)',
            color: 'var(--paper)',
            borderRadius: 14,
            padding: '22px 24px',
            fontFamily: 'var(--mono)',
            fontSize: 13,
            lineHeight: 1.7,
            boxShadow: '0 30px 80px -30px rgba(20,15,10,0.4)',
          }}>
            <div style={{
              display:'flex',
              justifyContent:'space-between',
              alignItems:'center',
              borderBottom: '1px solid color-mix(in srgb, var(--paper) 14%, transparent)',
              paddingBottom: 12,
              marginBottom: 14,
              fontSize: 10,
              letterSpacing: '0.16em',
              textTransform: 'uppercase',
              color: 'color-mix(in srgb, var(--paper) 55%, transparent)',
            }}>
              <span>install · two commands</span>
              <button onClick={() => navigator.clipboard && navigator.clipboard.writeText('npx pitchkit init && claude run pitchkit')} style={{
                color:'var(--vermillion)',
                fontFamily:'var(--mono)',
                fontSize:10,
                letterSpacing:'0.16em',
                textTransform:'uppercase',
              }}>copy ↗</button>
            </div>
            <div><span style={{color:'var(--vermillion)'}}>$</span> npx pitchkit init</div>
            <div><span style={{color:'var(--vermillion)'}}>$</span> claude run pitchkit</div>
            <div style={{height: 10}}/>
            <div style={{color:'color-mix(in srgb, var(--paper) 55%, transparent)'}}># or in Cursor:</div>
            <div><span style={{color:'var(--vermillion)'}}>$</span> cursor agent pitchkit</div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 860px) {
          .cta-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

const Footer = () => (
  <footer>
    <div className="container">
      <div style={{
        display: 'grid',
        gridTemplateColumns: '2fr 1fr 1fr 1fr',
        gap: 40,
        paddingBottom: 56,
        borderBottom: '1px solid color-mix(in srgb, var(--paper) 14%, transparent)',
      }} className="footer-grid">
        <div>
          <div style={{display:'flex', alignItems:'center', gap: 10, marginBottom: 18}}>
            <div className="brand-mark" style={{background: 'var(--paper)'}}>
              <span style={{position:'absolute', inset:'6px 0 0 6px', width:16, height:16, background:'var(--vermillion)', borderRadius:'50%', display:'block'}}></span>
            </div>
            <span className="serif italic" style={{fontSize: 26, color:'var(--paper)'}}>pitchkit</span>
          </div>
          <p style={{
            fontFamily: 'var(--serif)',
            fontStyle: 'italic',
            fontSize: 22,
            lineHeight: 1.25,
            maxWidth: '20ch',
            color: 'color-mix(in srgb, var(--paper) 85%, transparent)',
          }}>
            Ship the launch,<br/>not just the code.
          </p>
        </div>

        {[
          ['Product', ['Features','How it works','Templates','Roadmap']],
          ['Resources', ['Docs','GitHub','Discord','Changelog']],
          ['About', ['Manifesto','License','Sponsors','Contact']],
        ].map(([title, links]) => (
          <div key={title}>
            <div className="mono" style={{
              fontSize: 10,
              letterSpacing: '0.18em',
              textTransform: 'uppercase',
              color: 'color-mix(in srgb, var(--paper) 55%, transparent)',
              marginBottom: 18,
            }}>{title}</div>
            <ul style={{listStyle:'none', padding:0, margin:0, display:'grid', gap: 10}}>
              {links.map(l => (
                <li key={l}>
                  <a href="#" style={{fontFamily:'var(--sans)', fontSize: 14, color:'var(--paper)'}}>{l}</a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        paddingTop: 28,
        flexWrap:'wrap',
        gap: 12,
        fontFamily: 'var(--mono)',
        fontSize: 11,
        letterSpacing: '0.14em',
        textTransform: 'uppercase',
        color: 'color-mix(in srgb, var(--paper) 55%, transparent)',
      }}>
        <span>© 2026 pitchkit · MIT licensed · made by humans + agents</span>
        <span>v0.4.2 · last updated may 2026</span>
      </div>
    </div>
    <style>{`
      @media (max-width: 760px) {
        .footer-grid { grid-template-columns: 1fr 1fr !important; }
      }
    `}</style>
  </footer>
);

window.CTA = CTA;
window.Footer = Footer;