// Inera People — marketing site sections
(() => {
const { Button, Card, Badge, Tag, Avatar, Input, Textarea, Select } = window.IneraPeopleDesignSystem_7b6830;

// Lucide icon helper (see ICONOGRAPHY — Lucide substitutes for an unspecified set)
function Icon({ name, size = 22, color = "currentColor", stroke = 1.6, style = {} }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = "";
      const el = document.createElement("i");
      el.setAttribute("data-lucide", name);
      ref.current.appendChild(el);
      window.lucide.createIcons({
        attrs: { width: size, height: size, stroke: color, "stroke-width": stroke },
      });
    }
  }, [name, size, color, stroke]);
  return <span ref={ref} style={{ display: "inline-flex", ...style }} />;
}

// Sends a form's contents to contact@inerapeople.fr through the site's own
// server endpoint (send.php). Nothing opens on the visitor's device and no
// third-party service is involved. If a file is given (candidate CV), it is
// sent as multipart so send.php can attach it. Returns true on success.
async function sendByEmail(subject, fields, file) {
  const emailValue = Object.values(fields).find(
    (v) => typeof v === "string" && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim())
  );
  try {
    let res;
    if (file && file.size) {
      const form = new FormData();
      form.append("_subject", subject);
      form.append("_replyto", emailValue || "");
      Object.entries(fields).forEach(([k, v]) => form.append(k, v == null ? "" : v));
      form.append("cv", file, file.name);
      // No explicit Content-Type: the browser sets the multipart boundary.
      res = await fetch("send.php", { method: "POST", body: form });
    } else {
      const payload = { _subject: subject, _replyto: emailValue || "", ...fields };
      res = await fetch("send.php", {
        method: "POST",
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        body: JSON.stringify(payload),
      });
    }
    const data = await res.json().catch(() => null);
    return res.ok && data && data.ok === true;
  } catch (err) {
    return false;
  }
}

// Scroll-reveal wrapper — fades + slides its child in when it enters the viewport.
function Reveal({ children, delay = 0, y = 26, once = true, style = {}, className }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      setShown(true); return;
    }
    const root = el.closest("[data-scroll]") || null;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { setShown(true); if (once) io.unobserve(e.target); }
        else if (!once) setShown(false);
      });
    }, { root, threshold: 0.15, rootMargin: "0px 0px -6% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, [once]);
  return (
    <div ref={ref} className={className} style={{
      opacity: shown ? 1 : 0,
      transform: shown ? "none" : `translateY(${y}px)`,
      transition: `opacity 760ms var(--ease-out) ${delay}ms, transform 760ms var(--ease-out) ${delay}ms`,
      willChange: "opacity, transform",
      ...style,
    }}>{children}</div>
  );
}

// Count-up number, runs once when `run` becomes true.
function useCountUp(target, run, dur = 1300) {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    if (!run) return;
    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setVal(target); return; }
    let raf, start;
    const tick = (t) => {
      if (!start) start = t;
      const p = Math.min(1, (t - start) / dur);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(eased * target));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [run, target, dur]);
  return val;
}

// Rotating word — swaps through a list with a fade.
function WordRotator({ words, interval = 1500, style = {} }) {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const id = setInterval(() => setI((v) => (v + 1) % words.length), interval);
    return () => clearInterval(id);
  }, [words.length, interval]);
  return <span key={i} className="rotator" style={style}>{words[i]}</span>;
}

// Infinite scrolling banner — refined, premium.
function Marquee({ items }) {
  const row = [...items, ...items];
  return (
    <div className="marquee" style={{ background: "var(--ink-800)", borderTop: "1px solid var(--border-on-ink)", borderBottom: "1px solid var(--border-on-ink)", padding: "20px 0" }}>
      <div className="marquee-track">
        {row.map((it, idx) => (
          <span key={idx} style={{ display: "inline-flex", alignItems: "center", gap: 40, paddingRight: 40 }}>
            <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-300)" }}>{it}</span>
            <span style={{ width: 4, height: 4, borderRadius: "50%", background: "var(--metal-mid)", opacity: 0.8 }} />
          </span>
        ))}
      </div>
    </div>
  );
}

// Small rule + label used to open every section — a quiet, consistent signature.
function Eyebrow({ children, tone = "accent", center = false, style = {} }) {
  const color = tone === "ink" ? "var(--metal-mid)" : "var(--accent)";
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: center ? "center" : "flex-start", gap: 10, marginBottom: 14, ...style }}>
      <span style={{ width: 26, height: 1, background: color, flexShrink: 0 }} />
      <span className="eyebrow" style={{ margin: 0, color }}>{children}</span>
    </div>
  );
}

