const AboutIcons = {
  Globe: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="28" height="28">
      <circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/>
      <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
    </svg>
  ),
  Cpu: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="28" height="28">
      <rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/>
      <line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/>
      <line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/>
      <line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/>
      <line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/>
    </svg>
  ),
  BarChart: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="28" height="28">
      <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/>
      <line x1="6" y1="20" x2="6" y2="14"/><line x1="2" y1="20" x2="22" y2="20"/>
    </svg>
  ),
  Shield: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="28" height="28">
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
    </svg>
  ),
  TrendingUp: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="28" height="28">
      <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/>
      <polyline points="17 6 23 6 23 12"/>
    </svg>
  ),
  Headphones: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="28" height="28">
      <path d="M3 18v-6a9 9 0 0 1 18 0v6"/>
      <path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3z"/>
      <path d="M3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/>
    </svg>
  ),
  Trophy: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="28" height="28">
      <circle cx="12" cy="8" r="6"/>
      <path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/>
    </svg>
  ),
};

function About() {
  const stats = [
    { num: "5+", label: "Années d'expérience" },
    { num: "200+", label: "Projets livrés" },
    { num: "3", label: "Pays d'intervention" },
    { num: "98%", label: "Clients satisfaits" },
  ];

  const domains = [
    { Icon: AboutIcons.Globe, title: "Sites internet", desc: "Vitrines, landing pages, e-commerces — des sites rapides, élégants et optimisés SEO.", color: "#EEF2FF" },
    { Icon: AboutIcons.Cpu, title: "Solutions IT", desc: "Développement d'applications sur mesure, APIs, automatisations et infogérance.", color: "#F0FDF4" },
    { Icon: AboutIcons.BarChart, title: "Tableaux de bord", desc: "Interfaces de pilotage centralisées pour suivre tes données métier en temps réel.", color: "#FFF7ED" },
    { Icon: AboutIcons.Shield, title: "Sécurité & RGPD", desc: "Audit, mise en conformité et sécurisation de tes environnements numériques.", color: "#FFF1F2" },
    { Icon: AboutIcons.TrendingUp, title: "Stratégie digitale", desc: "Conseil, refonte, roadmap produit — on t'accompagne de l'idée au déploiement.", color: "#F0F9FF" },
    { Icon: AboutIcons.Headphones, title: "Support & maintenance", desc: "Un interlocuteur dédié, des réponses rapides, une relation long terme garantie.", color: "#FAFAF0" },
  ];

  const photo = "https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=900&q=80";

  return (
    <section id="sur-nous" className="about-section" data-screen-label="À propos">
      <div className="container">

        {/* Intro bloc */}
        <div className="about-top reveal">
          <div className="about-text">
            <div className="section-eyebrow" style={{ textAlign: "left" }}>QUI SOMMES-NOUS</div>
            <h2 className="section-title" style={{ textAlign: "left", maxWidth: 560 }}>
              Une agence digitale<br />basée en <span style={{ color: "var(--accent)" }}>Allemagne</span>
            </h2>
            <p style={{ color: "var(--ink-2)", lineHeight: 1.8, marginTop: 20, maxWidth: 520 }}>
              Discover Studio est une agence créative et technique fondée en Allemagne, avec une forte
              empreinte internationale. Nous accompagnons des entreprises de toutes tailles — startups,
              PME et grands comptes — dans la conception et le déploiement de leurs projets digitaux.
            </p>
            <p style={{ color: "var(--ink-2)", lineHeight: 1.8, marginTop: 14, maxWidth: 520 }}>
              Notre force : allier un <strong>design soigné</strong> à une <strong>rigueur technique</strong> sans compromis.
              Chaque projet est traité avec méthode, transparence et un engagement total envers la qualité.
            </p>

            {/* Tags localisation */}
            <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 24 }}>
              {["🇩🇪 Allemagne", "🇫🇷 France", "🌍 Afrique francophone"].map((t, i) => (
                <span key={i} style={{
                  background: "#f3f3f3",
                  borderRadius: 999,
                  padding: "7px 16px",
                  fontSize: 13,
                  fontWeight: 600,
                  color: "var(--ink)"
                }}>{t}</span>
              ))}
            </div>
          </div>

          <div className="about-photo-wrap">
            <img src={photo} alt="L'équipe Discover Studio" className="about-photo" />
            <div className="about-badge">
              <AboutIcons.Trophy />
              <div>
                <div style={{ fontWeight: 700, fontSize: 15, color: "var(--ink)" }}>Agence certifiée</div>
                <div style={{ fontSize: 12, color: "var(--ink-2)" }}>Qualité & performance</div>
              </div>
            </div>
          </div>
        </div>

        {/* Chiffres clés */}
        <div className="about-stats reveal">
          {stats.map((s, i) => (
            <div key={i} className="about-stat">
              <div className="about-stat-num">{s.num}</div>
              <div className="about-stat-label">{s.label}</div>
            </div>
          ))}
        </div>

        {/* Champs d'action */}
        <div className="reveal" style={{ marginTop: 80, textAlign: "center" }}>
          <div className="section-eyebrow">NOS CHAMPS D'ACTION</div>
          <h2 className="section-title">Ce que nous faisons<br />pour toi</h2>
        </div>
        <div className="about-domains">
          {domains.map((d, i) => (
            <div key={i} className="about-domain reveal" style={{ transitionDelay: `${(i % 3) * 0.08}s` }}>
              <div className="about-domain-icon" style={{ background: d.color, color: "var(--primary)" }}><d.Icon /></div>
              <h4>{d.title}</h4>
              <p>{d.desc}</p>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

window.About = About;