/* Page /a-propos — refonte UX riche : hero photo, timeline parcours, stats,
 * quote pull-out, équipe avec vraies photos.
 * Photos téléchargées depuis l'ancien site boommaker.io/a-propos. */

const { useState } = React;
const { Logo, ArrowUpRight, ThemeToggle, FooterMin } = window.BMShared;

const AboutNav = () => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <nav className="nav" id="nav">
        <a href="/" className="nav-logo" aria-label="Boom Maker"><Logo /></a>
        <div className="nav-links">
          <div className="nav-dropdown">
            <button type="button" className="nav-dropdown-trigger" aria-haspopup="true">
              Expertises <span className="nav-dropdown-caret">▾</span>
            </button>
            <div className="nav-dropdown-menu" role="menu">
              <a href="/expertises">3 piliers</a>
              <a href="/#process">Process</a>
              <a href="/partners">Partenaires</a>
            </div>
          </div>
          <a href="/#prix">Tarifs</a>
          <a href="/news">News</a>
          <div className="nav-dropdown">
            <button type="button" className="nav-dropdown-trigger active" aria-haspopup="true">
              À propos <span className="nav-dropdown-caret">▾</span>
            </button>
            <div className="nav-dropdown-menu" role="menu">
              <a href="/a-propos" className="active">BoomMaker</a>
              <a href="/#faq">FAQ</a>
            </div>
          </div>
          <a href="/contact">Contact</a>
        </div>
        <ThemeToggle />
        <a href="/audit-gratuit" className="btn btn-glow nav-cta-desktop">Audit gratuit <ArrowUpRight /></a>
        <button className="nav-burger" aria-label="Menu" aria-expanded={open}
                onClick={() => setOpen((o) => !o)}>
          <span /><span /><span />
        </button>
      </nav>
      <div className={`nav-mobile ${open ? 'open' : ''}`} onClick={() => setOpen(false)}>
        <span className="nav-mobile-group">/ Expertises</span>
        <a href="/expertises">3 piliers</a>
        <a href="/#process">Process</a>
        <a href="/partners">Partenaires</a>
        <a href="/#prix">Tarifs</a>
        <a href="/news">News</a>
        <span className="nav-mobile-group">/ À propos</span>
        <a href="/a-propos" className="active">BoomMaker</a>
        <a href="/#faq">FAQ</a>
        <a href="/contact">Contact</a>
        <a href="/audit-gratuit" className="btn btn-glow">Audit gratuit <ArrowUpRight /></a>
      </div>
    </>
  );
};

/* Stats "qui font vraies" — à remplacer par les vrais chiffres quand Julia les a. */
const STATS = [
  { num: '15+', label: 'Clients accompagnés depuis 2023' },
  { num: '+22h', label: 'Récupérées par semaine en moyenne' },
  { num: '+25%', label: 'CA généré en 90 jours' },
  { num: '47', label: 'Workflows déployés' },
];

/* Timeline parcours Julia */
const JOURNEY = [
  { year: '2015', title: 'Marketing de luxe', desc: 'Nespresso, Simone Pérèle. Stratégie de marque + obsession lead-gen.', tag: 'Paris' },
  { year: '2021', title: 'CMO tech israélien', desc: 'Tel-Aviv. Solutions simples pour problèmes complexes. Découverte du no-code.', tag: 'Tel-Aviv' },
  { year: '2023', title: 'Le déclic', desc: 'Premiers clients TPE (ClimatFilm, CottonBlue, Maison&Styles). 2h de config = 15h gagnées/sem.', tag: 'France' },
  { year: '2024', title: 'Boom Maker', desc: 'Le studio que les TPE françaises méritaient. Tel-Aviv ↔ Paris.', tag: 'Présent' },
];

/* Valeurs / mission */
const VALUES = [
  { icon: '🎯', title: 'Transparence radicale', desc: 'Pas de jargon. Pas de boîte noire. Tu comprends exactement ce qu\'on fait et pourquoi.' },
  { icon: '💡', title: 'Pragmatisme', desc: 'On automatise seulement ce qui doit l\'être. Certaines tâches sont plus rapides à la main, on te le dira.' },
  { icon: '📊', title: 'Obsession du ROI', desc: 'Chaque automatisation doit avoir un impact business clair. Sinon on ne la fait pas.' },
  { icon: '🤝', title: 'Long terme', desc: 'On ne te lâche pas après la livraison. Support, maintenance, optimisation continue.' },
  { icon: '🎓', title: 'Transfert de compétences', desc: 'Notre objectif : te rendre autonome, pas dépendante.' },
  { icon: '⚡', title: 'Rapidité', desc: 'Premières automatisations en 1 à 2 semaines. Résultats immédiats, pas dans 6 mois.' },
];

