/* Features — bento grid avec les vraies fonctionnalités de dbpilot */

function Feature({ className, icon, title, children, visual }) {
  const ref = useRef(null);
  useMouseTrack(ref);
  return (
    <div ref={ref} className={`feature ${className || ''}`}>
      <div className="feature-icon">{icon}</div>
      <h3>{title}</h3>
      <p>{children}</p>
      {visual}
    </div>
  );
}

function OrbitDot({ radius, startAngle, duration, direction, label }) {
  const style = {
    position: 'absolute',
    left: '50%',
    top: '50%',
    width: 0,
    height: 0,
    animation: `orbit-item-${direction === 'reverse' ? 'ccw' : 'cw'} ${duration}s linear infinite`,
    '--r': `${radius}px`,
    '--a': `${startAngle}deg`,
  };
  return (
    <div style={style}>
      <span className="orbit-dot-label">{label}</span>
    </div>
  );
}

function AutoDetectVisual() {
  return (
    <div className="orbit-wrap">
      <div className="orbit"></div>
      <div className="orbit o2"></div>
      <div className="orbit o3"></div>
      <OrbitDot radius={160} startAngle={0}   duration={30} direction="cw"      label="app/postgres-main" />
      <OrbitDot radius={160} startAngle={200} duration={30} direction="cw"      label="app/postgres-events" />
      <OrbitDot radius={110} startAngle={90}  duration={22} direction="reverse" label="billing/postgres" />
      <OrbitDot radius={110} startAngle={270} duration={22} direction="reverse" label="staging/postgres" />
      <OrbitDot radius={60}  startAngle={45}  duration={16} direction="cw"      label="dev/postgres" />
      <div className="orbit-core">k8s</div>
    </div>
  );
}

function ConfigVisual() {
  return (
    <div style={{
      marginTop: 18,
      padding: '14px 16px',
      background: 'oklch(0.115 0.012 250)',
      border: '1px solid var(--border)',
      borderRadius: 10,
      fontFamily: 'var(--font-mono)',
      fontSize: 11.5,
      lineHeight: 1.8,
    }}>
      <div style={{ color: 'var(--muted)' }}># ~/.config/dbpilot/backup.yaml</div>
      <div><span style={{ color: 'oklch(0.78 0.12 220)' }}>schedule</span><span style={{ color: 'var(--muted)' }}>:</span> <span style={{ color: 'oklch(0.85 0.12 75)' }}>"0 2 * * *"</span></div>
      <div><span style={{ color: 'oklch(0.78 0.12 220)' }}>retention</span><span style={{ color: 'var(--muted)' }}>:</span> <span style={{ color: 'oklch(0.85 0.12 75)' }}>7d</span></div>
      <div><span style={{ color: 'oklch(0.78 0.12 220)' }}>destination</span><span style={{ color: 'var(--muted)' }}>:</span></div>
      <div>&nbsp;&nbsp;<span style={{ color: 'oklch(0.78 0.12 220)' }}>bucket</span><span style={{ color: 'var(--muted)' }}>:</span> <span style={{ color: 'oklch(0.85 0.12 75)' }}>my-backups</span></div>
      <div>&nbsp;&nbsp;<span style={{ color: 'oklch(0.78 0.12 220)' }}>endpoint</span><span style={{ color: 'var(--muted)' }}>:</span> <span style={{ color: 'oklch(0.85 0.12 75)' }}>https://minio.internal</span></div>
    </div>
  );
}

function DestinationsVisual() {
  const items = [
    { name: 'AWS S3', icon: 'S3', color: 'oklch(0.78 0.13 75)' },
    { name: 'MinIO',  icon: 'M',  color: 'oklch(0.65 0.18 25)' },
  ];
  return (
    <div className="dest-list">
      {items.map((d) => (
        <div key={d.name} className="dest-chip">
          <span className="logo" style={{
            display: 'grid', placeItems: 'center',
            fontFamily: 'var(--font-mono)', fontSize: 10,
            fontWeight: 600, color: d.color,
            background: 'oklch(0.165 0.013 250)',
            border: '1px solid var(--border)',
          }}>{d.icon}</span>
          <span>{d.name}</span>
        </div>
      ))}
    </div>
  );
}

