// StudioDigital.jsx — section accueil pour la 2e ligne de services : sites,
// apps, SaaS. Distincte de Services IA (le métier phare), vendue séparément.
// Catalogue complet : 00_strategie/prd-developpement-web-2026-08-09/prd.md
// Prix : 03_pricing/GRILLE-TARIFAIRE.md

const studioStyles = {
  section: {
    padding: '96px 0',
    background: 'var(--paper-200)',
    position: 'relative',
    overflow: 'hidden',
  },
  header: { maxWidth: 720, marginBottom: 48 },
  h2: {
    fontFamily: "'Space Grotesk', sans-serif",
    fontWeight: 600,
    fontSize: 'clamp(32px, 3.8vw, 48px)',
    lineHeight: 1.08,
    letterSpacing: '-0.02em',
    margin: '0 0 16px',
    color: 'var(--ink-900)',
  },
  intro: { fontSize: 17, lineHeight: 1.55, color: 'var(--mist-700)' },
  grid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
    gap: 1,
    background: 'rgba(42, 26, 7,.12)',
    border: '1px solid rgba(42, 26, 7,.12)',
    marginBottom: 40,
  },
  card: {
    background: '#fff',
    padding: 24,
    display: 'flex',
    flexDirection: 'column',
    gap: 10,
  },
  cardIcon: { color: 'var(--blue-700)' },
  cardLabel: {
    fontFamily: "'Space Grotesk', sans-serif",
    fontWeight: 600,
    fontSize: 16,
    margin: 0,
    color: 'var(--ink-900)',
  },
  cardBody: { fontSize: 13.5, lineHeight: 1.5, color: 'var(--mist-700)', margin: 0, flexGrow: 1 },
  cardPrice: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 12,
    letterSpacing: '0.04em',
    color: 'var(--amber-500)',
    fontWeight: 700,
  },
  footer: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
    gap: 16,
  },
  launchNote: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 12.5,
    letterSpacing: '0.02em',
    color: 'var(--mist-700)',
  },
};

const CLUSTERS = [
  {
    icon: 'globe',
    label: 'Sites vitrines & marketing',
    body: 'Vitrine sur mesure, landing page, refonte, blog intégré.',
    price: 'dès 800 $',
  },
  {
    icon: 'layers',
    label: 'Applications web sur mesure',
    body: 'Portails, tableaux de bord, outils métier.',
    price: 'dès 4 000 $',
  },
  {
    icon: 'database',
    label: 'SaaS / MVP',
    body: "De l'idée au produit lancé, avec abonnements.",
    price: 'dès 2 000 $',
  },
  {
    icon: 'link',
    label: 'Intégrations & API',
    body: 'CRM, ERP, API sur mesure, automatisations.',
    price: 'dès 800 $',
  },
  {
    icon: 'trending-up',
    label: 'SEO, performance & CRO',
    body: 'Audit technique, vitesse, conversion.',
    price: 'dès 500 $',
  },
  {
    icon: 'smartphone',
    label: 'Applications mobiles',
    body: 'iOS et Android, natives, sur mesure.',
    price: 'dès 15 000 $',
  },
  {
    icon: 'shield',
    label: 'Maintenance & support',
    body: 'Un seul contrat récurrent : hébergement, support, évolution.',
    price: 'dès 150 $/mois',
  },
];

const StudioDigital = ({ onBookCall }) => (
  <section style={studioStyles.section} id="studio-digital">
    <div className="b2a-container">
      <div style={studioStyles.header} className="b2a-reveal">
        <p className="b2a-eyebrow">// Studio Digital</p>
        <h2 style={studioStyles.h2}>
          Vous avez aussi besoin d'un site, d'une app ou d'un SaaS ?
        </h2>
        <p style={studioStyles.intro}>
          Une deuxième ligne de services, distincte de Services IA — même
          discipline : prix fixe, délais courts, vous gardez le code. Livrés
          par la même équipe qui a construit ce site.
        </p>
      </div>

      <div style={studioStyles.grid} className="b2a-reveal">
        {CLUSTERS.map((c) => (
          <div key={c.label} style={studioStyles.card}>
            <Icon name={c.icon} size={22} style={studioStyles.cardIcon} />
            <p style={studioStyles.cardLabel}>{c.label}</p>
            <p style={studioStyles.cardBody}>{c.body}</p>
            <span style={studioStyles.cardPrice}>{c.price}</span>
          </div>
        ))}
      </div>

      <div style={studioStyles.footer} className="b2a-reveal">
        <span style={studioStyles.launchNote}>
          Tarif de lancement : -25 % sur les 3 premiers projets.
        </span>
        <button className="b2a-btn b2a-btn-ghost" onClick={onBookCall}>
          Discuter de votre projet
          <Icon name="arrow-right" size={16} />
        </button>
      </div>
    </div>
  </section>
);

window.StudioDigital = StudioDigital;