/* ---------------- Hero ---------------- */
function Hero({ onContact }) {
  const [mounted, setMounted] = React.useState(false);
  const [scroll, setScroll] = React.useState(0);
  React.useEffect(() => { const t = setTimeout(() => setMounted(true), 60); return () => clearTimeout(t); }, []);
  React.useEffect(() => {
    const sc = document.querySelector("[data-scroll]");
    if (!sc) return;
    const onScroll = () => setScroll(sc.scrollTop);
    sc.addEventListener("scroll", onScroll, { passive: true });
    return () => sc.removeEventListener("scroll", onScroll);
  }, []);
  const fade = Math.max(0, 1 - scroll / 460);
  const drift = Math.min(60, scroll * 0.14);


  const y6 = useCountUp(6, mounted);
  const stats = [
    { node: y6, suffix: " ans", label: "à recruter des profils clés" },
    { node: "RH · Juridique · Commercial", suffix: "", label: "trois expertises" },
    { node: "CDD · CDI", suffix: "", label: "tous secteurs, France" },
  ];
  const stagger = (i) => ({
    opacity: mounted ? 1 : 0,
    transform: mounted ? "none" : "translateY(22px)",
    transition: `opacity 800ms var(--ease-out) ${i * 110}ms, transform 800ms var(--ease-out) ${i * 110}ms`,
  });
  return (
    <section style={{
      position: "relative", minHeight: "100vh", display: "flex", alignItems: "center",
      padding: "clamp(90px,13vh,150px) clamp(20px,5vw,56px) clamp(90px,13vh,150px)",
      color: "var(--ink-50)", overflow: "hidden",
      background: "var(--ink-800)",
    }}>
      {/* corporate photo backdrop — charcoal wash on top keeps it on-brand */}
      <img
        src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1600&q=80"
        alt="" aria-hidden="true" className="hero-photo"
      />
      <div style={{
        position: "absolute", inset: 0, zIndex: 0,
        background: "linear-gradient(165deg, rgba(20,20,20,0.86) 0%, rgba(20,20,20,0.91) 48%, rgba(13,13,13,0.96) 100%)",
      }} />
      <div className="hero-orb hero-orb-1" />
      <div className="hero-orb hero-orb-2" />
      <div className="hero-orb hero-orb-3" />

      <div style={{
        position: "absolute", inset: 0, zIndex: 0,
        background: "radial-gradient(96% 74% at 82% 0%, rgba(255,255,255,0.05) 0%, rgba(35,77,120,0.10) 52%, transparent 76%)",
      }} />
      <div style={{ position: "relative", zIndex: 1, maxWidth: 920, opacity: fade, transform: `translateY(${-drift}px)`, width: "100%" }}>
        <h1 style={{ fontSize: "clamp(2rem, 3.8vw, 3.3rem)", lineHeight: 1.1, letterSpacing: "-0.03em", color: "var(--ink-50)", margin: 0, maxWidth: "18ch", ...stagger(1) }}>
          Le recrutement de vos <span style={{
            background: "var(--gradient-metal)", WebkitBackgroundClip: "text",
            backgroundClip: "text", WebkitTextFillColor: "transparent",
          }}>cadres & dirigeants</span>
        </h1>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-md)", lineHeight: 1.6, color: "var(--ink-300)", margin: "22px 0 0", maxWidth: "58ch", ...stagger(2) }}>
          Cabinet de recrutement indépendant dédié aux fonctions RH, juridiques et commerciales. Recherche par approche directe, sélection exigeante, confidentialité absolue : chaque mandat est mené avec la rigueur qu'imposent les postes de direction.
        </p>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", color: "var(--ink-200)", margin: "18px 0 0", maxWidth: "62ch", lineHeight: 1.6, ...stagger(3) }}>
          Vous êtes{" "}
          <WordRotator
            words={["une founding team", "une scale-up", "un grand groupe", "en pleine transformation", "face à un enjeu de gouvernance"]}
            interval={1500}
            style={{ fontFamily: "var(--font-display)", fontWeight: 600, letterSpacing: "-0.01em", color: "var(--metal-light)" }}
          />
          {" "}? Inera People a l'expertise pour transformer votre recherche en un recrutement qui s'impose dans la durée.
        </p>
        <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 14, marginTop: 38, ...stagger(4) }}>
          <Button variant="metal" size="lg" onClick={onContact} style={{ borderRadius: 10 }}>Confier une recherche</Button>
          <Button variant="outline" size="lg" onClick={() => { const el = document.getElementById("approche"); const sc = document.querySelector("[data-scroll]"); if (el && sc) sc.scrollTo({ top: el.offsetTop - 20, behavior: "smooth" }); }} style={{ color: "var(--ink-50)", borderColor: "var(--border-on-ink-strong)", borderRadius: 10 }}>
            Découvrir l'approche
          </Button>
        </div>
        <div className="hero-stats" style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: 0, marginTop: 52, maxWidth: 680, ...stagger(5) }}>
          {stats.map((s, i) => (
            <div key={i} style={{ display: "flex", flexDirection: "column", gap: 4, borderLeft: "1px solid var(--border-on-ink)", paddingLeft: 18 }}>
              <span style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-md)", fontWeight: 600, color: "var(--ink-50)", letterSpacing: "-0.01em", lineHeight: 1.15 }}>
                {s.node}{s.suffix}
              </span>
              <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--ink-400)", letterSpacing: "0.02em", lineHeight: 1.35 }}>{s.label}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="scroll-cue" style={{ opacity: fade }}>
        <span style={{ fontFamily: "var(--font-sans)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-500)" }}>Défiler</span>
        <Icon name="chevron-down" size={18} color="var(--ink-400)" stroke={1.6} />
      </div>
    </section>
  );
}

