/* global React, Icons */
const { UI: UI4 } = window;
const { Reveal: R4, ImgPlaceholder: IPH4 } = UI4;
const { useState: useState4 } = React;

// =============================================================
// PAGE 4 — RÉALISATIONS & AVIS
// =============================================================
const REALISATIONS = [
  { id: 1, cat: 'Moteur', label: 'Distribution · 308 HDi', date: '03 / 26' },
  { id: 2, cat: 'Freins', label: 'Disques + plaquettes · Clio IV', date: '03 / 26' },
  { id: 3, cat: 'Carrosserie', label: 'Pare-chocs · 208', date: '02 / 26' },
  { id: 4, cat: 'Moteur', label: 'Diag voyant moteur · A3 TDi', date: '02 / 26' },
  { id: 5, cat: 'Freins', label: 'Étriers grippés · Mégane', date: '02 / 26' },
  { id: 6, cat: 'Suspension', label: 'Amortisseurs AV · Clio III', date: '01 / 26' },
  { id: 7, cat: 'Moteur', label: 'Joint culasse · Twingo', date: '01 / 26' },
  { id: 8, cat: 'Carrosserie', label: 'Aile + redressage · 208', date: '01 / 26' },
  { id: 9, cat: 'Suspension', label: 'Géométrie 4 roues · 3008', date: '12 / 25' },
];

const CATS = ['Tout', 'Moteur', 'Freins', 'Carrosserie', 'Suspension'];

const REVIEWS = [
  { name: 'Marc D.', init: 'MD', date: 'IL Y A 2 SEMAINES', text: "Flo a pris le temps de m'expliquer la panne, le devis était clair, et le travail impeccable. C'est rare de trouver un garage aussi honnête.", car: 'Peugeot 308' },
  { name: 'Sophie L.', init: 'SL', date: 'IL Y A 1 MOIS', text: "Diagnostic en 30 minutes, intervention propre, prix juste. Florian m'a même montré la pièce défaillante. Je recommande sans hésiter.", car: 'Renault Clio IV' },
  { name: 'Jean-Pierre M.', init: 'JM', date: 'IL Y A 1 MOIS', text: "Sur rendez-vous, ça change tout : voiture déposée 8h, récupérée 17h pile, comme prévu. Travail soigné sur les freins.", car: 'Citroën C3' },
  { name: 'Camille R.', init: 'CR', date: 'IL Y A 2 MOIS', text: "Un mécanicien passionné qui aime son métier, ça se sent. Devis détaillé envoyé par mail, aucune mauvaise surprise au final.", car: 'Audi A3' },
];

