// Direction 1 — Sobre / Luxe discret
// Beaucoup de blanc, type serif éditoriale très calme, micro-graphie,
// aucune fioriture, à la "haute couture / cabinet de conseil premium".

function DirSobre({ accent, accentSoft, density }) {
  const pad = 96 * density;
  const sectionGap = 160 * density;

  return (
    <div className="ets-root dir-sobre" style={{
      width: '100%',
      background: '#FAFAF7',
      color: '#1A1A1A',
      fontSize: 15,
      lineHeight: 1.55,
    }}>
      <style>{`
        .dir-sobre h1, .dir-sobre h2, .dir-sobre h3 { font-family: var(--font-display); font-weight: 300; }
        .dir-sobre .eyebrow {
          font-family: var(--font-body);
          font-size: 11px;
          letter-spacing: 0.22em;
          text-transform: uppercase;
          color: rgba(26,26,26,0.55);
          font-weight: 500;
        }
        .dir-sobre .rule {
          height: 1px; background: rgba(26,26,26,0.12);
        }
        .dir-sobre .rule-thick { background: rgba(26,26,26,0.85); height: 1px; }
        .dir-sobre nav a {
          font-size: 12px; letter-spacing: 0.04em;
          color: #1A1A1A; text-decoration: none;
          transition: opacity .2s;
        }
        .dir-sobre nav a:hover { opacity: 0.55; }
        .dir-sobre .num {
          font-family: var(--font-mono);
          font-size: 11px;
          color: rgba(26,26,26,0.5);
          letter-spacing: 0.02em;
        }
        .dir-sobre .btn-ghost {
          display: inline-flex; align-items: center; gap: 10px;
          padding: 14px 22px;
          border: 1px solid #1A1A1A;
          background: transparent;
          color: #1A1A1A;
          font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
          font-weight: 500;
          cursor: pointer;
          transition: background .25s, color .25s;
          text-decoration: none;
        }
        .dir-sobre .btn-ghost:hover { background: #1A1A1A; color: #FAFAF7; }
        .dir-sobre .btn-solid {
          display: inline-flex; align-items: center; gap: 10px;
          padding: 14px 22px;
          background: ${accent}; color: #FAFAF7;
          font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
          font-weight: 500;
          border: 0;
          cursor: pointer;
          transition: opacity .25s;
          text-decoration: none;
        }
        .dir-sobre .btn-solid:hover { opacity: 0.85; }
      `}</style>

      {/* ─────────── Top bar ─────────── */}
      <header style={{
        display: 'grid',
        gridTemplateColumns: '1fr auto 1fr',
        alignItems: 'center',
        padding: `28px ${pad}px`,
        borderBottom: '1px solid rgba(26,26,26,0.08)',
        position: 'sticky', top: 0,
        background: 'rgba(250,250,247,0.85)',
        backdropFilter: 'blur(12px)',
        zIndex: 5,
      }}>
        <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(26,26,26,0.55)' }}>
          Île-de-France · depuis 2008
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '0.04em' }}>
          Eco<span style={{ color: accent }}>·</span>tri<span style={{ color: accent }}>·</span>service
        </div>
        <nav style={{ display: 'flex', gap: 32, justifyContent: 'flex-end' }}>
          <a href="#metier">Métier</a>
          <a href="#prestations">Prestations</a>
          <a href="#references">Références</a>
          <a href="#engagement">Engagements</a>
          <a href="#contact" style={{ borderBottom: `1px solid ${accent}`, paddingBottom: 2 }}>Devis</a>
        </nav>
      </header>

      {/* ─────────── Hero ─────────── */}
      <section style={{ padding: `${140 * density}px ${pad}px ${120 * density}px` }}>
        <div className="num" style={{ marginBottom: 64 }}>—— 01 / Maison de gestion des déchets professionnels</div>
        <h1 style={{
          fontSize: 'clamp(64px, 7.6vw, 120px)',
          lineHeight: 0.96,
          letterSpacing: '-0.03em',
          maxWidth: 1100,
          marginBottom: 56,
        }}>
          La gestion des déchets,<br />
          <em style={{ fontStyle: 'italic', color: accent }}>traitée comme un métier d'art.</em>
        </h1>

        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, marginTop: 80, alignItems: 'end' }}>
          <p style={{ fontSize: 18, lineHeight: 1.55, maxWidth: 520, color: 'rgba(26,26,26,0.78)' }}>
            Depuis 2008, Eco-tri-service accompagne les sièges sociaux, hôtels et institutions culturelles dans la
            collecte, la valorisation et la traçabilité de leurs déchets — avec la rigueur d'une maison
            indépendante.
          </p>
          <div style={{ display: 'flex', gap: 16, justifyContent: 'flex-end' }}>
            <a href="#contact" className="btn-solid">Demander un audit</a>
            <a href="#metier" className="btn-ghost">Notre métier</a>
          </div>
        </div>
      </section>

      {/* ─────────── Hero image full bleed ─────────── */}
      <section style={{ padding: `0 ${pad}px ${sectionGap}px` }}>
        <VisAtelier accent={accent} accentSoft={accentSoft} />
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 18 }}>
          <span className="num">FIG. 01 — Centre de valorisation, 2024</span>
          <span className="num">94 % de matière détournée</span>
        </div>
      </section>

      {/* ─────────── Filière diagram ─────────── */}
      <section style={{ padding: `0 ${pad}px ${sectionGap}px` }}>
        <div className="eyebrow" style={{ marginBottom: 32 }}>Données — taux de valorisation</div>
        <VisFiliere accent={accent} accentSoft={accentSoft} />
      </section>

      {/* ─────────── Stats / chiffres ─────────── */}
      <section style={{ padding: `0 ${pad}px ${sectionGap}px` }}>
        <div className="rule-thick" style={{ marginBottom: 48 }} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 40 }}>
          {[
            ['1 248', 'tonnes valorisées en 2025'],
            ['24 h', 'délai d\'intervention moyen'],
            ['87 %', 'taux de matière détournée de l\'enfouissement'],
            ['12', 'flux distincts collectés'],
          ].map(([n, l], i) => (
            <div key={i}>
              <div className="num" style={{ marginBottom: 12 }}>0{i + 1}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 64, lineHeight: 1, fontWeight: 300, marginBottom: 14 }}>
                {n}
              </div>
              <div style={{ fontSize: 13, color: 'rgba(26,26,26,0.65)', maxWidth: 200, lineHeight: 1.45 }}>{l}</div>
            </div>
          ))}
        </div>
        <div className="rule" style={{ marginTop: 48 }} />
      </section>

      {/* ─────────── Manifesto / Métier ─────────── */}
      <section id="metier" style={{ padding: `0 ${pad}px ${sectionGap}px` }}>
        <div className="eyebrow" style={{ marginBottom: 64 }}>02 — Le métier</div>
        <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1fr', gap: 64, marginBottom: 96, alignItems: 'start' }}>
          <VisStillLife accent={accent} accentSoft={accentSoft} />
          <VisCarte accent={accent} accentSoft={accentSoft} />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 96, alignItems: 'start' }}>
          <h2 style={{ fontSize: 'clamp(36px, 3.8vw, 56px)', lineHeight: 1.05 }}>
            Une chaîne courte,<br />maîtrisée de bout en bout.
          </h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
            <p style={{ fontSize: 17, lineHeight: 1.6 }}>
              Pas de sous-traitance opaque. Nos collecteurs, nos camions, nos centres
              partenaires — chaque étape est documentée, pesée, certifiée. Le client
              reçoit chaque mois un bordereau de traçabilité ICPE conforme.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'rgba(26,26,26,0.7)' }}>
              Nous travaillons exclusivement avec des centres de valorisation
              français, en privilégiant la matière&nbsp;: papier reconditionné chez
              Norske Skog, plastique régénéré chez Paprec, biodéchets méthanisés en
              Île-de-France.
            </p>
            <a href="#contact" className="u-link" style={{ marginTop: 16, fontSize: 13, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
              Lire la charte qualité <span aria-hidden="true">→</span>
            </a>
          </div>
        </div>
      </section>

      {/* ─────────── Prestations ─────────── */}
      <section id="prestations" style={{ padding: `0 ${pad}px ${sectionGap}px` }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 56 }}>
          <div className="eyebrow">03 — Prestations</div>
          <div className="num">12 flux · 4 services</div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, borderTop: '1px solid rgba(26,26,26,0.85)' }}>
          {[
            {
              n: '01', t: 'Collecte sur-mesure',
              d: 'Tournées calibrées sur l\'activité du site — du bureau de 30 personnes au campus de 4 000.',
              tags: ['Papier · carton', 'Plastique', 'Biodéchets', 'Verre', 'DEEE', 'DASRI'],
            },
            {
              n: '02', t: 'Audit & conseil',
              d: 'Diagnostic gisement, plan de réduction, accompagnement au décret tertiaire et au tri 5 flux.',
              tags: ['Audit gisement', 'Plan triennal', 'Reporting CSRD', 'Formation équipes'],
            },
            {
              n: '03', t: 'Valorisation matière',
              d: 'Filières courtes et tracées. Restitution mensuelle du devenir de chaque flux, par tonne.',
              tags: ['Recyclage', 'Compostage', 'Réemploi', 'CSR énergie'],
            },
            {
              n: '04', t: 'Événementiel & chantier',
              d: 'Dispositifs ponctuels pour salons, festivals, déménagements — pesée, signalétique, équipe dédiée.',
              tags: ['Salons', 'Festivals', 'Déménagement', 'Curage'],
            },
          ].map((s, i) => (
            <article key={i} className="lift" style={{
              padding: '48px 48px 56px',
              borderBottom: '1px solid rgba(26,26,26,0.12)',
              borderRight: i % 2 === 0 ? '1px solid rgba(26,26,26,0.12)' : 'none',
              cursor: 'pointer',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 28 }}>
                <span className="num">— {s.n}</span>
                <span className="num">↗</span>
              </div>
              <h3 style={{ fontSize: 36, lineHeight: 1.05, marginBottom: 20 }}>{s.t}</h3>
              <p style={{ fontSize: 15, color: 'rgba(26,26,26,0.7)', lineHeight: 1.6, marginBottom: 32, maxWidth: 460 }}>{s.d}</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {s.tags.map(t => (
                  <span key={t} style={{
                    fontSize: 11,
                    letterSpacing: '0.06em',
                    padding: '4px 10px',
                    border: '1px solid rgba(26,26,26,0.2)',
                    borderRadius: 999,
                    color: 'rgba(26,26,26,0.7)',
                  }}>{t}</span>
                ))}
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* ─────────── Truck ─────────── */}
      <section style={{ padding: `0 ${pad}px ${sectionGap}px` }}>
        <VisTruck accent={accent} />
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14 }}>
          <span className="num">Flotte GNV · 60 % d'ici 2027</span>
          <span className="num">FIG. 04</span>
        </div>
      </section>

      {/* ─────────── Process ─────────── */}
      <section style={{ padding: `0 ${pad}px ${sectionGap}px` }}>
        <div className="eyebrow" style={{ marginBottom: 64 }}>04 — Méthode</div>
        <h2 style={{ fontSize: 'clamp(40px, 4.2vw, 64px)', lineHeight: 1.04, maxWidth: 900, marginBottom: 80 }}>
          Quatre temps, une seule équipe à votre table.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
          {[
            ['Diagnostic', '48 h', 'Visite, pesée d\'une semaine type, cartographie du gisement.'],
            ['Plan', '2 sem.', 'Schéma de collecte, contenants, signalétique, formation.'],
            ['Mise en place', '1 mois', 'Installation, premières rotations, ajustements terrain.'],
            ['Pilotage', 'continu', 'Reporting mensuel, revue trimestrielle, optimisation annuelle.'],
          ].map(([t, d, p], i) => (
            <div key={i} style={{
              borderTop: '1px solid rgba(26,26,26,0.85)',
              borderRight: i < 3 ? '1px solid rgba(26,26,26,0.12)' : 'none',
              paddingTop: 24, paddingRight: 24, paddingBottom: 36,
            }}>
              <div className="num" style={{ marginBottom: 32 }}>0{i + 1}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 20 }}>
                <h3 style={{ fontSize: 26 }}>{t}</h3>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: accent }}>{d}</span>
              </div>
              <p style={{ fontSize: 13, lineHeight: 1.55, color: 'rgba(26,26,26,0.65)' }}>{p}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ─────────── Références ─────────── */}
      <section id="references" style={{ padding: `0 ${pad}px ${sectionGap}px` }}>
        <div className="eyebrow" style={{ marginBottom: 56 }}>05 — Ils nous font confiance</div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)',
          borderTop: '1px solid rgba(26,26,26,0.12)',
          borderBottom: '1px solid rgba(26,26,26,0.12)',
        }}>
          {['Maison Hermès', 'Musée d\'Orsay', 'Lazard', 'Hôtel Lutetia', 'Sciences Po', 'Galeries Lafayette',
            'Le Bon Marché', 'BNF', 'Sotheby\'s', 'Mazars', 'INSEAD', 'Ritz Paris'].map((n, i) => (
            <div key={n} style={{
              padding: '36px 20px',
              borderRight: (i + 1) % 6 !== 0 ? '1px solid rgba(26,26,26,0.08)' : 'none',
              borderBottom: i < 6 ? '1px solid rgba(26,26,26,0.08)' : 'none',
              fontFamily: 'var(--font-display)',
              fontSize: 17,
              fontStyle: 'italic',
              color: 'rgba(26,26,26,0.7)',
              textAlign: 'center',
            }}>{n}</div>
          ))}
        </div>

        {/* Testimonial */}
        <figure style={{ marginTop: 96, display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'start' }}>
          <VisPortrait accent={accent} accentSoft={accentSoft} />
          <blockquote style={{ margin: 0 }}>
            <div className="num" style={{ marginBottom: 32 }}>« Témoignage</div>
            <p style={{
              fontFamily: 'var(--font-display)',
              fontSize: 'clamp(28px, 2.8vw, 40px)',
              fontWeight: 300,
              lineHeight: 1.25,
              fontStyle: 'italic',
              marginBottom: 32,
            }}>
              « Eco-tri-service a transformé un point logistique pénible en un argument
              de marque. Leur reporting est devenu la base de notre rapport CSRD —
              section déchets — sans retouche. »
            </p>
            <figcaption style={{ fontSize: 13, lineHeight: 1.6 }}>
              <strong style={{ fontWeight: 500 }}>Delphine Aubry</strong><br />
              <span style={{ color: 'rgba(26,26,26,0.6)' }}>Directrice RSE — Maison Hermès, depuis 2019</span>
            </figcaption>
          </blockquote>
        </figure>
      </section>

      {/* ─────────── Engagement ─────────── */}
      <section id="engagement" style={{
        padding: `${120 * density}px ${pad}px`,
        background: '#1A1A1A',
        color: '#FAFAF7',
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 96, alignItems: 'end' }}>
          <div>
            <div className="eyebrow" style={{ color: 'rgba(250,250,247,0.55)', marginBottom: 32 }}>06 — Engagements</div>
            <h2 style={{ fontSize: 'clamp(40px, 4.4vw, 68px)', lineHeight: 1.02, color: '#FAFAF7' }}>
              Un seuil&nbsp;: zéro&nbsp;tonne enfouie d'ici&nbsp;2030.
            </h2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            {[
              ['Filière française', 'Aucun déchet exporté hors UE. Filières documentées dans un rayon de 250 km.'],
              ['Flotte décarbonée', '60 % de la flotte en GNV ou électrique d\'ici 2027. Compensation des kilomètres restants.'],
              ['Salaires & équité', 'Grille publique, parité dans l\'encadrement, intéressement collectif depuis 2014.'],
              ['Certifications', 'ISO 14001 · ISO 9001 · ICPE · agrément Écomaison.'],
            ].map(([t, d], i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '60px 200px 1fr',
                gap: 32, paddingBottom: 24,
                borderBottom: '1px solid rgba(250,250,247,0.15)',
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'rgba(250,250,247,0.55)' }}>0{i + 1}</span>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: '#FAFAF7' }}>{t}</h3>
                <p style={{ fontSize: 14, color: 'rgba(250,250,247,0.7)', lineHeight: 1.55 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─────────── Contact ─────────── */}
      <section id="contact" style={{ padding: `${140 * density}px ${pad}px ${120 * density}px` }}>
        <div className="eyebrow" style={{ marginBottom: 48 }}>07 — Premier échange</div>
        <h2 style={{ fontSize: 'clamp(56px, 6vw, 96px)', lineHeight: 0.98, marginBottom: 64, maxWidth: 1100 }}>
          Parlons gisement.<br />
          <em style={{ fontStyle: 'italic', color: accent }}>Réponse sous 48h ouvrées.</em>
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 96, alignItems: 'start' }}>
          <form onSubmit={(e) => e.preventDefault()} style={{ display: 'grid', gap: 28 }}>
            {[
              { l: 'Société', p: 'Maison Lemaire', n: 'co' },
              { l: 'Contact', p: 'Prénom Nom · Fonction', n: 'na' },
              { l: 'Email professionnel', p: 'prenom.nom@maison.fr', n: 'em' },
              { l: 'Site & effectif', p: 'Paris 8e — 320 collaborateurs', n: 'st' },
            ].map(f => (
              <label key={f.n} style={{ display: 'grid', gap: 10 }}>
                <span className="num" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase' }}>{f.l}</span>
                <input
                  placeholder={f.p}
                  style={{
                    border: 0, borderBottom: '1px solid rgba(26,26,26,0.25)',
                    background: 'transparent', padding: '10px 0',
                    fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 300,
                    outline: 'none', color: '#1A1A1A',
                  }}
                />
              </label>
            ))}
            <label style={{ display: 'grid', gap: 10, marginTop: 8 }}>
              <span className="num" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Besoin</span>
              <textarea rows={3} placeholder="Quelques mots sur votre site, vos flux, votre échéance…"
                style={{
                  border: 0, borderBottom: '1px solid rgba(26,26,26,0.25)',
                  background: 'transparent', padding: '10px 0',
                  fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.55,
                  outline: 'none', color: '#1A1A1A', resize: 'none',
                }} />
            </label>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 16 }}>
              <span className="num">Données traitées en interne — RGPD.</span>
              <button type="submit" className="btn-solid">Envoyer la demande</button>
            </div>
          </form>

          <aside style={{ borderLeft: '1px solid rgba(26,26,26,0.12)', paddingLeft: 56 }}>
            <div className="num" style={{ marginBottom: 24 }}>Direction commerciale</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, lineHeight: 1.25, marginBottom: 8 }}>
              Camille Rocher
            </div>
            <div style={{ fontSize: 13, color: 'rgba(26,26,26,0.7)', marginBottom: 32 }}>
              Comptes-clés · Île-de-France
            </div>
            <div style={{ fontSize: 14, lineHeight: 1.8 }}>
              <div>+33 1 47 22 08 14</div>
              <div>camille.rocher@eco-tri-service.fr</div>
            </div>
            <div className="rule" style={{ margin: '40px 0' }} />
            <div className="num" style={{ marginBottom: 16 }}>Atelier · siège</div>
            <div style={{ fontSize: 14, lineHeight: 1.7 }}>
              14 quai du Châtelier<br />
              92230 Gennevilliers<br />
              Lun – Ven · 7h – 19h
            </div>
          </aside>
        </div>
      </section>

      {/* ─────────── Footer ─────────── */}
      <footer style={{ padding: `64px ${pad}px 48px`, borderTop: '1px solid rgba(26,26,26,0.12)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 64, marginBottom: 80 }}>
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, marginBottom: 20 }}>
              Eco<span style={{ color: accent }}>·</span>tri<span style={{ color: accent }}>·</span>service
            </div>
            <p style={{ fontSize: 13, color: 'rgba(26,26,26,0.65)', maxWidth: 320, lineHeight: 1.6 }}>
              Maison indépendante de gestion des déchets, fondée à Gennevilliers en 2008.
            </p>
          </div>
          {[
            ['Maison', ['Métier', 'Méthode', 'Engagements', 'Carrières']],
            ['Prestations', ['Collecte', 'Audit', 'Valorisation', 'Événementiel']],
            ['Légal', ['Mentions', 'CGV', 'Confidentialité', 'ICPE']],
          ].map(([t, items]) => (
            <div key={t}>
              <div className="eyebrow" style={{ marginBottom: 18 }}>{t}</div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {items.map(i => (
                  <li key={i} style={{ fontSize: 13 }}><a href="#" style={{ color: '#1A1A1A', textDecoration: 'none' }}>{i}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="rule" />
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 28, fontSize: 11, letterSpacing: '0.06em', color: 'rgba(26,26,26,0.55)' }}>
          <span>© Eco-tri-service SAS · 2008–2026 · SIRET 503 218 117 00018</span>
          <span>Made in Gennevilliers</span>
        </div>
      </footer>
    </div>
  );
}

window.DirSobre = DirSobre;