/* global React, Icons */
const { UI: UI3 } = window;
const { Reveal: R3, ImgPlaceholder: IPH3 } = UI3;

// =============================================================
// PAGE 3 — LE GARAGE
// =============================================================
const GaragePage = ({ go }) => {
  return (
    <div className="page-enter" data-screen-label="03 Garage" style={{ paddingTop: 120 }}>
      {/* ---- Histoire ---- */}
      <section className="section-dark section-pad-lg" style={{ paddingTop: 64 }}>
        <span className="section-num">§ 03 / 05 — LE GARAGE</span>
        <div className="wrap">
          <R3><span className="eyebrow">Portrait</span></R3>
          <R3 delay={80}>
            <h1 className="h-display" style={{ marginTop: 24, marginBottom: 48, fontSize: 'clamp(48px, 7vw, 96px)' }}>
              Florian,<br/>
              <span style={{ color: 'var(--accent)' }}>mécanicien</span><br/>
              à Bueil.
            </h1>
          </R3>

          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.4fr)', gap: 64, alignItems: 'flex-start' }} className="grg-intro">
            <R3 delay={160}>
              <IPH3
                tag="PORTRAIT / FLO 01"
                label="Photo portrait · à remplacer"
                icon={Icons.Wrench}
                style={{ aspectRatio: '4/5', width: '100%' }}
              />
            </R3>
            <R3 delay={240}>
              <div>
                <p className="body-lg" style={{ marginTop: 0, fontSize: 20, color: 'var(--ivoire)', lineHeight: 1.55, marginBottom: 24 }}>
                  Diplômé en 2014, j'ai passé dix ans en concessions et garages indépendants à apprendre tous types de mécanique — du diesel d'avant-hier aux hybrides récents.
                </p>
                <p className="body-lg" style={{ color: 'var(--gris-clair)', lineHeight: 1.7, marginBottom: 24 }}>
                  En 2024, j'ai ouvert Flo'auto à Bueil pour proposer quelque chose qui me manquait : un garage où l'on prend le temps d'expliquer, où le devis est clair avant l'intervention, et où chaque véhicule a son créneau dédié.
                </p>
                <p className="body-lg" style={{ color: 'var(--gris-clair)', lineHeight: 1.7 }}>
                  Pas de salle d'attente bondée, pas de course contre la montre. Juste de la mécanique faite proprement, et un interlocuteur unique du premier appel à la livraison du véhicule.
                </p>

                <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, paddingTop: 32, borderTop: '1px solid var(--gris-bordure)' }}>
                  <div>
                    <div className="mono small" style={{ color: 'var(--accent)', letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 6 }}>Formation</div>
                    <div style={{ fontSize: 15 }}>CAP + Bac Pro Maintenance véhicules · 2014</div>
                  </div>
                  <div>
                    <div className="mono small" style={{ color: 'var(--accent)', letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 6 }}>Expérience</div>
                    <div style={{ fontSize: 15 }}>10 ans · concessions et indépendants</div>
                  </div>
                  <div>
                    <div className="mono small" style={{ color: 'var(--accent)', letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 6 }}>Spécialités</div>
                    <div style={{ fontSize: 15 }}>Diagnostic, freinage, distribution</div>
                  </div>
                  <div>
                    <div className="mono small" style={{ color: 'var(--accent)', letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 6 }}>Outillage</div>
                    <div style={{ fontSize: 15 }}>Valise OBD multimarques, banc géo</div>
                  </div>
                </div>
              </div>
            </R3>
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .grg-intro { grid-template-columns: 1fr !important; gap: 32px !important; }
          }
        `}</style>
      </section>

      {/* ---- Pourquoi sur RDV ---- */}
      <section className="section-light section-pad-lg">
        <span className="section-num" style={{ color: 'var(--nuit)' }}>§ MÉTHODE / RDV</span>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.2fr)', gap: 64 }} className="rdv-grid">
            <R3>
              <div>
                <span className="eyebrow">Pourquoi sur RDV</span>
                <h2 className="h-xl" style={{ marginTop: 16, marginBottom: 24 }}>
                  Une voiture<br/>à la fois.
                </h2>
                <p className="body-lg" style={{ color: 'var(--muted-on-light)' }}>
                  Le rendez-vous, ce n'est pas une contrainte — c'est ce qui me permet de faire bien mon métier.
                </p>
              </div>
            </R3>
            <R3 delay={120}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
                {[
                  { n: '01', t: 'Temps dédié', d: 'Votre créneau vous appartient. Pas de chevauchement, pas de "j\'y reviens dans 5 minutes".' },
                  { n: '02', t: 'Travail soigné', d: 'Le temps de bien faire, de vérifier, de tester avant rendu. Pas de précipitation.' },
                  { n: '03', t: 'Pas d\'attente', d: 'Vous déposez le véhicule à l\'heure dite, vous le récupérez à l\'heure dite. Net.' },
                  { n: '04', t: 'Devis avant tout', d: 'Aucune intervention n\'est lancée sans validation écrite du devis. Aucune surprise.' },
                ].map((p, i) => (
                  <div key={p.n} style={{
                    padding: '24px 0',
                    borderTop: i === 0 ? '1px solid var(--border-light)' : '0',
                    borderBottom: '1px solid var(--border-light)',
                    display: 'grid',
                    gridTemplateColumns: '60px 1fr',
                    gap: 24,
                    alignItems: 'flex-start'
                  }}>
                    <span className="mono" style={{ fontSize: 14, color: 'var(--accent)', letterSpacing: '0.1em' }}>{p.n}</span>
                    <div>
                      <h3 className="h-md" style={{ margin: 0, marginBottom: 6 }}>{p.t}</h3>
                      <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: 'var(--muted-on-light)' }}>{p.d}</p>
                    </div>
                  </div>
                ))}
              </div>
            </R3>
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .rdv-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          }
        `}</style>
      </section>

      {/* ---- Engagements ---- */}
      <section className="section-dark-2 section-pad-lg">
        <span className="section-num">§ ENGAGEMENTS</span>
        <div className="wrap">
          <R3><span className="eyebrow">Mes engagements</span></R3>
          <R3 delay={80}>
            <h2 className="h-xl" style={{ marginTop: 16, marginBottom: 56, maxWidth: 800 }}>
              Quatre principes,<br/>tenus depuis dix ans.
            </h2>
          </R3>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid var(--gris-bordure)', borderLeft: '1px solid var(--gris-bordure)' }} className="eng-grid">
            {[
              { icon: Icons.Shield, t: 'Transparence', d: 'Devis détaillé avant intervention. Pièces remplacées remises sur demande.' },
              { icon: Icons.Award, t: 'Qualité', d: 'Pièces d\'origine ou équivalentes haut de gamme. Garantie sur main d\'œuvre.' },
              { icon: Icons.Phone, t: 'Proximité', d: 'Un seul interlocuteur, joignable directement. Pas de standard, pas de chaîne.' },
              { icon: Icons.Clock, t: 'Ponctualité', d: 'L\'heure annoncée est l\'heure tenue. Au dépôt comme à la livraison.' },
            ].map((e, i) => {
              const Ec = e.icon;
              return (
                <R3 key={e.t} delay={i * 80}>
                  <div style={{
                    padding: '40px 28px',
                    borderRight: '1px solid var(--gris-bordure)',
                    borderBottom: '1px solid var(--gris-bordure)',
                    minHeight: 220,
                    display: 'flex',
                    flexDirection: 'column',
                    gap: 16,
                  }}>
                    <Ec width="36" height="36" style={{ color: 'var(--accent)' }} />
                    <h3 className="h-md" style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '-0.01em', fontSize: 22 }}>{e.t}</h3>
                    <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: 'var(--gris-clair)' }}>{e.d}</p>
                  </div>
                </R3>
              );
            })}
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .eng-grid { grid-template-columns: repeat(2, 1fr) !important; }
          }
          @media (max-width: 540px) {
            .eng-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>

      {/* ---- Localisation ---- */}
      <section className="section-dark section-pad-lg">
        <span className="section-num">§ LOCALISATION</span>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.2fr)', gap: 64, alignItems: 'center' }} className="loc-grid">
            <R3>
              <div>
                <span className="eyebrow">Atelier · Bueil</span>
                <h2 className="h-xl" style={{ marginTop: 16, marginBottom: 24 }}>
                  À 30 min<br/>de Rouen,<br/>Évreux et Vernon.
                </h2>
                <p className="body-lg" style={{ color: 'var(--gris-clair)', marginBottom: 32 }}>
                  Garage situé en bordure du bourg de Bueil. Parking devant l'atelier, accès facile depuis la D75 et l'A13 sortie Vernon.
                </p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingTop: 24, borderTop: '1px solid var(--gris-bordure)' }}>
                  <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16 }}>
                    <Icons.MapPin width="22" height="22" style={{ color: 'var(--accent)', flexShrink: 0, marginTop: 2 }} />
                    <div>
                      <div className="mono small" style={{ color: 'var(--gris-clair)', letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 4 }}>Adresse</div>
                      <div style={{ fontSize: 17 }}>14 rue de l'Atelier — 27730 Bueil</div>
                    </div>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16 }}>
                    <Icons.Target width="22" height="22" style={{ color: 'var(--accent)', flexShrink: 0, marginTop: 2 }} />
                    <div>
                      <div className="mono small" style={{ color: 'var(--gris-clair)', letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 4 }}>Zone d'intervention</div>
                      <div style={{ fontSize: 17 }}>Bueil · Pacy · Vernon · Évreux · ~30 km</div>
                    </div>
                  </div>
                </div>
              </div>
            </R3>

            <R3 delay={120}>
              <div style={{ position: 'relative' }}>
                <IPH3
                  tag="CARTE / ATELIER"
                  label="Carte Google Maps · intégration"
                  icon={Icons.MapPin}
                  style={{ aspectRatio: '4/3', width: '100%' }}
                />
                <div style={{
                  position: 'absolute', bottom: 16, left: 16, right: 16,
                  background: 'var(--nuit)',
                  border: '1px solid var(--gris-bordure)',
                  padding: '14px 18px',
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  gap: 16,
                  flexWrap: 'wrap'
                }}>
                  <div>
                    <div className="mono small" style={{ color: 'var(--accent)', letterSpacing: '0.14em' }}>49.08° N · 1.42° E</div>
                    <div style={{ fontSize: 13, color: 'var(--gris-clair)', marginTop: 4 }}>Bueil, Eure, Normandie</div>
                  </div>
                  <button className="btn btn-secondary" style={{ color: 'var(--ivoire)', padding: '10px 14px', fontSize: 11 }}>
                    Ouvrir Maps <Icons.ArrowRight className="arrow" width="12" height="12" />
                  </button>
                </div>
              </div>
            </R3>
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .loc-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>
    </div>
  );
};

window.GaragePage = GaragePage;