/* ---------------- Métiers ---------------- */
function Metiers() {
  const items = [
    {
      icon: "users-round", title: "Ressources Humaines",
      photo: "https://images.unsplash.com/photo-1573497491208-6b1acb260507?auto=format&fit=crop&w=1000&q=80",
      lead: "Des fonctions RH stratégiques aux expertises pointues.",
      roles: ["DRH · RRH · HR Business Partner", "Talent Acquisition · Recrutement", "Comp & Ben · Paie & ADP", "Formation · L&D · Développement RH", "Relations sociales · QVCT", "SIRH · People Analytics"],
      tags: ["CDI", "CDD", "Cadres & direction"],
    },
    {
      icon: "scale", title: "Juridique",
      photo: "https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=1000&q=80",
      lead: "Du conseil corporate au droit social, en passant par la conformité.",
      roles: ["Directeur · Responsable juridique", "Corporate · M&A · Private Equity", "Contrats · Droit commercial", "Droit social · Relations collectives", "Compliance · Éthique · DPO", "Contentieux · Propriété intellectuelle"],
      tags: ["CDI", "CDD", "Cadres & direction"],
    },
    {
      icon: "trending-up", title: "Commercial",
      photo: "https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=1000&q=80",
      lead: "Les profils qui portent la croissance, du terrain à la direction.",
      roles: ["Directeur commercial · Head of Sales", "Directeur du développement · Business Development", "Key Account · Grands comptes", "Direction de BU · Country Manager", "Sales Ops · Revenue Operations", "Marketing · Partenariats"],
      tags: ["CDI", "CDD", "Cadres & direction"],
    },
  ];
  return (
    <section id="métiers" style={{ position: "relative", background: "linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 100%)", padding: "var(--section-y) clamp(20px,5vw,56px)" }}>
      <div aria-hidden="true" style={{ position: "absolute", top: 0, left: 0, right: 0, height: 1, background: "linear-gradient(90deg, transparent, var(--border-on-ink-strong) 50%, transparent)", pointerEvents: "none" }} />
      <div style={{ position: "relative", maxWidth: "var(--container-xl)", margin: "0 auto" }}>
        <Reveal>
          <div style={{ maxWidth: "48ch", marginBottom: 52 }}>
            <Eyebrow>Les métiers</Eyebrow>
            <h2 style={{ fontSize: "var(--text-3xl)", color: "var(--ink-50)", margin: 0 }}>Trois expertises, une même exigence</h2>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-md)", color: "var(--ink-300)", marginTop: 14 }}>
              Une spécialisation forte sur trois familles de métiers, et une connaissance fine de chaque fonction, de son marché et de ses grilles de rémunération.
            </p>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 22 }}>
          {items.map((it, i) => (
            <Reveal key={it.title} delay={i * 110} style={{ display: "flex" }}>
              <Card className="metier-card" variant="ink" padding="none" interactive style={{ overflow: "hidden", display: "flex", flexDirection: "column", width: "100%", background: "var(--ink-800)" }}>
                <div style={{ position: "relative", height: 172, overflow: "hidden", background: "var(--ink-700)" }}>
                  <img className="metier-img" src={it.photo} alt={it.title} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", filter: "grayscale(0.55) saturate(0.65) contrast(1.1) brightness(0.95)", display: "block" }} />
                  <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(10,28,41,0.04) 0%, rgba(10,28,41,0.46) 100%)" }} />
                </div>
                <div style={{ padding: "30px 28px", display: "flex", flexDirection: "column", flex: 1 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 14 }}>
                    <span style={{
                      width: 44, height: 44, borderRadius: "50%", flexShrink: 0,
                      display: "flex", alignItems: "center", justifyContent: "center",
                      background: "transparent",
                      border: `1.5px solid var(--accent)`,
                      color: "var(--accent)",
                    }}>
                      <Icon name={it.icon} size={20} stroke={1.5} />
                    </span>
                    <h3 style={{ fontSize: "var(--text-xl)", margin: 0, color: "var(--ink-50)" }}>{it.title}</h3>
                  </div>
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--ink-300)", lineHeight: 1.5, margin: "0 0 16px" }}>{it.lead}</p>
                  <div style={{ display: "flex", flexDirection: "column", marginBottom: 18 }}>
                    {it.roles.map((r) => (
                      <div key={r} style={{ display: "flex", alignItems: "baseline", gap: 10, fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: 1.5, color: "var(--ink-200)", padding: "8px 0", borderTop: "1px solid var(--border-on-ink)" }}>
                        <span style={{ width: 4, height: 4, borderRadius: "50%", background: "var(--accent)", flexShrink: 0, transform: "translateY(-2px)" }} />
                        <span>{r}</span>
                      </div>
                    ))}
                  </div>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: "auto" }}>
                    {it.tags.map((t) => <Badge key={t} tone="neutral" variant="soft" style={{ background: "var(--ink-700)", color: "var(--ink-200)", border: "1px solid var(--border-on-ink)" }}>{t}</Badge>)}
                  </div>
                </div>
              </Card>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Missions (le spectre) ---------------- */