const ENGAGEMENTS = [
  { emoji: '⚡', label: 'Réponse < 24h', desc: 'Questions, problèmes, idées folles — on te répond en moins de 24h (jours ouvrés).' },
  { emoji: '🎁', label: 'Audit gratuit', desc: '30 min pour analyser tes processus et te donner des recommandations actionnables. Sans engagement.' },
  { emoji: '💯', label: 'On optimise jusqu\'à ce que ça marche', desc: 'Notre objectif : te faire gagner du temps et de l\'argent. Point.' },
  { emoji: '🛠️', label: 'Support 30 jours inclus', desc: 'Maintenance et ajustements inclus pendant un mois après livraison.' },
];

const AboutPage = () => (
  <div className="about-page">
    <AboutNav />

    {/* === HERO avec photo Julia === */}
    <section className="about-hero">
      <div className="container">
        <a href="/" className="legal-back">← Retour à l'accueil</a>
        <div className="about-hero-grid">
          <div className="about-hero-text">
            <span className="eyebrow"><span className="pulse" /> Tel-Aviv ↔ Paris</span>
            <h1>Salut, je suis <em>Julia.</em></h1>
            <p className="lead">
              Fondatrice de Boom Maker. J'aide les TPE françaises à automatiser leur business — sans recruter, sans agence, sans tech à coder.
            </p>
            <div className="about-hero-stats">
              {STATS.map((s) => (
                <div className="hero-stat" key={s.label}>
                  <div className="hero-stat-num">{s.num}</div>
                  <div className="hero-stat-lbl">{s.label}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="about-hero-photo">
            <img src="images/julia.png" alt="Julia Levy, fondatrice de Boom Maker" loading="eager" />
            <span className="about-hero-photo-stamp">JULIA · BOOM MAKER</span>
          </div>
        </div>
      </div>
    </section>

    {/* === Timeline parcours === */}
    <section className="about-section about-section-journey">
      <div className="container">
        <div className="about-section-head">
          <span className="label">/ 01 · Le parcours</span>
          <h2 className="h2">Du <em>marketing de luxe</em> à l'automatisation no-code.</h2>
        </div>
        <div className="journey-timeline">
          {JOURNEY.map((step, i) => (
            <div className="journey-step" key={step.year}>
              <div className="journey-dot" />
              <div className="journey-card">
                <div className="journey-meta">
                  <span className="journey-year">{step.year}</span>
                  <span className="journey-tag">{step.tag}</span>
                </div>
                <h3>{step.title}</h3>
                <p>{step.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* === Quote pull-out (le déclic) === */}
    <section className="about-section about-section-quote">
      <div className="container">
        <blockquote className="about-pullquote">
          <span className="quote-mark">"</span>
          <p>2 heures de configuration éliminent <em>15 heures de travail manuel</em> par semaine. À chaque fois.</p>
          <cite>— Le déclic, en 2023, après ClimatFilm</cite>
        </blockquote>
        <p className="about-quote-context">C'est là que j'ai compris ma mission : <strong>les TPE françaises méritent une expertise technique accessible</strong>. Pas des consultants à 200 €/heure qui te regardent de haut. Pas des projets de 6 mois qui n'aboutissent jamais. Juste quelqu'un qui comprend ta journée de fou et qui sait transformer tes tâches répétitives en systèmes qui tournent tout seuls.</p>
      </div>
    </section>

    {/* === Pont Israël × France === */}
    <section className="about-section about-section-bridge">
      <div className="container">
        <div className="about-section-head">
          <span className="label">/ 02 · L'ADN</span>
          <h2 className="h2">Un pont entre <em>deux écosystèmes.</em></h2>
        </div>
        <div className="bridge-grid">
          <div className="bridge-card bridge-il">
            <div className="bridge-flag">🇮🇱</div>
            <h3>Excellence tech israélienne</h3>
            <p>"Nation Start-up" avec le plus de startups par habitant au monde. Cet écosystème m'a appris :</p>
            <ul>
              <li>L'innovation pragmatique (la "débrouillardise" israélienne)</li>
              <li>L'obsession du ROI et de la mesure</li>
              <li>Faire beaucoup avec peu de ressources</li>
            </ul>
          </div>
          <div className="bridge-card bridge-fr">
            <div className="bridge-flag">🇫🇷</div>
            <h3>Pragmatisme français</h3>
            <p>Mon expérience auprès des TPE françaises m'a fait voir que :</p>
            <ul>
              <li>Les TPE/PME sont sous-servies par les agences</li>
              <li>Pénurie de compétences techniques accessibles</li>
              <li>Le marché valorise la qualité et la transparence</li>
            </ul>
          </div>
        </div>
        <p className="bridge-formula">Boom Maker = <em>excellence tech israélienne</em> × <em>entrepreneuriat français.</em></p>
      </div>
    </section>

    {/* === 6 valeurs en cards === */}
    <section className="about-section about-section-values">
      <div className="container">
        <div className="about-section-head">
          <span className="label">/ 03 · Notre mission</span>
          <h2 className="h2"><em>Démocratiser</em> l'automatisation.</h2>
          <p className="lead">Chaque entreprise, même avec 2 ou 3 personnes, mérite d'avoir accès aux mêmes outils que les grands groupes.</p>
        </div>
        <div className="values-grid">
          {VALUES.map((v) => (
            <div className="value-card" key={v.title}>
              <div className="value-icon">{v.icon}</div>
              <h3>{v.title}</h3>
              <p>{v.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* === L'équipe avec vraies photos === */}
    <section className="about-section about-section-team">
      <div className="container">
        <div className="about-section-head">
          <span className="label">/ 04 · L'équipe</span>
          <h2 className="h2">Deux passionnés qui automatisent <em>tout… sauf le café.</em> ☕</h2>
        </div>
        <div className="team-grid">
          <div className="team-card">
            <img className="team-photo" src="images/julia.jpeg" alt="Julia Levy" loading="lazy" />
            <h4>Julia Levy</h4>
            <span className="team-role">Fondatrice</span>
            <p>Ex-CMO passée du marketing de luxe à l'automatisation no-code. Obsédée par les workflows qui tournent tout seuls et le café bien serré.</p>
          </div>
          <div className="team-card">
            <img className="team-photo" src="images/mathieu.png" alt="Mathieu Daunois" loading="lazy" />
            <h4>Mathieu Daunois</h4>
            <span className="team-role">Développeur</span>
            <p>Le magicien du code qui transforme les idées folles en réalité. Spécialiste des intégrations API complexes et des solutions que "normalement c'est pas possible". Quand le no-code ne suffit pas, Mathieu sort son clavier.</p>
          </div>
        </div>
      </div>
    </section>

    {/* === Engagements === */}
    <section className="about-section about-section-engagements">
      <div className="container">
        <div className="about-section-head">
          <span className="label">/ 05 · Nos engagements</span>
          <h2 className="h2">Des promesses claires, <em>tenues à chaque projet.</em></h2>
        </div>
        <div className="engagements-grid">
          {ENGAGEMENTS.map((e) => (
            <div className="engagement-card" key={e.label}>
              <span className="engagement-emoji">{e.emoji}</span>
              <h4>{e.label}</h4>
              <p>{e.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* === Comment ça se passe === */}
    <section className="about-section about-section-howto">
      <div className="container">
        <div className="about-section-head">
          <span className="label">/ 06 · Comment ça se passe</span>
          <h2 className="h2">3 étapes pour <em>commencer.</em></h2>
        </div>
        <div className="howto-steps">
          <div className="howto-step">
            <div className="howto-num">01</div>
            <h3>Tu réserves ton audit gratuit (30 min)</h3>
            <p>On analyse tes processus et on identifie 3 à 5 automatisations prioritaires. Sans engagement.</p>
          </div>
          <div className="howto-step">
            <div className="howto-num">02</div>
            <h3>Tu reçois ton plan d'action (48h)</h3>
            <p>Roadmap claire avec ROI estimé et délais. Tu sais exactement ce qu'on fait et ce que ça t'apporte.</p>
          </div>
          <div className="howto-step">
            <div className="howto-num">03</div>
            <h3>On lance ta 1ère automatisation (1-2 sem)</h3>
            <p>On configure, on teste, on déploie. Tu gagnes du temps immédiatement.</p>
          </div>
        </div>
      </div>
    </section>

    {/* === CTA final === */}
    <section className="about-section about-section-cta">
      <div className="container">
        <h2>Prête à automatiser ton <em>business ?</em></h2>
        <p>Que tu perdes 5 heures ou 25 heures par semaine sur des tâches répétitives, on a une solution pour toi.</p>
        <div className="about-cta-row">
          <a href="https://calendly.com/julia-boommaker/30min" target="_blank" rel="noopener noreferrer" className="btn btn-glow">Réserver 30 min <ArrowUpRight /></a>
          <a href="/audit-gratuit" className="btn btn-ghost">Audit qualifié → 24h <ArrowUpRight /></a>
        </div>
      </div>
    </section>

    <FooterMin />
  </div>
);

ReactDOM.createRoot(document.getElementById('root')).render(<AboutPage />);