// scenes/quickpages.jsx
// "Quick page" scenes — show 3-4 secondary apps in a single grid,
// each with name + tagline + cas d'usage + optional thumbnail.
// Used to cover the long tail of internal apps without dragging
// the runtime too far.

// ─────────────────────────────────────────────────────────────────────────
// QuickCard — one mini app card in a grid
// ─────────────────────────────────────────────────────────────────────────
function QuickCard({
  number, name, category, categoryColor,
  description, useCase,
  thumbnail,
  appearAt = 0,
}) {
  const t = useTime();
  const a = Math.max(0, Math.min(1, (t - appearAt) / 0.55));
  const e = Easing.easeOutCubic(a);

  return (
    <div style={{
      background: ALD.navy700,
      border: '1px solid rgba(255,255,255,0.10)',
      borderRadius: 14,
      padding: '24px 26px',
      opacity: a,
      transform: `translateY(${(1 - e) * 28}px)`,
      boxShadow: '0 14px 36px rgba(0,0,0,0.22)',
      position: 'relative',
      overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
      gap: 10,
    }}>
      {/* number + category */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12,
        marginBottom: 2,
      }}>
        <span style={{
          fontFamily: FONT_DISPLAY, fontWeight: 800, fontSize: 28,
          letterSpacing: '-0.01em', color: ALD.yellow,
          fontVariantNumeric: 'tabular-nums',
        }}>
          {number}
        </span>
        <span style={{ color: 'rgba(255,255,255,.18)' }}>·</span>
        <span style={{
          fontFamily: FONT_DISPLAY, fontWeight: 700, fontSize: 10,
          letterSpacing: '.16em', textTransform: 'uppercase',
          color: '#C7CADD',
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <span style={{
            width: 7, height: 7, borderRadius: 4, background: categoryColor,
          }}/>
          {category}
        </span>
      </div>

      {/* name */}
      <div style={{
        fontFamily: FONT_DISPLAY, fontWeight: 800, fontSize: 28,
        lineHeight: 1.05, letterSpacing: '-0.01em',
        color: ALD.white,
      }}>
        {name}<span style={{ color: ALD.yellow }}>.</span>
      </div>

      {/* description */}
      <div style={{
        fontFamily: FONT_BODY, fontSize: 14, lineHeight: 1.5,
        color: '#C7CADD',
      }}>
        {description}
      </div>

      <div style={{ flex: thumbnail ? 0 : 1, minHeight: thumbnail ? 0 : 8 }}/>

      {/* thumbnail if any */}
      {thumbnail && (
        <div style={{
          marginTop: 6,
          height: 110,
          borderRadius: 8,
          overflow: 'hidden',
          background: ALD.navy,
          border: '1px solid rgba(255,255,255,0.06)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <img src={thumbnail} alt="" style={{
            width: '100%', height: '100%',
            objectFit: 'cover',
            objectPosition: 'center top',
            display: 'block',
          }}/>
        </div>
      )}

      {/* use case */}
      {useCase && (
        <div style={{
          marginTop: thumbnail ? 12 : 10,
          paddingTop: 12,
          borderTop: '1px solid rgba(255,255,255,0.08)',
          fontFamily: FONT_BODY, fontSize: 12, color: ALD.yellow,
          fontWeight: 500, fontStyle: 'italic',
          lineHeight: 1.4,
        }}>
          → {useCase}
        </div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// QuickPage — generic "section of apps" scene
// ─────────────────────────────────────────────────────────────────────────
function QuickPage({ eyebrow, title, titleAccent, apps }) {
  const { localTime, duration } = useSprite();
  const t = localTime;
  const headA = Math.max(0, Math.min(1, (t - 0.1) / 0.5));
  const exit = Math.max(0, Math.min(1, (t - (duration - 0.5)) / 0.5));
  const exitOp = 1 - exit;

  // 4-column grid if 4+ apps, else dynamic
  const cols = Math.min(4, apps.length);

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: exitOp }}>
      <PageBackground>
        <div style={{ position: 'absolute', top: -50, right: -20, opacity: 0.35 }}>
          <SlashCluster appearAt={0} stagger={0.06} duration={0.45} scale={0.4} origin="tr"/>
        </div>

        {/* Header */}
        <div style={{
          position: 'absolute', left: 110, top: 90,
          opacity: headA,
          transform: `translateY(${(1 - headA) * 14}px)`,
        }}>
          <Eyebrow size={16} style={{ marginBottom: 18 }}>{eyebrow}</Eyebrow>
          <div style={{
            fontFamily: FONT_DISPLAY, fontWeight: 800, fontSize: 68,
            lineHeight: 0.96, letterSpacing: '-0.015em',
            textTransform: 'uppercase', color: ALD.white,
          }}>
            {title}
            {titleAccent && (
              <> <span style={{ color: ALD.yellow }}>{titleAccent}</span></>
            )}<span style={{ color: ALD.yellow }}>.</span>
          </div>
        </div>

        {/* Grid — cards size to content, row centered vertically */}
        <div style={{
          position: 'absolute',
          left: 110, right: 110, top: 290, bottom: 110,
          display: 'grid',
          gridTemplateColumns: `repeat(${cols}, 1fr)`,
          gridAutoRows: 'min-content',
          alignContent: 'center',
          alignItems: 'start',
          gap: 22,
        }}>
          {apps.map((a, i) => (
            <QuickCard
              key={a.number}
              appearAt={0.7 + i * 0.18}
              {...a}
            />
          ))}
        </div>
      </PageBackground>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// 4 quick-page scenes covering 15 remaining apps from the inventory
// ─────────────────────────────────────────────────────────────────────────

function SceneQuickIA() {
  return (
    <QuickPage
      eyebrow="P A R T I E &nbsp; 2  ·  I A &nbsp; C O M P L É M E N T A I R E"
      title="L'IA"
      titleAccent="au service de nos métiers"
      apps={[
        {
          number: '12',
          name: 'Camille IA',
          category: 'IA Vocale',
          categoryColor: ALD.svc.ia,
          description: "Agent vocal qui accueille les appels entrants 24/7. L'IA qualifie le besoin et crée directement le ticket dans notre logiciel de ticketing.",
          useCase: "Désengorge l'accueil téléphonique aux heures de pointe.",
        },
        {
          number: '13',
          name: 'Similarité Tickets',
          category: 'IA · Productivité',
          categoryColor: ALD.svc.ia,
          description: "Suggère les 5 tickets résolus les plus proches via embeddings OpenAI dès l'ouverture d'un nouveau ticket.",
          useCase: "Le tech gagne du temps : la résolution existe peut-être déjà.",
        },
      ]}
    />
  );
}

function SceneQuickReporting() {
  return (
    <QuickPage
      eyebrow="P A R T I E &nbsp; 3  ·  R E P O R T I N G &nbsp; & &nbsp; A N A L Y S E"
      title="Reporting"
      titleAccent="& pilotage"
      apps={[
        {
          number: '14',
          name: 'Dashboard 3CX',
          category: 'Téléphonie',
          categoryColor: ALD.svc.tel,
          description: "Supervision de la flotte 3CX : 67 PBX, 1 563 extensions, dates d'expiration des licences en temps réel.",
          useCase: "Anticipation des renouvellements 3CX par le responsable telecom.",
          thumbnail: 'screenshots/dashboard-3cx.png',
        },
        {
          number: '15',
          name: 'Rapports Tickets',
          category: 'Reporting',
          categoryColor: ALD.svc.print,
          description: "Génération automatique des comptes-rendus tickets clients. 352 rapports envoyés à ce jour, 121 clients distincts.",
          useCase: "Preuves d'activité contractuelle envoyées aux clients sans saisie.",
          thumbnail: 'screenshots/rapports-tickets.png',
        },
        {
          number: '16',
          name: 'Stats Copieur',
          category: 'MPS · Impression',
          categoryColor: ALD.svc.print,
          description: "Statistiques de la flotte copieurs sous contrat MPS : compteurs, alertes, anticipation des renouvellements.",
          useCase: "Reporting MPS et plan de remplacement du parc.",
          thumbnail: 'screenshots/stats-copieur.png',
        },
      ]}
    />
  );
}

function SceneQuickCodial() {
  return (
    <QuickPage
      eyebrow="P A R T I E &nbsp; 4  ·  E R P &nbsp; & &nbsp; C O M P T A"
      title="L'ERP connecté"
      titleAccent="au reste"
      apps={[
        {
          number: '17',
          name: 'Dashboard Tickets ERP',
          category: 'ERP · Tickets',
          categoryColor: ALD.svc.info,
          description: "Vue tickets ERP enrichie : performance, marge, statut. Pour piloter l'activité technique au plus près.",
          useCase: "Analyse fine de la rentabilité ticket par ticket.",
        },
        {
          number: '18',
          name: 'Dashboard Commerce ERP',
          category: 'ERP · Commerce',
          categoryColor: ALD.svc.info,
          description: "Vue commerciale ERP : commandes, marges, par commercial — pour la réunion business hebdomadaire.",
          useCase: "Pilotage business chaque lundi, sans extract Excel.",
        },
        {
          number: '19',
          name: 'Suivi Commandes',
          category: 'ERP × MSP',
          categoryColor: ALD.svc.info,
          description: "Commandes ERP par commercial, croisées avec les tickets MSP Manager pour suivre l'exécution.",
          useCase: "Vendu = livré : qui suit techniquement quoi.",
          thumbnail: 'screenshots/codial-ticketing.png',
        },
      ]}
    />
  );
}

function SceneQuickMetier() {
  return (
    <QuickPage
      eyebrow="P A R T I E &nbsp; 5  ·  M É T I E R &nbsp; & &nbsp; I N F R A"
      title="L'opérationnel"
      titleAccent="au quotidien"
      apps={[
        {
          number: '20',
          name: 'Flotte Véhicules',
          category: 'Gestion · Métier',
          categoryColor: ALD.svc.mob,
          description: "Gestion du parc auto : 40 véhicules sur 4 sites, affectations, entretien, contrôles techniques, déclarations km.",
          useCase: "Pilotage parc : alertes, déclarations km, carburant.",
          thumbnail: 'screenshots/flotte-vehicules.png',
        },
        {
          number: '21',
          name: 'Matrice Responsabilité',
          category: 'RACI · Contrats',
          categoryColor: ALD.svc.mob,
          description: "RACI éditable, génération de l'annexe technique aux conventions de service client (PDF auto).",
          useCase: "Annexe technique aux contrats, claire et signée plus vite.",
          thumbnail: 'screenshots/matrice-responsabilite.png',
        },
        {
          number: '22',
          name: 'Audit IT',
          category: 'Audit terrain',
          categoryColor: ALD.svc.cyber,
          description: "App d'audit terrain pour nos techniciens, accessible en mobilité via Cloudflare Tunnel. Rapports générés sur place.",
          useCase: "Audit chez un prospect → rapport prêt avant de partir.",
          thumbnail: 'screenshots/audit-it.png',
        },
        {
          number: '23',
          name: 'Gitea',
          category: 'Forge interne',
          categoryColor: ALD.svc.cyber,
          description: "Notre forge Git interne : tous les dépôts hébergés en interne. 22 projets actifs, code souverain.",
          useCase: "Code et secrets jamais externalisés.",
        },
      ]}
    />
  );
}

Object.assign(window, {
  QuickCard, QuickPage,
  SceneQuickIA, SceneQuickReporting, SceneQuickCodial, SceneQuickMetier,
});