function Missions() {
  const rows = [
    { n: "01", icon: "sprout", title: "Founding team & premiers cadres", desc: "Structurer l'équipe dirigeante d'une entreprise qui se lance : associés opérationnels, premières directions de fonction, profils fondateurs d'un métier." },
    { n: "02", icon: "rocket", title: "Scale-up & hypercroissance", desc: "Recruter les profils qui accompagnent une montée en puissance rapide, sans jamais diluer la culture ni l'exigence." },
    { n: "03", icon: "shield-check", title: "Recrutement stratégique & confidentiel", desc: "Sécuriser un poste sensible, préparer une succession ou remplacer un dirigeant en place, en toute discrétion." },
    { n: "04", icon: "refresh-cw", title: "Transformation & repositionnement", desc: "Accompagner un changement d'organisation, une nouvelle direction ou un virage stratégique par les bons recrutements." },
    { n: "05", icon: "landmark", title: "Gouvernance · COMEX & CODIR", desc: "Recomposer un comité de direction, intégrer un membre de COMEX ou de CODIR, préparer une transition de gouvernance." },
    { n: "06", icon: "building-2", title: "Grands groupes, à fort enjeu", desc: "Répondre à des recrutements cadres critiques, tous secteurs, à l'échelle nationale comme internationale." },
  ];
  return (
    <section id="missions" style={{ position: "relative", background: "linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 100%)", padding: "var(--section-y) clamp(20px,5vw,56px)" }}>
      <div aria-hidden="true" style={{ position: "absolute", top: 0, left: 0, right: 0, height: 1, background: "linear-gradient(90deg, transparent, var(--border-on-ink-strong) 50%, transparent)", pointerEvents: "none" }} />
      <div style={{ maxWidth: "var(--container-xl)", margin: "0 auto" }}>
        <Reveal>
          <div style={{ maxWidth: "54ch", marginBottom: 56 }}>
            <Eyebrow>Le spectre des missions</Eyebrow>
            <h2 style={{ fontSize: "var(--text-3xl)", color: "var(--ink-50)", margin: 0 }}>De la première embauche à la gouvernance d'un groupe</h2>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-md)", color: "var(--ink-300)", marginTop: 14 }}>
              Chaque contexte a ses enjeux. Le même soin, la même exigence, que vous structuriez une équipe naissante ou que vous recomposiez une direction.
            </p>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: "0 clamp(40px,5vw,80px)" }}>
          {rows.map((r, i) => (
            <Reveal key={r.n} delay={(i % 2) * 90}>
              <div className="mission-row" style={{ display: "flex", gap: 20, padding: "26px 0", borderTop: "1px solid var(--border-on-ink)" }}>
                <div style={{ flex: 1 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 9 }}>
                    <span style={{ color: "var(--accent)", display: "inline-flex" }}><Icon name={r.icon} size={20} stroke={1.7} /></span>
                    <h3 style={{ fontSize: "var(--text-lg)", color: "var(--ink-50)", margin: 0 }}>{r.title}</h3>
                  </div>
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: 1.6, color: "var(--ink-300)", margin: 0 }}>{r.desc}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Manifesto band (full-bleed image + signature quote) ---------------- */
function Manifesto() {
  return (
    <section style={{ position: "relative", overflow: "hidden", background: "var(--ink-900)" }}>
      <img
        className="manifesto-img"
        src="https://images.unsplash.com/photo-1543269865-cbf427effbad?auto=format&fit=crop&w=1600&q=80"
        alt=""
        loading="lazy"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", filter: "grayscale(0.85) saturate(0.5) contrast(1.02) brightness(0.42)" }}
      />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(100deg, rgba(13,13,13,0.94) 0%, rgba(20,20,20,0.90) 55%, rgba(28,28,28,0.78) 100%)" }} />
      <div style={{ position: "relative", maxWidth: "var(--container-lg)", margin: "0 auto", padding: "clamp(96px,14vw,170px) clamp(20px,5vw,56px)" }}>
        <Reveal>
          <Eyebrow style={{ marginBottom: 28 }}>Le vrai enjeu</Eyebrow>
          <blockquote style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(1.5rem, 2.8vw, 2.35rem)", lineHeight: 1.34, letterSpacing: "-0.015em", color: "var(--ink-50)", maxWidth: "26ch" }}>
            Un bon recrutement ne consiste pas à remplir un poste vacant sur les fonctions centrales de l'entreprise. C'est une décision à fort impact, qui engage la stratégie collective.
          </blockquote>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-md)", color: "var(--ink-200)", marginTop: 32, maxWidth: "52ch", lineHeight: 1.7 }}>
            Elle se prend avec rigueur : les bonnes questions, l'exigence juste, et la discrétion d'un tiers de confiance.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- Approche (méthodologie — timeline exec) ---------------- */
function Approche() {
  const steps = [
    { title: "Brief & cadrage stratégique", desc: "Bien plus qu'une fiche de poste. le besoin est challengé, l'organisation cartographiée et la job description co-construite avec vous : compétences clés, soft skills, package et trajectoire de carrière." },
    { title: "Mapping de marché", desc: "Cartographie exhaustive des viviers : secteurs, concurrents, profils actifs et passifs. Une lecture claire du marché et des rémunérations, avant même la première approche." },
    { title: "Approche directe & évaluation", desc: "Chasse ciblée et confidentielle, entretiens structurés, mises en situation, prise de références. Recouper, vérifier, ne rien tenir pour acquis." },
    { title: "Conseil & accompagnement", desc: "Tiers de confiance entre l'entreprise et le candidat : positionnement, marque employeur, négociation salariale, aide à la décision. Un vrai rôle de conseil à chaque étape." },
    { title: "Intégration & suivi", desc: "Un cycle de bout en bout : accompagnement jusqu'à la prise de poste, suivi de la période d'essai, garantie d'un recrutement qui s'inscrit dans la durée." },
  ];
  return (
    <section id="approche" style={{ position: "relative", background: "linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 100%)", color: "var(--ink-50)", padding: "var(--section-y) clamp(20px,5vw,56px)" }}>
      <div aria-hidden="true" style={{ position: "absolute", top: 0, left: 0, right: 0, height: 1, background: "linear-gradient(90deg, transparent, var(--border-on-ink-strong) 50%, transparent)", pointerEvents: "none" }} />
      <div style={{ maxWidth: "var(--container-xl)", margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "minmax(240px, 360px) 1fr", gap: "48px clamp(48px,7vw,110px)", alignItems: "start" }} className="approche-grid">
          <Reveal>
            <div style={{ position: "sticky", top: 110 }} className="approche-intro">
              <Eyebrow>La méthode</Eyebrow>
              <h2 style={{ fontSize: "var(--text-3xl)", color: "var(--ink-50)", margin: 0 }}>Un accompagnement sur mesure, à chaque étape du cycle</h2>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-md)", color: "var(--ink-300)", marginTop: 16, lineHeight: 1.6 }}>
                Un interlocuteur unique, du premier brief à l'intégration. Une exigence de grand cabinet, la proximité d'un partenaire de confiance.
              </p>
              <div style={{ marginTop: 28 }}>
                <Button variant="metal" size="md" onClick={() => { const el = document.getElementById("contact"); const sc = document.querySelector("[data-scroll]"); if (el && sc) sc.scrollTo({ top: el.offsetTop - 20, behavior: "smooth" }); }}>
                  Parler de votre projet
                </Button>
              </div>
            </div>
          </Reveal>
          <div className="timeline">
            {steps.map((s, i) => (
              <Reveal key={s.title} delay={i * 70}>
                <div style={{ display: "flex", gap: 22, paddingBottom: i === steps.length - 1 ? 0 : 34 }}>
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "center", flexShrink: 0 }}>
                    <span style={{
                      width: 40, height: 40, borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center",
                      border: "1px solid rgba(58,114,172,0.45)", background: "var(--ink-800)",
                      fontFamily: "var(--font-display)", fontSize: "var(--text-sm)", fontWeight: 600, color: "var(--blue-400)",
                    }}>{String(i + 1).padStart(2, "0")}</span>
                    {i < steps.length - 1 ? <span style={{ flex: 1, width: 1, background: "linear-gradient(var(--border-on-ink-strong), transparent)", marginTop: 8, minHeight: 24 }} /> : null}
                  </div>
                  <div style={{ paddingTop: 6 }}>
                    <h3 style={{ fontSize: "var(--text-lg)", color: "var(--ink-50)", margin: "0 0 7px" }}>{s.title}</h3>
                    <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--ink-300)", margin: 0, lineHeight: 1.6, maxWidth: "56ch" }}>{s.desc}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Fondatrice ---------------- */
function Fondatrice({ onContact }) {
  return (
    <section id="fondatrice" style={{ position: "relative", background: "linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 100%)", padding: "var(--section-y) clamp(20px,5vw,56px)" }}>
      <div aria-hidden="true" style={{ position: "absolute", top: 0, left: 0, right: 0, height: 1, background: "linear-gradient(90deg, transparent, var(--border-on-ink-strong) 50%, transparent)", pointerEvents: "none" }} />
      <div style={{ position: "relative", maxWidth: "var(--container-lg)", margin: "0 auto", display: "grid", gridTemplateColumns: "180px 1fr", gap: "clamp(28px,5vw,64px)", alignItems: "center" }} className="founder-grid">
        <Reveal y={30}>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
            <img src="assets/founder.jpeg" alt="Sabrina Chouasnard, fondatrice d'Inera People" style={{
              width: 128, height: 128, borderRadius: "var(--radius-lg)",
              display: "block", boxShadow: "var(--shadow-md)", objectFit: "cover",
              border: "1px solid var(--border-on-ink)",
            }} />
            <div style={{ textAlign: "center" }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-sm)", fontWeight: 600, color: "var(--ink-50)" }}>Sabrina Chouasnard</div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--ink-400)", letterSpacing: "0.02em", marginTop: 2 }}>Fondatrice</div>
              <a href="https://www.linkedin.com/in/sabrina-chouasnard-rh/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"
                 style={{
                   display: "inline-flex", alignItems: "center", justifyContent: "center",
                   width: 22, height: 22, borderRadius: "var(--radius-sm, 6px)", marginTop: 10,
                   border: "1px solid var(--border-on-ink)", color: "var(--ink-300)",
                   transition: "border-color 160ms ease, color 160ms ease",
                 }}
                 onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--accent)"; e.currentTarget.style.color = "var(--accent)"; }}
                 onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--border-on-ink)"; e.currentTarget.style.color = "var(--ink-300)"; }}>
                <svg viewBox="0 0 20 23" width="11" height="11" fill="currentColor" aria-hidden="true" style={{ display: "block" }}>
                  <path d="M4.98 3.5C4.98 4.88 3.94 6 2.5 6S0 4.88 0 3.5 1.04 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zm7 0h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-6.5c0-1.55-.03-3.55-2.16-3.55-2.16 0-2.5 1.69-2.5 3.44V23h-4V8z" />
                </svg>
              </a>
            </div>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div>
            <blockquote style={{ margin: "0 0 20px", fontFamily: "var(--font-display)", fontWeight: 500, fontStyle: "italic", fontSize: "var(--text-lg)", lineHeight: 1.4, letterSpacing: "-0.005em", color: "var(--ink-50)", maxWidth: "30ch" }}>
              « Faire les choses avec soin, sans jamais brader la qualité au profit de la vitesse. »
            </blockquote>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-md)", color: "var(--ink-200)", lineHeight: 1.7, margin: "0 0 16px" }}>
              6 ans d'expérience dans le recrutement par approche directe et une expertise forte sur les métiers RH, juridiques et commerciaux, auprès d'entreprises très variées. Comprendre vite un métier, un marché, une culture, et prendre le temps des bonnes questions avant de présenter un profil : c'est là que se joue un recrutement réussi.
            </p>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", color: "var(--ink-300)", lineHeight: 1.7, margin: "0 0 26px" }}>
              L'objectif reste le même à chaque mission : des recrutements justes, qui tiennent dans le temps, et des relations de confiance qui durent, côté entreprises comme côté candidats.
            </p>
            <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
              <Button variant="primary" onClick={onContact}>Échanger avec Sabrina</Button>
            </div>
          </div>
        </Reveal>
      </div>
      <div style={{ maxWidth: "var(--container-lg)", margin: "56px auto 0", display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(230px, 1fr))", gap: 18 }}>
        {[
          { icon: "search", title: "Le fond avant la forme", desc: "La bonne personne coche rarement le plus de cases sur le papier. Au-delà du CV, le fond, la trajectoire et l'adéquation réelle priment." },
          { icon: "zap", title: "Chaque semaine compte", desc: "Sur un poste clé, tout avance vite, avec la même exigence, du premier échange à l'intégration." },
          { icon: "scale", title: "Des faits, pas des impressions", desc: "Recouper, vérifier, ne rien tenir pour acquis. Une décision d'embauche se prend sur des faits, pas sur une impression." },
          { icon: "handshake", title: "Le lien avant la transaction", desc: "La relation compte bien au-delà de la signature. C'est ce qui construit des partenariats durables." },
        ].map((c, i) => (
          <Reveal key={c.title} delay={i * 90} style={{ display: "flex" }}>
            <div className="conviction-card" style={{ background: "var(--ink-800)", border: "1px solid var(--border-on-ink)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-sm)", padding: "28px 26px", width: "100%" }}>
              <div style={{ display: "flex", alignItems: "flex-start", gap: 12, marginBottom: 14, color: "var(--accent)", minHeight: 44 }}>
                <Icon name={c.icon} size={19} stroke={1.6} />
                <span style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-base)", fontWeight: 600, color: "var(--ink-50)" }}>{c.title}</span>
              </div>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: 1.6, color: "var(--ink-300)", margin: 0 }}>{c.desc}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

/* ---------------- Contact ---------------- */
function Contact() {
  const { Tabs } = window.IneraPeopleDesignSystem_7b6830;
  const [audience, setAudience] = React.useState("Entreprises");
  const [sent, setSent] = React.useState(false);
  const isClient = audience === "Entreprises";
  const switchTo = (v) => { setAudience(v); setSent(false); };
  return (
    <section id="contact" style={{ position: "relative", background: "radial-gradient(120% 78% at 50% 0%, rgba(255,255,255,0.045) 0%, transparent 56%), linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 100%)", padding: "var(--section-y) clamp(20px,5vw,56px)" }}>
      <div aria-hidden="true" style={{ position: "absolute", top: 0, left: 0, right: 0, height: 1, background: "linear-gradient(90deg, transparent, var(--border-on-ink-strong) 50%, transparent)", pointerEvents: "none" }} />
      <div style={{ position: "relative", maxWidth: "var(--container-md)", margin: "0 auto" }}>
        <Reveal>
          <div style={{ textAlign: "center", maxWidth: "50ch", margin: "0 auto 32px" }}>
            <Eyebrow center style={{ marginBottom: 14 }}>Contact</Eyebrow>
            <h2 style={{ fontSize: "var(--text-3xl)", color: "var(--ink-50)", margin: 0 }}>Un poste à pourvoir, ou envie d'échanger sur votre projet&nbsp;?</h2>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-md)", color: "var(--ink-300)", marginTop: 14 }}>
              {isClient
                ? "Décrivez votre besoin en quelques lignes. Réponse sous 24h."
                : "Partagez votre projet. Chaque échange reste strictement confidentiel."}
            </p>
          </div>
        </Reveal>
        <Reveal delay={100}>
          <div style={{ display: "flex", justifyContent: "center", marginBottom: 28 }}>
            <Tabs tabs={["Entreprises", "Candidats"]} value={audience} onChange={switchTo} />
          </div>
          <Card variant="ink" padding="lg" style={{ maxWidth: 640, margin: "0 auto" }}>
            {sent ? (
              <div style={{ textAlign: "center", padding: "24px 0" }}>
                <div style={{ width: 56, height: 56, borderRadius: "50%", background: "var(--success-bg)", color: "var(--success)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }}>
                  <Icon name="check" size={28} stroke={2} />
                </div>
                <h3 style={{ fontSize: "var(--text-xl)", margin: "0 0 6px" }}>{isClient ? "Message bien reçu" : "Candidature bien reçue"}</h3>
                <p style={{ fontFamily: "var(--font-sans)", color: "var(--text-muted)", margin: 0 }}>Retour très rapide, garanti.</p>
              </div>
            ) : isClient ? (
              <form onSubmit={async (e) => {
                e.preventDefault();
                const fd = new FormData(e.target);
                const ok = await sendByEmail("Demande de recrutement — Entreprise", {
                  "Nom complet": fd.get("nom"),
                  "Entreprise": fd.get("entreprise"),
                  "Email professionnel": fd.get("email"),
                  "Téléphone": fd.get("telephone"),
                  "Métier concerné": fd.get("metier"),
                  "Besoin": fd.get("besoin"),
                  "_gotcha": fd.get("_gotcha"),
                });
                if (ok) setSent(true);
                else alert("L'envoi n'a pas abouti. Merci de réessayer, ou d'écrire directement à contact@inerapeople.fr.");
              }} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                <input type="text" name="_gotcha" tabIndex={-1} autoComplete="off" aria-hidden="true" style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} />
                <div className="form-row" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
                  <Input name="nom" label="Nom complet" placeholder="Marie Durand" required />
                  <Input name="entreprise" label="Entreprise" placeholder="Nom de la société" />
                </div>
                <div className="form-row" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
                  <Input name="email" label="Email professionnel" type="email" placeholder="vous@entreprise.fr" required />
                  <Input name="telephone" label="Téléphone" type="tel" placeholder="06 12 34 56 78" required />
                </div>
                <Select name="metier" label="Métier concerné" placeholder="Sélectionner…" options={["Ressources Humaines", "Juridique", "Commercial", "Autre"]} />
                <Textarea name="besoin" label="Votre besoin" rows={4} placeholder="Poste à pourvoir, contexte, échéance…" />
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
                  <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-faint)" }}>Vos informations restent strictement confidentielles.</span>
                  <Button type="submit" variant="primary">Envoyer la demande</Button>
                </div>
              </form>
            ) : (
              <form onSubmit={async (e) => {
                e.preventDefault();
                const fd = new FormData(e.target);
                const cv = fd.get("cv");
                if (cv && cv.size > 8 * 1024 * 1024) {
                  alert("Le CV dépasse 8 Mo. Merci d'envoyer un fichier plus léger (PDF, DOC ou DOCX).");
                  return;
                }
                const ok = await sendByEmail("Candidature — Nouveau profil", {
                  "Nom complet": fd.get("nom"),
                  "Poste actuel": fd.get("poste"),
                  "Email": fd.get("email"),
                  "Téléphone": fd.get("telephone"),
                  "Métier": fd.get("metier"),
                  "Profil LinkedIn": fd.get("linkedin"),
                  "Projet": fd.get("projet"),
                  "_gotcha": fd.get("_gotcha"),
                }, (cv && cv.size) ? cv : null);
                if (ok) setSent(true);
                else alert("L'envoi n'a pas abouti. Merci de réessayer, ou d'écrire directement à contact@inerapeople.fr.");
              }} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                <input type="text" name="_gotcha" tabIndex={-1} autoComplete="off" aria-hidden="true" style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} />
                <div className="form-row" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
                  <Input name="nom" label="Nom complet" placeholder="Thomas Bernard" required />
                  <Input name="poste" label="Poste actuel" placeholder="Ex. Responsable juridique" />
                </div>
                <div className="form-row" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
                  <Input name="email" label="Email" type="email" placeholder="vous@email.fr" required />
                  <Input name="telephone" label="Téléphone" type="tel" placeholder="06 12 34 56 78" required />
                </div>
                <Select name="metier" label="Votre métier" placeholder="Sélectionner…" options={["Ressources Humaines", "Juridique", "Commercial", "Autre"]} />
                <Input name="linkedin" label="Profil LinkedIn" placeholder="linkedin.com/in/…" />
                <Input name="cv" label="CV" type="file" accept=".pdf,.doc,.docx" hint="Optionnel." />
                <Textarea name="projet" label="Votre projet" rows={3} placeholder="Poste visé, mobilité, disponibilité…" />
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
                  <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-faint)" }}>Votre démarche reste strictement confidentielle.</span>
                  <Button type="submit" variant="primary">Envoyer ma candidature</Button>
                </div>
              </form>
            )}
          </Card>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function SiteFooter() {
  const { Logo } = window.IneraPeopleDesignSystem_7b6830;
  return (
    <footer style={{ position: "relative", background: "linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 100%)", color: "var(--ink-300)", padding: "56px clamp(20px,5vw,56px) 34px" }}>
      <div style={{ position: "relative", maxWidth: "var(--container-xl)", margin: "0 auto", display: "flex", flexWrap: "wrap", justifyContent: "space-between", gap: 32, alignItems: "flex-start" }}>
        <div style={{ maxWidth: 320 }}>
          <Logo src="assets/logo-silver.png" size="md" style={{ height: 52 }} />
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--ink-400)", marginTop: 16, lineHeight: 1.75 }}>
            Cabinet de recrutement indépendant<br />
            Cadres & dirigeants<br />
            France et international
          </p>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--ink-400)", marginTop: 10 }}>
            <a href="mailto:contact@inerapeople.fr" style={{ color: "var(--ink-200)" }}>contact@inerapeople.fr</a>
          </p>
        </div>
        <div style={{ display: "flex", gap: "48px" }}>
          {[["Métiers", ["RH", "Juridique", "Commercial"]], ["Cabinet", ["Missions", "Approche", "Fondatrice", "Contact"]]].map(([h, items]) => (
            <div key={h}>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", fontWeight: 700, letterSpacing: "var(--tracking-caps)", textTransform: "uppercase", color: "var(--ink-50)", marginBottom: 14 }}>{h}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                {items.map((i) => <a key={i} href="#" style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--ink-400)", textDecoration: "none" }}>{i}</a>)}
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ maxWidth: "var(--container-xl)", margin: "36px auto 0", paddingTop: 22, borderTop: "1px solid var(--border-on-ink)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 10, fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--ink-500)" }}>
        <span>© 2026 Inera People. Tous droits réservés.</span>
        <a href="mentions-legales.html" style={{ color: "var(--ink-500)", textDecoration: "none" }}>Mentions légales · Confidentialité</a>
      </div>
    </footer>
  );
}

Object.assign(window, { Icon, Reveal, Marquee, WordRotator, Hero, Metiers, Missions, Manifesto, Approche, Fondatrice, Contact, SiteFooter, sendByEmail });
})();