const RealisationsPage = ({ go }) => {
  const [filter, setFilter] = useState4('Tout');
  const filtered = filter === 'Tout' ? REALISATIONS : REALISATIONS.filter(r => r.cat === filter);

  return (
    <div className="page-enter" data-screen-label="04 Réalisations" style={{ paddingTop: 120 }}>
      {/* ---- Intro ---- */}
      <section className="section-dark section-pad-md" style={{ paddingTop: 48 }}>
        <span className="section-num">§ 04 / 05 — RÉALISATIONS</span>
        <div className="wrap">
          <R4><span className="eyebrow">Travaux récents</span></R4>
          <R4 delay={80}>
            <h1 className="h-display" style={{ marginTop: 24, marginBottom: 24, fontSize: 'clamp(48px, 7vw, 96px)' }}>
              Ce qui sort<br/>
              <span style={{ color: 'var(--accent)' }}>de l'atelier.</span>
            </h1>
          </R4>
          <R4 delay={160}>
            <p className="body-lg" style={{ color: 'var(--gris-clair)', maxWidth: 600 }}>
              Quelques interventions récentes — des plus simples aux plus pointues. Galerie en cours d'enrichissement avec chaque chantier.
            </p>
          </R4>
        </div>
      </section>

      {/* ---- Filtres + Grille ---- */}
      <section className="section-dark-2 section-pad-lg" style={{ paddingTop: 48 }}>
        <div className="wrap">
          {/* Filtres */}
          <R4>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              flexWrap: 'wrap',
              gap: 16,
              borderTop: '1px solid var(--gris-bordure)',
              borderBottom: '1px solid var(--gris-bordure)',
              padding: '20px 0',
              marginBottom: 32,
            }}>
              <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
                {CATS.map(c => (
                  <button
                    key={c}
                    onClick={() => setFilter(c)}
                    className="mono"
                    style={{
                      padding: '8px 16px',
                      fontSize: 12,
                      letterSpacing: '0.12em',
                      textTransform: 'uppercase',
                      background: filter === c ? 'var(--accent)' : 'transparent',
                      color: filter === c ? 'var(--blanc)' : 'var(--gris-clair)',
                      border: '1px solid ' + (filter === c ? 'var(--accent)' : 'var(--gris-bordure)'),
                      transition: 'all 0.2s',
                    }}
                  >
                    {c}
                  </button>
                ))}
              </div>
              <span className="mono small" style={{ color: 'var(--gris-clair)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>
                {filtered.length} / {REALISATIONS.length} interventions
              </span>
            </div>
          </R4>

          {/* Grille */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 16,
          }} className="real-grid">
            {filtered.map((r, i) => (
              <R4 key={r.id} delay={(i % 3) * 60}>
                <RealisationCard r={r} />
              </R4>
            ))}
          </div>

          <style>{`
            @media (max-width: 880px) { .real-grid { grid-template-columns: repeat(2, 1fr) !important; } }
            @media (max-width: 540px) { .real-grid { grid-template-columns: 1fr !important; } }
          `}</style>
        </div>
      </section>

      {/* ---- Avis ---- */}
      <section className="section-light section-pad-lg">
        <span className="section-num" style={{ color: 'var(--nuit)' }}>§ TÉMOIGNAGES</span>
        <div className="wrap">
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 2fr)',
            gap: 48,
            alignItems: 'flex-start',
          }} className="avis-grid">
            <R4>
              <div style={{ position: 'sticky', top: 120 }}>
                <span className="eyebrow">Ce qu'ils en disent</span>
                <h2 className="h-xl" style={{ marginTop: 16, marginBottom: 24 }}>4,9 / 5<br/>sur Google.</h2>
                <div className="stars" style={{ marginBottom: 16 }}>
                  {[1,2,3,4,5].map(i => <Icons.Star key={i} />)}
                </div>
                <p className="body" style={{ color: 'var(--muted-on-light)', marginBottom: 24 }}>
                  47 avis vérifiés sur Google Maps.
                </p>
                <a className="btn btn-primary" href="#" style={{ marginBottom: 12 }}>
                  Lire tous les avis <Icons.ArrowRight className="arrow" />
                </a>
              </div>
            </R4>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }} className="avis-cards">
              {REVIEWS.map((rv, i) => (
                <R4 key={i} delay={i * 80}>
                  <div style={{
                    background: 'var(--blanc)',
                    border: '1px solid var(--border-light)',
                    padding: '24px',
                    display: 'flex',
                    flexDirection: 'column',
                    gap: 12,
                    height: '100%',
                  }}>
                    <div className="stars">
                      {[1,2,3,4,5].map(i => <Icons.Star key={i} />)}
                    </div>
                    <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: 'var(--nuit)' }}>« {rv.text} »</p>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 'auto', paddingTop: 16, borderTop: '1px solid var(--border-light)' }}>
                      <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'var(--nuit)', color: 'var(--ivoire)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 700 }}>{rv.init}</div>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontWeight: 600, color: 'var(--nuit)', fontSize: 14 }}>{rv.name}</div>
                        <div className="mono" style={{ color: 'var(--muted-on-light)', fontSize: 10, letterSpacing: '0.12em' }}>{rv.date} · {rv.car.toUpperCase()}</div>
                      </div>
                    </div>
                  </div>
                </R4>
              ))}
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .avis-grid { grid-template-columns: 1fr !important; }
            .avis-cards { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>

      {/* ---- CTA laisser un avis ---- */}
      <section className="section-dark section-pad-md" style={{ borderTop: '1px solid var(--gris-bordure)' }}>
        <span className="section-num">§ VOTRE AVIS</span>
        <div className="wrap">
          <R4>
            <div style={{
              display: 'grid',
              gridTemplateColumns: 'minmax(0, 1.4fr) minmax(0, 1fr)',
              gap: 48,
              alignItems: 'center',
            }} className="cta-grid-r">
              <div>
                <span className="eyebrow">Vous êtes passé(e) par Flo'auto ?</span>
                <h2 className="h-xl" style={{ marginTop: 16, marginBottom: 16 }}>
                  Laissez-moi<br/>un avis Google.
                </h2>
                <p className="body-lg" style={{ color: 'var(--gris-clair)' }}>
                  Ça ne prend que 30 secondes, et ça aide énormément à faire connaître l'atelier.
                </p>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-start' }}>
                <a href="#" className="btn btn-primary" style={{ padding: '18px 28px' }}>
                  Écrire un avis <Icons.ArrowRight className="arrow" />
                </a>
                <button className="btn btn-secondary" onClick={() => go('contact')} style={{ color: 'var(--ivoire)' }}>
                  Prendre RDV <Icons.ArrowRight className="arrow" />
                </button>
              </div>
            </div>
          </R4>
        </div>
        <style>{`
          @media (max-width: 720px) {
            .cta-grid-r { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>
    </div>
  );
};

// ---- Realisation Card ----
const RealisationCard = ({ r }) => (
  <div style={{ position: 'relative', cursor: 'pointer', transition: 'transform 0.25s' }} className="real-card">
    <div style={{ position: 'relative' }}>
      <IPH4 icon={Icons.Image} style={{ aspectRatio: '4/3', width: '100%' }} />
      <span style={{
        position: 'absolute',
        top: 12,
        left: 12,
        background: 'var(--accent)',
        color: 'var(--blanc)',
        padding: '4px 10px',
        fontFamily: 'var(--font-mono)',
        fontSize: 10,
        letterSpacing: '0.14em',
        textTransform: 'uppercase',
        fontWeight: 600,
        zIndex: 4,
      }}>{r.cat}</span>
    </div>
    <div style={{ padding: '14px 0 4px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
      <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--ivoire)' }}>{r.label}</span>
      <span className="mono small" style={{ color: 'var(--gris-clair)', whiteSpace: 'nowrap' }}>{r.date}</span>
    </div>
    <style>{`
      .real-card:hover { transform: translateY(-3px); }
    `}</style>
  </div>
);

window.RealisationsPage = RealisationsPage;