/* Destinations + Install + Footer */

function Destinations() {
  return (
    <section id="storage">
      <div className="container">
        <Reveal>
          <div style={{
            display: 'flex',
            alignItems: 'center',
            gap: 48,
            padding: '40px 48px',
            background: 'var(--bg-2)',
            border: '1px solid var(--border)',
            borderRadius: 'var(--radius)',
            flexWrap: 'wrap',
          }}>
            <div style={{ flex: '1 1 320px' }}>
              <span className="eyebrow"><span className="dot"></span>destinations</span>
              <h2 className="gradient-text" style={{ fontSize: 'clamp(24px, 3vw, 36px)', marginTop: 16 }}>AWS S3 ou MinIO.<br/>C'est tout.</h2>
              <p style={{ marginTop: 12, fontSize: 15 }}>
                dbpilot pousse vers AWS S3 ou n'importe quelle instance MinIO
                via un endpoint custom. Simple et sans surprise.
              </p>
            </div>

            <div style={{ display: 'flex', gap: 12, flexShrink: 0 }}>
              {[
                { name: 'AWS S3', icon: 'S3', meta: 's3://...', color: 'oklch(0.78 0.13 75)' },
                { name: 'MinIO',  icon: 'M',  meta: 'endpoint custom', color: 'oklch(0.65 0.18 25)' },
              ].map((d) => (
                <div key={d.name} style={{
                  padding: '20px 24px',
                  background: 'var(--bg)',
                  border: '1px solid var(--border)',
                  borderRadius: 'var(--radius-sm)',
                  textAlign: 'center',
                  minWidth: 120,
                  transition: 'border-color .3s',
                }}>
                  <div style={{
                    width: 40, height: 40,
                    margin: '0 auto 12px',
                    display: 'grid', placeItems: 'center',
                    borderRadius: 10,
                    background: 'oklch(0.165 0.013 250)',
                    border: '1px solid var(--border)',
                    fontFamily: 'var(--font-mono)',
                    fontSize: 13,
                    fontWeight: 600,
                    color: d.color,
                  }}>{d.icon}</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 500, color: 'var(--fg)' }}>{d.name}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted)', marginTop: 4 }}>{d.meta}</div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Install() {
  const [copied, setCopied] = useState(false);
  const cmd = 'curl -L https://github.com/theo-mrn/pgpilot/releases/latest/download/dbpilot-darwin-arm64 -o /usr/local/bin/dbpilot && chmod +x /usr/local/bin/dbpilot';
  const short = 'curl -L github.com/.../dbpilot-darwin-arm64 -o /usr/local/bin/dbpilot';
  const copy = () => {
    navigator.clipboard?.writeText(cmd);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };
  return (
    <section id="install" className="install-section">
      <div className="container">
        <Reveal>
          <div className="install-card">
            <span className="eyebrow"><span className="dot"></span>gratuit · open source · MIT</span>
            <h2 className="gradient-text">Prends-le. C'est à toi.</h2>
            <p>
              Un binaire statique. Pas de runtime, pas de compte, pas de plan.
              Télécharge, chmod, lance.
            </p>

            <div className="install-cmd">
              <span className="prompt">$</span>
              <span className="cmd-text">{short}</span>
              <button onClick={copy} className={`copy ${copied ? 'copied' : ''}`}>
                {copied ? '✓ copié' : 'copier'}
              </button>
            </div>

            <div className="install-extra">
              macOS arm64 · macOS amd64 · Linux amd64 &nbsp;—&nbsp; <a href="https://github.com/theo-mrn/pgpilot/releases" style={{color:'var(--accent)'}}>toutes les releases →</a>
            </div>

            <div className="hero-cta" style={{ marginTop: 36 }}>
              <a href="https://github.com/theo-mrn/pgpilot" className="btn btn-primary">
                <Icon.Github /> Voir sur GitHub
              </a>
              <a href="#features" className="btn btn-ghost">
                Lire la doc <Icon.Arrow />
              </a>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="footer-inner">
          <div className="brand">
            <img src="logo.png" alt="dbpilot" style={{ width: 24, height: 24, objectFit: 'contain' }} />
            dbpilot
          </div>
          <div className="footer-links">
            <a href="https://github.com/theo-mrn/pgpilot">github</a>
            <a href="https://github.com/theo-mrn/pgpilot/releases">releases</a>
            <a href="#features">features</a>
            <a href="#install">install</a>
          </div>
          <div className="footer-meta">
            MIT · construit pour les sysadmins fatigués
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Destinations, Install, Footer });