function RestoreVisual() {
  const items = [
    { key: '20260526T030000Z.dump.gz', size: '412 MB', selected: true },
    { key: '20260525T030000Z.dump.gz', size: '398 MB' },
    { key: '20260524T030000Z.dump.gz', size: '391 MB' },
    { key: '20260523T030000Z.dump.gz', size: '384 MB' },
  ];
  return (
    <div className="restore-timeline">
      {items.map((i, idx) => (
        <div key={idx} className={`restore-item ${i.selected ? 'selected' : ''}`}>
          <span className="pick"></span>
          <span className="date" style={{ fontSize: 11 }}>{i.key}</span>
          <span className="size">{i.size}</span>
        </div>
      ))}
    </div>
  );
}

function CronJobVisual() {
  const heights = [38, 52, 41, 65, 48, 72, 55, 68, 60, 78, 64, 82];
  return (
    <div className="spark">
      {heights.map((h, i) => (
        <div
          key={i}
          className="spark-bar"
          style={{
            height: `${h}%`,
            animation: `riseBar 1.2s ${i * 80}ms cubic-bezier(.2,.7,.2,1) backwards`,
          }}
        />
      ))}
    </div>
  );
}

function SecretVisual() {
  return (
    <div style={{
      marginTop: 22,
      padding: '14px 16px',
      background: 'oklch(0.115 0.012 250)',
      border: '1px solid var(--border)',
      borderRadius: 10,
      fontFamily: 'var(--font-mono)',
      fontSize: 11.5,
      lineHeight: 1.7,
    }}>
      <div style={{ color: 'var(--muted)' }}># référence un Secret K8s existant</div>
      <div>
        <span style={{ color: 'oklch(0.78 0.12 220)' }}>db_password</span>
        <span style={{ color: 'var(--muted)' }}>:</span>
      </div>
      <div>&nbsp;&nbsp;<span style={{ color: 'oklch(0.78 0.12 220)' }}>from</span><span style={{ color: 'var(--muted)' }}>:</span> <span style={{ color: 'var(--accent)' }}>k8s-secret://myapp/env#DB_PASSWORD</span></div>
      <div style={{ color: 'var(--accent)', marginTop: 4 }}>● jamais stocké en clair</div>
    </div>
  );
}

function Features() {
  return (
    <section id="features">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <span className="eyebrow"><span className="dot"></span>fonctionnalités</span>
            <h2 className="gradient-text">
              Une CLI qui pense<br/>à ta place.
            </h2>
            <p>
              Tout ce qu'il faut pour sauvegarder et restaurer tes bases PostgreSQL dans Kubernetes,
              sans modifier le cluster ni déployer d'opérateur.
            </p>
          </div>
        </Reveal>

        <Reveal stagger>
          <div className="feature-grid">
            <Feature
              className="w3"
              icon={<Icon.Scan />}
              title="Détection auto des instances"
              visual={<AutoDetectVisual />}
            >
              dbpilot inspecte ton cluster, trouve les Services PostgreSQL accessibles
              et génère la config. Pas de YAML à écrire à la main.
            </Feature>

            <Feature
              className="w3"
              icon={<Icon.Profile />}
              title="Config déclarative YAML"
              visual={<ConfigVisual />}
            >
              Schedule, rétention, bucket, credentials — tout dans un seul fichier YAML.
              Un fichier par environnement, versionnable dans ton repo.
            </Feature>

            <Feature
              className="w2"
              icon={<Icon.Cloud />}
              title="AWS S3 et MinIO"
              visual={null}
            >
              dbpilot pousse vers AWS S3 ou n'importe quelle instance MinIO
              via un endpoint custom. Un seul champ à configurer.
            </Feature>

            <Feature
              className="w2"
              icon={<Icon.Restore />}
              title="Restore interactif"
              visual={<RestoreVisual />}
            >
              Liste les archives disponibles dans S3, choisis un point de restauration,
              et dbpilot lance un Job dans le cluster. Avec confirmation.
            </Feature>

            <Feature
              className="w2"
              icon={<Icon.Encrypt />}
              title="Secrets K8s, jamais en clair"
              visual={<SecretVisual />}
            >
              Les credentials référencent tes Secrets Kubernetes existants.
              dbpilot ne stocke jamais un mot de passe en clair.
            </Feature>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

const styleEl = document.createElement('style');
styleEl.textContent = `
@keyframes riseBar {
  from { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
  to { transform: scaleY(1); opacity: 0.6; }
}
`;
document.head.appendChild(styleEl);

window.Features = Features;