/* DAR TISLIT — Landing Page
   Service privé de mise en relation sérieuse
*/

const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentLead": "gold",
  "showMotif": true,
  "heroVariant": "ornament",
  "displayFont": "Cormorant Garamond",
  "bodyTone": "ivory"
}/*EDITMODE-END*/;

function TislitMark({ size = 28, color = "currentColor", strokeWidth = 1 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ display: "block" }}>
      <path d="M20 2 L38 20 L20 38 L2 20 Z" stroke={color} strokeWidth={strokeWidth} />
      <path d="M20 10 L30 20 L20 30 L10 20 Z" stroke={color} strokeWidth={strokeWidth} />
      <circle cx="20" cy="20" r="1.4" fill={color} />
    </svg>
  );
}

function Divider({ color = "var(--gold)", width = 120 }) {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 14, color, opacity: 0.7 }}>
      <span style={{ width, height: 1, background: color }} />
      <TislitMark size={14} color={color} strokeWidth={1.2} />
      <span style={{ width, height: 1, background: color }} />
    </div>
  );
}

function Reveal({ children, delay = 0, as: Tag = "div", style = {}, ...rest }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setShown(true); io.disconnect(); }
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <Tag ref={ref} style={{
      opacity: shown ? 1 : 0,
      transform: shown ? "translateY(0)" : "translateY(18px)",
      transition: `opacity 900ms ${delay}ms cubic-bezier(.2,.7,.2,1), transform 900ms ${delay}ms cubic-bezier(.2,.7,.2,1)`,
      ...style,
    }} {...rest}>
      {children}
    </Tag>
  );
}

function ArrowRight() {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M1 7h12m-4-4 4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square" />
    </svg>
  );
}

function trackEvent(name, props = {}) {
  if (window.gtag) window.gtag("event", name, props);
  else if (window.va) window.va("track", name, props);
  else console.log("[Tislit tracking]", name, props);
}

// ============== HEADER ==============

function Header() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`tt-header ${scrolled ? "is-scrolled" : ""}`}>
      <div className="tt-header__inner">
        <a href="#" className="tt-logo" aria-label="Tislit">
          <TislitMark size={22} color="var(--ink)" strokeWidth={1.1} />
          <div className="tt-logo__block">
            <div style={{ position: "relative", width: "fit-content" }}>
              <div style={{ position: "absolute", top: "-9px", left: 0, right: "6px", display: "flex", alignItems: "center", gap: "6px" }}>
                <span style={{ flex: 1, height: "0.6px", background: "#C4A574", opacity: 0.5, display: "block" }} />
                <span style={{ fontFamily: "Georgia, serif", fontSize: "9px", color: "#C4A574", opacity: 0.6, letterSpacing: "3px", whiteSpace: "nowrap" }}>dar</span>
                <span style={{ flex: 1, height: "0.6px", background: "#C4A574", opacity: 0.5, display: "block" }} />
              </div>
              <span className="tt-logo__word">Tislit</span>
            </div>
            <span className="tt-logo__sub">Service privé de mise en relation sérieuse</span>
          </div>
        </a>
        <nav className="tt-nav">
          <a href="#">Accueil</a>
          <a href="#fonctionnement">Comment ça fonctionne</a>
          <a href="#confidentialite">Confidentialité</a>
          <a href="#faq">FAQ</a>
        </nav>
        <a href="#candidature" className="tt-btn tt-btn--ghost tt-header__cta">Faire une demande</a>
      </div>
    </header>
  );
}

// ============== HERO ==============
function Hero({ variant }) {
  const badges = ["Aucun profil public", "Sélection humaine", "Démarche orientée mariage", "Confidentialité à chaque étape"];
  return (
    <section className="tt-hero">
      <div className="tt-hero__pattern" aria-hidden="true">
        {variant === "ornament" && <HeroOrnament />}
        {variant === "lattice" && <HeroLattice />}
        {variant === "minimal" && <HeroMinimal />}
      </div>

      <HandsComposition />

      <div className="tt-hero__inner tt-hero__inner--withHands">
        <Reveal delay={0}>
          <div style={{ marginBottom: "6px" }}>
            <span style={{ color: "var(--gold)", opacity: 0.45, fontSize: "16px", letterSpacing: "4px", fontFamily: "Georgia, serif" }}>ⵜⵉⵙⵍⵉⵜ</span>
            <br />
            <span style={{ color: "var(--gold)", opacity: 0.45, fontSize: "11px", letterSpacing: "3px", fontFamily: "Georgia, serif", textTransform: "uppercase" }}>Tachelhite &amp; Achelhi</span>
          </div>
          <div className="tt-eyebrow">
            <span className="tt-eyebrow__dot" />
            <span>Service privé &amp; confidentiel</span>
            <span className="tt-eyebrow__dot" />
          </div>
        </Reveal>

        <Reveal delay={120} as="h1" className="tt-hero__title">
          Rencontrez une personne<br />
          <em>réellement alignée</em><br />
          avec vos valeurs
        </Reveal>

        <Reveal delay={240}>
          <p className="tt-hero__sub">
            Tislit accompagne les personnes sincères dans une démarche
            de mariage, avec un cadre discret, humain et sélectif.
          </p>
        </Reveal>

        <Reveal delay={400} className="tt-hero__ctas-wrap">
          <div className="tt-hero__ctas" style={{ marginTop: "200px", marginBottom: "60px" }}>
            <a href="#candidature" className="tt-btn tt-btn--primary" onClick={() => trackEvent("click_hero_cta")}>
              <span>Faire une demande confidentielle</span>
              <ArrowRight />
            </a>
<a href="#fonctionnement" className="tt-btn tt-btn--text" onClick={() => trackEvent("click_secondary_cta")}>
              Comprendre le fonctionnement
            </a>
          </div>
        </Reveal>

        <Reveal delay={560}>
          <div className="tt-hero__badges">
            {badges.map((b, i) => (
              <div key={i} className="tt-hero__badge">
                <TislitMark size={10} color="var(--accent)" strokeWidth={1.3} />
                <span>{b}</span>
              </div>
            ))}
          </div>
        </Reveal>
      </div>

    </section>
  );
}

function HandsComposition() {
  return (
    <div className="tt-hands" aria-hidden="true">
      <img src="assets/hands-nadia-nobg.png" alt="" className="tt-hands__img" />
    </div>
  );
}

function HeroOrnament() {
  return (
    <svg width="100%" height="100%" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0 }}>
      <g stroke="var(--gold)" strokeWidth="0.6" fill="none" opacity="0.55">
        <g transform="translate(950 400)">
          {[1, 2, 3, 4, 5, 6, 7].map(i => (
            <path key={i} d={`M0 ${-i * 28} L${i * 28} 0 L0 ${i * 28} L${-i * 28} 0 Z`} />
          ))}
          <circle r="2" fill="var(--gold)" />
        </g>
        <g transform="translate(250 400)">
          {[1, 2, 3, 4, 5, 6, 7].map(i => (
            <path key={i} d={`M0 ${-i * 28} L${i * 28} 0 L0 ${i * 28} L${-i * 28} 0 Z`} />
          ))}
          <circle r="2" fill="var(--gold)" />
        </g>
        <g transform="translate(80 120)" opacity="0.35">
          {[0, 1, 2, 3].map(r => [0, 1, 2, 3].map(c => (
            <path key={`${r}-${c}`} d={`M${c * 60} ${r * 60} L${c * 60 + 30} ${r * 60 + 30} L${c * 60} ${r * 60 + 60} L${c * 60 - 30} ${r * 60 + 30} Z`} />
          )))}
        </g>
      </g>
    </svg>
  );
}

function HeroLattice() {
  return (
    <svg width="100%" height="100%" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0 }}>
      <defs>
        <pattern id="lattice" x="0" y="0" width="48" height="48" patternUnits="userSpaceOnUse">
          <path d="M24 0 L48 24 L24 48 L0 24 Z" fill="none" stroke="var(--gold)" strokeWidth="0.4" />
        </pattern>
      </defs>
      <rect width="1200" height="800" fill="url(#lattice)" opacity="0.35" />
      <radialGradient id="fade" cx="50%" cy="50%" r="60%">
        <stop offset="0%" stopColor="var(--ivory)" stopOpacity="0" />
        <stop offset="100%" stopColor="var(--ivory)" stopOpacity="1" />
      </radialGradient>
      <rect width="1200" height="800" fill="url(#fade)" />
    </svg>
  );
}

function HeroMinimal() {
  return (
    <svg width="100%" height="100%" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0 }}>
      <line x1="600" y1="0" x2="600" y2="800" stroke="var(--gold)" strokeWidth="0.4" opacity="0.4" />
      <g transform="translate(600 400)" stroke="var(--gold)" strokeWidth="0.5" fill="none" opacity="0.5">
        <path d="M0 -200 L200 0 L0 200 L-200 0 Z" />
        <path d="M0 -120 L120 0 L0 120 L-120 0 Z" />
        <path d="M0 -40 L40 0 L0 40 L-40 0 Z" />
      </g>
    </svg>
  );
}

// ============== BLOC ÉMOTION ==============
function EmotionBlock() {
  return (
    <div className="tt-emotion-block" style={{ padding: "72px 24px", textAlign: "center" }}>
      <Reveal>
        <p style={{
          fontFamily: "var(--display-font)", fontStyle: "italic",
          fontSize: "clamp(18px, 1.8vw, 23px)", lineHeight: 1.85,
          color: "var(--ink-soft)", maxWidth: "50ch", margin: "0 auto"
        }}>
          Trouver une personne sérieuse aujourd'hui peut vite devenir frustrant.<br />
          Entre les échanges sans intention, les profils peu alignés et le manque de cadre,<br />
          il devient difficile d'avancer sereinement.
        </p>
      </Reveal>
    </div>
  );
}

// ============== SECTION PROBLÈME ==============
const PROBLEMS = [
  { num: "01", title: "Manque de sérieux", body: "Des échanges sans intention claire, des discussions qui s'éternisent ou s'arrêtent sans véritable direction." },
  { num: "02", title: "Difficulté d'alignement", body: "Il devient rare de rencontrer une personne partageant la même vision du couple, du mariage et du cadre familial." },
  { num: "03", title: "Attentes culturelles", body: "Certaines attentes liées à l'éducation, aux traditions ou à la famille ne sont pas toujours comprises." },
  { num: "04", title: "Pression du temps", body: "Avec les années, la pression personnelle ou familiale peut rendre la démarche plus lourde à vivre." },
  { num: "05", title: "Manque de discrétion", body: "Les démarches passent parfois par des circuits informels, avec un inconfort sur la confidentialité." },
  { num: "06", title: "Rencontres inefficaces", body: "Malgré une vraie volonté d'avancer, les rencontres aboutissent rarement à quelque chose de concret." },
];

function ProblemSection() {
  return (
    <section className="tt-section tt-values">
      <div className="tt-section__header">
        <Reveal>
          <div className="tt-label">— Pourquoi Tislit ?</div>
        </Reveal>
        <Reveal delay={120} as="h2" className="tt-section__title">
          Trouver une personne alignée<br />avec vos <em>valeurs</em><br />ne devrait pas être un hasard.
        </Reveal>
        <Reveal delay={240}>
          <p className="tt-section__intro">
            Beaucoup de personnes souhaitent construire une relation sincère, mais se retrouvent confrontées à des échanges superficiels, à un manque de sérieux, ou à une difficulté à rencontrer quelqu'un partageant réellement leur vision du couple, du mariage et du cadre familial.
          </p>
        </Reveal>
        <Reveal delay={340}>
          <p className="tt-section__intro" style={{ marginTop: "20px" }}>
            Lorsque les attentes vont au-delà d'une simple rencontre — lorsqu'elles touchent aux valeurs, à l'éducation, à la culture et à une certaine manière d'envisager la vie à deux — les opportunités deviennent naturellement plus rares.
          </p>
        </Reveal>
        <Reveal delay={440}>
          <div className="tt-label" style={{ marginTop: "56px" }}>— Une difficulté souvent silencieuse</div>
        </Reveal>
        <Reveal delay={520}>
          <p className="tt-section__intro" style={{ marginTop: "16px" }}>
            Avec le temps, cette situation devient frustrante : les échanges s'enchaînent, les rencontres n'aboutissent pas toujours, et le sentiment de perdre du temps peut s'installer.
          </p>
        </Reveal>
      </div>
      <div className="tt-values__grid">
        {PROBLEMS.map((p, i) => (
          <Reveal key={p.num} delay={i * 80}>
            <article className="tt-card">
              <div className="tt-card__top">
                <span className="tt-card__num">{p.num}</span>
                <TislitMark size={18} color="var(--gold)" strokeWidth={1.1} />
              </div>
              <h3 className="tt-card__title">{p.title}</h3>
              <p className="tt-card__body">{p.body}</p>
              <div className="tt-card__line" />
            </article>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ============== SECTION SOLUTION ==============
const SOLUTIONS = [
  { num: "01", title: "Sélection", body: "Uniquement des profils engagés dans une démarche sérieuse." },
  { num: "02", title: "Confidentialité", body: "Aucun profil public. Rien n'est partagé sans accord." },
  { num: "03", title: "Compatibilité", body: "Des propositions basées sur les valeurs, le projet de vie et les critères essentiels." },
  { num: "04", title: "Accompagnement", body: "Un suivi humain avant, pendant et après la mise en relation." },
];

function SolutionSection() {
  return (
    <section className="tt-section tt-values">
      <div className="tt-section__header">
        <Reveal>
          <div className="tt-label">— Notre approche</div>
        </Reveal>
        <Reveal delay={120} as="h2" className="tt-section__title">
          Un accompagnement humain,<br /><em>discret et sélectif.</em>
        </Reveal>
        <Reveal delay={240}>
          <p className="tt-section__intro">
            Contrairement aux plateformes classiques, Tislit ne laisse rien au hasard.<br />
            Chaque mise en relation est réfléchie, encadrée et validée.
          </p>
        </Reveal>
      </div>
      <div className="tt-values__grid tt-values__grid--4">
        {SOLUTIONS.map((s, i) => (
          <Reveal key={s.num} delay={i * 80}>
            <article className="tt-card">
              <div className="tt-card__top">
                <span className="tt-card__num">{s.num}</span>
                <TislitMark size={18} color="var(--gold)" strokeWidth={1.1} />
              </div>
              <h3 className="tt-card__title">{s.title}</h3>
              <p className="tt-card__body">{s.body}</p>
              <div className="tt-card__line" />
            </article>
          </Reveal>
        ))}
      </div>
      <Reveal delay={400}>
        <div style={{ display: "flex", justifyContent: "center", marginTop: "48px" }}>
          <a href="#candidature" className="tt-btn tt-btn--primary" onClick={() => trackEvent("click_hero_cta")}>
            <span>Faire une demande confidentielle</span>
            <ArrowRight />
          </a>
        </div>
      </Reveal>
    </section>
  );
}

// ============== SECTION COMMENT ÇA FONCTIONNE ==============
const STEPS = [
  { n: "i.", t: "Candidature confidentielle", d: "Vous déposez une demande privée." },
  { n: "ii.", t: "Entretien privé", d: "Un échange permet de mieux comprendre votre démarche." },
  { n: "iii.", t: "Validation du profil", d: "Chaque candidature est étudiée avec soin." },
  { n: "iv.", t: "Mise en relation ciblée", d: "Les profils compatibles sont proposés progressivement." },
  { n: "v.", t: "Suivi", d: "Un accompagnement peut être proposé après la mise en relation." },
];

function HowItWorksSection() {
  return (
    <section id="fonctionnement" className="tt-section tt-approach">
      <div className="tt-approach__grid">
        <div className="tt-approach__left">
          <Reveal>
            <div className="tt-label">— Le parcours</div>
          </Reveal>
          <Reveal delay={120} as="h2" className="tt-section__title">
            Comment ça<br /><em>fonctionne ?</em>
          </Reveal>
          <Reveal delay={240}>
            <p className="tt-approach__intro">
              Un processus simple, confidentiel et structuré pour préserver la qualité des échanges.
            </p>
          </Reveal>
          <Reveal delay={360}>
            <a href="#candidature" className="tt-btn tt-btn--primary" onClick={() => trackEvent("click_hero_cta")}>
              <span>Commencer une démarche sérieuse</span>
              <ArrowRight />
            </a>
          </Reveal>
        </div>

        <div className="tt-approach__right">
          <div className="tt-approach__points">
            {STEPS.map((p, i) => (
              <Reveal key={p.n} delay={200 + i * 80}>
                <div className="tt-approach__point">
                  <span className="tt-approach__roman">{p.n}</span>
                  <div>
                    <h4>{p.t}</h4>
                    <p>{p.d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============== SECTION CONFIDENTIALITÉ ==============
function ConfidentialiteSection() {
  const points = [
    "Aucun profil visible en ligne",
    "Aucun accès libre à une base de profils",
    "Aucune photo transmise sans accord",
    "Aucune information personnelle partagée sans validation",
    "Mise en relation uniquement après intérêt mutuel",
    "Possibilité de demander la suppression de ses informations",
  ];
  return (
    <section id="confidentialite" className="tt-section tt-contact">
      <div className="tt-conf__inner" style={{ maxWidth: "var(--maxw)", margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "80px", alignItems: "start" }}>
        <div>
          <Reveal>
            <div className="tt-label tt-label--light">— Confidentialité</div>
          </Reveal>
          <Reveal delay={120} as="h2" className="tt-section__title tt-section__title--light">
            Votre discrétion est<br />au cœur du service.
          </Reveal>
          <Reveal delay={240}>
            <p style={{ fontFamily: "var(--display-font)", fontStyle: "italic", fontSize: "19px", lineHeight: 1.7, color: "rgba(250,250,248,0.75)", margin: "32px 0 48px", maxWidth: "44ch" }}>
              Tislit repose sur une règle simple : rien n'est public. Votre démarche reste privée du début à la fin.
            </p>
          </Reveal>
          <Reveal delay={400}>
            <p style={{ fontFamily: "var(--display-font)", fontSize: "26px", color: "var(--gold)", fontStyle: "italic" }}>
              Vous gardez le contrôle<br />à chaque étape.
            </p>
          </Reveal>
          <Reveal delay={520}>
            <div style={{ marginTop: "36px" }}>
              <a href="#candidature" className="tt-btn tt-btn--ghost" style={{ borderColor: "rgba(196,165,116,0.5)", color: "var(--gold)" }} onClick={() => trackEvent("click_confidentiality_cta")}>
                <span>Faire une demande confidentielle</span>
                <ArrowRight />
              </a>
            </div>
          </Reveal>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: "0", borderTop: "1px solid rgba(196,165,116,0.25)", borderLeft: "1px solid rgba(196,165,116,0.25)" }}>
          {points.map((pt, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="tt-conf__point">
                <TislitMark size={12} color="var(--gold)" strokeWidth={1.2} />
                <span>{pt}</span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============== SECTION VALEURS ==============
const VALUES = [
  { num: "01", title: "Respect", body: "Chaque personne est accompagnée avec considération, pudeur et bienveillance." },
  { num: "02", title: "Sincérité", body: "Nous privilégions les profils clairs dans leurs intentions et prêts à avancer sérieusement." },
  { num: "03", title: "Discrétion", body: "La confidentialité n'est pas une option, c'est une base." },
  { num: "04", title: "Engagement", body: "L'objectif n'est pas de multiplier les échanges, mais de favoriser une rencontre alignée avec un vrai projet de mariage." },
];

function ValuesSection() {
  return (
    <section id="valeurs" className="tt-section tt-values">
      <div className="tt-section__header">
        <Reveal>
          <div className="tt-label">— Nos valeurs</div>
        </Reveal>
        <Reveal delay={120} as="h2" className="tt-section__title">
          Une démarche fondée sur le respect,<br />la sincérité et l'engagement.
        </Reveal>
      </div>
      <div className="tt-values__grid tt-values__grid--4">
        {VALUES.map((v, i) => (
          <Reveal key={v.num} delay={i * 80}>
            <article className="tt-card">
              <div className="tt-card__top">
                <span className="tt-card__num">{v.num}</span>
                <TislitMark size={18} color="var(--gold)" strokeWidth={1.1} />
              </div>
              <h3 className="tt-card__title">{v.title}</h3>
              <p className="tt-card__body">{v.body}</p>
              <div className="tt-card__line" />
            </article>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ============== SECTION RARETÉ ==============
function RareteSection() {
  return (
    <section className="tt-section tt-quote">
      <Reveal>
        <Divider />
      </Reveal>
      <Reveal delay={120}>
        <div className="tt-label" style={{ textAlign: "center", marginTop: "48px" }}>— Qualité avant quantité</div>
      </Reveal>
      <Reveal delay={200} as="h2" className="tt-section__title" style={{ textAlign: "center", margin: "24px auto 32px", maxWidth: "18ch" }}>
        Un nombre limité de<br /><em>profils accompagnés.</em>
      </Reveal>
      <Reveal delay={320}>
        <p style={{ fontFamily: "var(--display-font)", fontStyle: "italic", fontSize: "clamp(18px,1.6vw,22px)", lineHeight: 1.65, color: "var(--ink-soft)", maxWidth: "52ch", margin: "0 auto 24px", textAlign: "center" }}>
          Pour préserver la qualité du service, le nombre de profils accompagnés reste volontairement limité.
        </p>
      </Reveal>
      <Reveal delay={400}>
        <p style={{ fontFamily: "var(--display-font)", fontSize: "clamp(15px,1.3vw,17px)", color: "var(--ink-faint)", letterSpacing: "0.08em", textTransform: "uppercase", textAlign: "center", margin: "0 auto 40px" }}>
          Toutes les candidatures ne sont pas retenues.
        </p>
      </Reveal>
      <Reveal delay={480}>
        <blockquote className="tt-quote__text" style={{ margin: "0 auto 48px" }}>
          « Cette limite permet de garantir un suivi plus sérieux, plus humain et plus adapté à chaque personne. »
        </blockquote>
      </Reveal>
      <Reveal delay={560}>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <a href="#candidature" className="tt-btn tt-btn--primary" onClick={() => trackEvent("click_quality_cta")}>
            <span>Déposer une candidature confidentielle</span>
            <ArrowRight />
          </a>
        </div>
      </Reveal>
    </section>
  );
}

// ============== SECTION CONFIANCE ==============
const TRUST_POINTS = [
  "Chaque candidature est étudiée individuellement",
  "Aucune information n'est partagée sans accord",
  "Un accompagnement humain à chaque étape",
];

function TrustSection() {
  return (
    <section className="tt-trust-section" style={{ padding: "80px 24px", textAlign: "center" }}>
      <div style={{ maxWidth: "600px", margin: "0 auto" }}>
        <Reveal>
          <div className="tt-label">— Confiance</div>
        </Reveal>
        <Reveal delay={120} as="h2" className="tt-section__title">
          Un cadre pensé pour<br /><em>rassurer.</em>
        </Reveal>
        <Reveal delay={240}>
          <p className="tt-section__intro">
            Dans une démarche aussi personnelle que le mariage, la confiance est essentielle. Tislit a été conçu pour offrir un environnement discret, structuré et respectueux.
          </p>
        </Reveal>
        <div style={{ marginTop: "40px", display: "flex", flexDirection: "column", gap: "18px" }}>
          {TRUST_POINTS.map((pt, i) => (
            <Reveal key={i} delay={320 + i * 80}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "14px" }}>
                <TislitMark size={11} color="var(--gold)" strokeWidth={1.2} />
                <span style={{ fontFamily: "var(--display-font)", fontSize: "clamp(16px,1.4vw,19px)", color: "var(--ink)" }}>{pt}</span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============== SECTION FAQ ==============
const FAQS = [
  { q: "À qui s'adresse Tislit ?", a: "Tislit s'adresse à des personnes sincèrement engagées dans une démarche de mariage, attachées à des valeurs fortes, à un cadre familial respecté et à une compatibilité réelle. Le service accompagne principalement des profils sensibles aux cultures et traditions du Souss, tout en restant centré sur la sincérité et l'alignement des valeurs." },
  { q: "Est-ce un site de rencontre ?", a: "Non. Tislit est un service privé de mise en relation sérieuse. Il n'y a pas de profils publics, pas de catalogue et pas d'accès libre." },
  { q: "Est-ce confidentiel ?", a: "Oui. Aucun profil n'est public, aucune information personnelle n'est transmise sans accord, et chaque mise en relation se fait progressivement." },
  { q: "Est-ce que toutes les candidatures sont acceptées ?", a: "Non. Nous sélectionnons uniquement les profils alignés avec l'esprit du service afin de préserver la qualité des mises en relation." },
  { q: "Comment se passe la mise en relation ?", a: "Après étude des profils et intérêt mutuel, la mise en relation est organisée progressivement, dans un cadre respectueux et confidentiel." },
  { q: "Est-ce que vous garantissez un mariage ?", a: "Non. Aucun service sérieux ne peut garantir un mariage. En revanche, Tislit garantit un cadre structuré, confidentiel et humain pour maximiser les chances de rencontres réellement alignées." },
  { q: "Le service est-il gratuit ?", a: "Tislit repose sur un accompagnement humain, une sélection des profils et une mise en relation personnalisée. Les modalités sont présentées lors de l'échange confidentiel, après étude de la candidature." },
];

function FAQSection() {
  const [open, setOpen] = useState(null);
  return (
    <section id="faq" className="tt-section tt-faq">
      <div className="tt-section__header">
        <Reveal delay={120} as="h2" className="tt-section__title">
          Questions fréquentes
        </Reveal>
      </div>
      <div className="tt-faq__list">
        {FAQS.map((f, i) => (
          <Reveal key={i} delay={i * 60}>
            <div className={`tt-faq__item ${open === i ? "is-open" : ""}`}>
              <button className="tt-faq__q" onClick={() => setOpen(open === i ? null : i)}>
                <span>{f.q}</span>
                <span className="tt-faq__icon">{open === i ? "−" : "+"}</span>
              </button>
              {open === i && (
                <div className="tt-faq__a">{f.a}</div>
              )}
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ============== SECTION CANDIDATURE ==============
function RadioGroup({ name, options, value, onChange, error }) {
  return (
    <div>
      <div className="tt-radio tt-radio--col">
        {options.map(opt => (
          <label key={opt} className={`tt-radio__opt ${value === opt ? "is-on" : ""}`}>
            <input type="radio" name={name} value={opt} checked={value === opt} onChange={() => onChange(opt)} />
            <span>{opt}</span>
          </label>
        ))}
      </div>
      {error && <span className="tt-field__err tt-field__err--block">{error}</span>}
    </div>
  );
}

function ApplicationSection() {
  const EMPTY = {
    gender: "", firstName: "", lastName: "", email: "", phone: "",
    age: "", city: "", origin: "",
    intent: "", timeline: "", valuesImportance: "", seeking: "",
    readyToInvest: "", budget: "",
    available: "", confirmSerious: false, confirmContact: false,
  };
  const [form, setForm] = useState(EMPTY);
  const [errors, setErrors] = useState({});
  const [step, setStep] = useState(1);
  const [submitted, setSubmitted] = useState(false);

  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const setR = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const setC = k => e => setForm(f => ({ ...f, [k]: e.target.checked }));

  const totalSteps = form.gender === "Un homme" ? 4 : 3;

  const validate = () => {
    const er = {};
    if (step === 1) {
      if (!form.gender) er.gender = "Requis";
      if (!form.firstName.trim()) er.firstName = "Requis";
      if (!form.lastName.trim()) er.lastName = "Requis";
      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) er.email = "Email invalide";
      if (!form.phone.trim()) er.phone = "Requis";
      if (!form.age || +form.age < 18 || +form.age > 70) er.age = "18 — 70";
      if (!form.city.trim()) er.city = "Requis";
      if (!form.origin.trim()) er.origin = "Requis";
    }
    if (step === 2) {
      if (!form.intent) er.intent = "Requis";
      if (!form.timeline) er.timeline = "Requis";
      if (!form.valuesImportance) er.valuesImportance = "Requis";
      if (!form.seeking.trim() || form.seeking.length < 10) er.seeking = "Au moins 10 caractères";
    }
    if (step === 3 && form.gender === "Un homme") {
      if (!form.readyToInvest) er.readyToInvest = "Requis";
      if (!form.budget) er.budget = "Requis";
    }
    const validationStep = form.gender === "Un homme" ? 4 : 3;
    if (step === validationStep) {
      if (!form.available) er.available = "Requis";
      if (!form.confirmSerious) er.confirmSerious = "Requis";
      if (!form.confirmContact) er.confirmContact = "Requis";
    }
    setErrors(er);
    return Object.keys(er).length === 0;
  };

  useEffect(() => {
    if (submitted) {
      const el = document.getElementById("candidature");
      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    }
  }, [submitted]);

  const [sending, setSending] = useState(false);

  const scrollToForm = () => { const el = document.getElementById("candidature"); if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: "smooth" }); };
  const next = () => {
    if (validate()) {
      trackEvent(`form_step_${step}_completed`);
      setStep(s => s + 1);
      setErrors({});
      scrollToForm();
    }
  };
  const prev = () => { setStep(s => s - 1); setErrors({}); scrollToForm(); };
  const submit = async e => {
    if (e && e.preventDefault) e.preventDefault();
    if (!validate()) return;
    trackEvent("form_submit", { gender: form.gender });
    setSending(true);
    try {
      const { error } = await window.supabaseClient.from("candidates").insert([{
        gender: form.gender,
        first_name: form.firstName,
        last_name: form.lastName,
        email: form.email,
        phone: form.phone,
        age: parseInt(form.age),
        city: form.city,
        origin: form.origin,
        intent: form.intent,
        timeline: form.timeline,
        values_importance: form.valuesImportance,
        seeking: form.seeking,
        ready_to_invest: form.readyToInvest || null,
        budget: form.budget || null,
        available: form.available,
        status: "reçu",
      }]);
      if (error) throw error;
      setSubmitted(true);
    } catch (err) {
      console.error("Erreur Supabase:", err);
      alert("Une erreur est survenue. Veuillez réessayer.");
    } finally {
      setSending(false);
    }
  };

  const stepLabels = form.gender === "Un homme"
    ? ["Identité", "Démarche", "Filtrage", "Validation"]
    : ["Identité", "Démarche", "Validation"];

  if (submitted) {
    return (
      <section id="candidature" className="tt-section tt-form">
        <div className="tt-form__sent">
          <Reveal><TislitMark size={42} color="var(--gold)" strokeWidth={1} /></Reveal>
          <Reveal delay={150} as="h2" className="tt-section__title">
            Merci pour votre<br /><em>candidature.</em>
          </Reveal>
          <Reveal delay={300}>
            <p className="tt-form__sentBody">
              Si votre profil correspond au cadre du service, nous reviendrons vers vous rapidement pour un échange confidentiel.
            </p>
          </Reveal>
        </div>
      </section>
    );
  }

  return (
    <section id="candidature" className="tt-section tt-form">
      <div className="tt-form__header" onClick={() => { if (step === 1) trackEvent("form_start"); }}>
        <Reveal><div className="tt-label">— Candidature confidentielle</div></Reveal>
        <Reveal delay={120} as="h2" className="tt-section__title">
          Faire une demande<br /><em>confidentielle.</em>
        </Reveal>
        <Reveal delay={200}>
          <div className="tt-form__confidNote" style={{ marginBottom: "28px" }}>
            <TislitMark size={11} color="var(--gold)" strokeWidth={1.2} />
            <span>Réponse sous quelques jours après étude du profil.</span>
            <TislitMark size={11} color="var(--gold)" strokeWidth={1.2} />
          </div>
        </Reveal>
        <Reveal delay={340}>
          <p className="tt-form__intro">
            Ce service s'adresse à des personnes sincèrement engagées dans une démarche sérieuse, avec une réelle intention de construire.
          </p>
        </Reveal>
        <Reveal delay={420}>
          <div className="tt-form__confidNote">
            <TislitMark size={11} color="var(--gold)" strokeWidth={1.2} />
            <span>Les informations transmises restent strictement confidentielles.<br />Aucun profil n'est public.</span>
            <TislitMark size={11} color="var(--gold)" strokeWidth={1.2} />
          </div>
        </Reveal>
      </div>

      <div className="tt-form__steps">
        {stepLabels.map((label, i) => (
          <div key={i} className={`tt-form__step ${step === i + 1 ? "is-active" : ""} ${step > i + 1 ? "is-done" : ""}`}>
            <div className="tt-form__step-dot">{step > i + 1 ? "✓" : i + 1}</div>
            <span className="tt-form__step-label">{label}</span>
            {i < stepLabels.length - 1 && <div className="tt-form__step-line" />}
          </div>
        ))}
      </div>

      <form className="tt-form__card tt-form__card--single" onSubmit={submit} noValidate>

        {/* ÉTAPE 1 — IDENTITÉ */}
        {step === 1 && (
          <>
            <div className="tt-form__step-title">Étape 1 — Identité</div>

            <div className="tt-field tt-field--full">
              <label>Vous êtes</label>
              <RadioGroup name="gender" options={["Une femme", "Un homme"]} value={form.gender} onChange={v => setR("gender", v)} error={errors.gender} />
            </div>

            <div className="tt-field">
              <label>Prénom</label>
              <input type="text" value={form.firstName} onChange={set("firstName")} placeholder="Votre prénom" />
              {errors.firstName && <span className="tt-field__err tt-field__err--block">{errors.firstName}</span>}
            </div>

            <div className="tt-field">
              <label>Nom</label>
              <input type="text" value={form.lastName} onChange={set("lastName")} placeholder="Votre nom" />
              {errors.lastName && <span className="tt-field__err tt-field__err--block">{errors.lastName}</span>}
            </div>

            <div className="tt-field">
              <label>Email</label>
              <input type="email" value={form.email} onChange={set("email")} placeholder="vous@email.com" />
              {errors.email && <span className="tt-field__err tt-field__err--block">{errors.email}</span>}
            </div>

            <div className="tt-field">
              <label>Téléphone</label>
              <input type="tel" value={form.phone} onChange={set("phone")} placeholder="+33 6 …" />
              {errors.phone && <span className="tt-field__err tt-field__err--block">{errors.phone}</span>}
            </div>

            <div className="tt-field">
              <label>Âge</label>
              <input type="number" min="18" max="70" value={form.age} onChange={set("age")} placeholder="—" />
              {errors.age && <span className="tt-field__err tt-field__err--block">{errors.age}</span>}
            </div>

            <div className="tt-field">
              <label>Ville / région de résidence</label>
              <input type="text" value={form.city} onChange={set("city")} placeholder="Paris, Lyon…" />
              {errors.city && <span className="tt-field__err tt-field__err--block">{errors.city}</span>}
            </div>

            <div className="tt-field">
              <label>Origine familiale / région</label>
              <input type="text" value={form.origin} onChange={set("origin")} placeholder="Ex : Souss, Agadir, Tiznit…" />
              {errors.origin && <span className="tt-field__err tt-field__err--block">{errors.origin}</span>}
            </div>
          </>
        )}

        {/* ÉTAPE 2 — DÉMARCHE */}
        {step === 2 && (
          <>
            <div className="tt-form__step-title">Étape 2 — Démarche</div>

            <div className="tt-field tt-field--full">
              <label>Êtes-vous actuellement dans une démarche sérieuse de mariage ?</label>
              <RadioGroup name="intent" options={["Oui clairement", "Oui mais je prends le temps", "Je souhaite en discuter"]} value={form.intent} onChange={v => setR("intent", v)} error={errors.intent} />
            </div>

            <div className="tt-field tt-field--full">
              <label>Dans quel délai souhaitez-vous idéalement vous marier si vous rencontrez la bonne personne ?</label>
              <RadioGroup name="timeline" options={["Moins de 6 mois", "6 à 12 mois", "1 à 2 ans", "Je ne sais pas encore"]} value={form.timeline} onChange={v => setR("timeline", v)} error={errors.timeline} />
            </div>

            <div className="tt-field tt-field--full">
              <label>Est-ce important pour vous que la personne partage des valeurs et une culture proches ?</label>
              <RadioGroup name="valuesImportance" options={["Oui c'est essentiel", "Oui de préférence", "Je suis ouvert(e)"]} value={form.valuesImportance} onChange={v => setR("valuesImportance", v)} error={errors.valuesImportance} />
            </div>

            <div className="tt-field tt-field--full">
              <label>Décrivez en quelques mots ce que vous recherchez</label>
              <textarea rows="4" value={form.seeking} onChange={set("seeking")} placeholder="Votre vision du couple, vos attentes, ce qui compte pour vous…" />
              {errors.seeking && <span className="tt-field__err tt-field__err--block">{errors.seeking}</span>}
            </div>
          </>
        )}

        {/* ÉTAPE 3 — FILTRAGE (hommes uniquement) */}
        {step === 3 && form.gender === "Un homme" && (
          <>
            <div className="tt-form__step-title">Étape 3 — Filtrage</div>

            <div className="tt-field tt-field--full">
              <label>Êtes-vous prêt à investir dans un accompagnement sérieux si celui-ci vous correspond ?</label>
              <RadioGroup name="readyToInvest" options={["Oui", "Je souhaite en savoir plus", "Non"]} value={form.readyToInvest} onChange={v => setR("readyToInvest", v)} error={errors.readyToInvest} />
            </div>

            <div className="tt-field tt-field--full">
              <label>Quel budget seriez-vous prêt à consacrer à une démarche sérieuse ?</label>
              <RadioGroup name="budget" options={["Moins de 500€", "500 à 1 000€", "1 000 à 3 000€", "+ 3 000€"]} value={form.budget} onChange={v => setR("budget", v)} error={errors.budget} />
            </div>
          </>
        )}

        {/* ÉTAPE VALIDATION */}
        {((step === 3 && form.gender !== "Un homme") || (step === 4 && form.gender === "Un homme")) && (
          <>
            <div className="tt-form__step-title">Étape {form.gender === "Un homme" ? 4 : 3} — Validation</div>

            <div className="tt-field tt-field--full">
              <label>Seriez-vous disponible pour un échange confidentiel ?</label>
              <RadioGroup name="available" options={["Oui", "Non", "À organiser"]} value={form.available} onChange={v => setR("available", v)} error={errors.available} />
            </div>

            <div className="tt-field tt-field--full">
              <div className="tt-checkboxes">
                <label className={`tt-checkbox ${form.confirmSerious ? "is-on" : ""}`}>
                  <input type="checkbox" checked={form.confirmSerious} onChange={setC("confirmSerious")} />
                  <span className="tt-checkbox__box" />
                  <span>Je confirme que ma démarche est sérieuse</span>
                </label>
                {errors.confirmSerious && <span className="tt-field__err tt-field__err--block">{errors.confirmSerious}</span>}

                <label className={`tt-checkbox ${form.confirmContact ? "is-on" : ""}`}>
                  <input type="checkbox" checked={form.confirmContact} onChange={setC("confirmContact")} />
                  <span className="tt-checkbox__box" />
                  <span>J'accepte d'être contacté(e) dans le cadre de ma candidature</span>
                </label>
                {errors.confirmContact && <span className="tt-field__err tt-field__err--block">{errors.confirmContact}</span>}
              </div>
            </div>
          </>
        )}

        <div className="tt-form__foot tt-form__foot--nav">
          <div>
            {step > 1 && (
              <button type="button" className="tt-btn tt-btn--ghost" onClick={prev}>
                ← Précédent
              </button>
            )}
          </div>
          <div className="tt-form__legal">
            <TislitMark size={12} color="var(--gold)" strokeWidth={1.2} />
            <span>Données confidentielles — jamais partagées.</span>
          </div>
          {step < totalSteps ? (
            <button type="button" className="tt-btn tt-btn--primary" onClick={next}>
              <span>Continuer</span>
              <ArrowRight />
            </button>
          ) : (
            <button type="button" className="tt-btn tt-btn--primary" onClick={submit} disabled={sending}>
              <span>{sending ? "Envoi en cours…" : "Envoyer ma candidature"}</span>
              {!sending && <ArrowRight />}
            </button>
          )}
        </div>

      </form>
    </section>
  );
}


// ============== CTA FINAL ==============
function CTAFinalSection() {
  return (
    <section className="tt-section tt-quote tt-cta-final">
      <Reveal><Divider /></Reveal>
      <Reveal delay={150} as="h2" className="tt-quote__text" style={{ fontStyle: "normal", fontWeight: 400 }}>
        Prêt(e) à avancer dans une <em style={{ fontStyle: "italic", color: "var(--accent)" }}>démarche sérieuse ?</em>
      </Reveal>
      <Reveal delay={280}>
        <p style={{ fontFamily: "var(--display-font)", fontStyle: "italic", fontSize: "clamp(17px,1.5vw,20px)", color: "var(--ink-soft)", maxWidth: "48ch", margin: "0 auto 40px", textAlign: "center" }}>
          Si vous recherchez une rencontre sincère, discrète et alignée avec vos valeurs, vous pouvez déposer une demande confidentielle.
        </p>
      </Reveal>
      <Reveal delay={400}>
        <div className="tt-hero__ctas" style={{ justifyContent: "center" }}>
          <a href="#candidature" className="tt-btn tt-btn--primary" onClick={() => trackEvent("click_hero_cta")}>
            <span>Faire une demande confidentielle</span>
            <ArrowRight />
          </a>
          <a href="#fonctionnement" className="tt-btn tt-btn--text" onClick={() => trackEvent("click_secondary_cta")}>
            Comprendre le fonctionnement
          </a>
        </div>
      </Reveal>
    </section>
  );
}

// ============== FOOTER ==============
function Footer() {
  return (
    <footer className="tt-footer">
      <div className="tt-footer__top">
        <div className="tt-footer__brand">
          <TislitMark size={26} color="var(--gold)" strokeWidth={1} />
          <div className="tt-footer__word">Tislit</div>
          <div className="tt-footer__tag">Service privé de mise en relation sérieuse</div>
          <p className="tt-footer__desc">
            Service privé de mise en relation sérieuse, dédié aux personnes souhaitant construire une relation sincère dans un cadre discret, humain et sélectif.
          </p>
        </div>
        <div className="tt-footer__cols">
          <div>
            <div className="tt-footer__h">Navigation</div>
            <a href="#">Accueil</a>
            <a href="#fonctionnement">Comment ça fonctionne</a>
            <a href="#confidentialite">Confidentialité</a>
            <a href="#faq">FAQ</a>
            <a href="#candidature">Contact</a>
          </div>
          <div>
            <div className="tt-footer__h">Légal</div>
            <a href="mentions-legales.html">Mentions légales</a>
            <a href="politique-confidentialite.html">Confidentialité</a>
            <a href="conditions-generales.html">CGU</a>
          </div>
        </div>
      </div>
      <div className="tt-footer__bot">
        <span>© 2026 Tislit. Tous droits réservés.</span>
        <span className="tt-footer__note">Les informations transmises sont traitées avec confidentialité et ne sont jamais affichées publiquement.</span>
      </div>
    </footer>
  );
}

// ============== APP ROOT ==============
function App() {
  const [tweaks, setTweak] = window.useTweaks
    ? window.useTweaks(TWEAK_DEFAULTS)
    : [TWEAK_DEFAULTS, () => {}];

  useEffect(() => {
    const r = document.documentElement;
    if (tweaks.accentLead === "gold") {
      r.style.setProperty("--accent", "var(--gold)");
      r.style.setProperty("--accent-soft", "var(--gold-soft)");
    } else {
      r.style.setProperty("--accent", "var(--terracotta)");
      r.style.setProperty("--accent-soft", "var(--terracotta-soft)");
    }
    r.style.setProperty("--display-font", `"${tweaks.displayFont}", Georgia, serif`);
    r.style.setProperty("--ivory", tweaks.bodyTone === "ivory" ? "#FAFAF8" : "#F4EFE7");
  }, [tweaks]);

  return (
    <div className="tt-app" data-motif={tweaks.showMotif ? "on" : "off"}>
      <Header />
      <main>
        <Hero variant={tweaks.heroVariant} />
        <EmotionBlock />
        <ProblemSection />
        <SolutionSection />
        <HowItWorksSection />
        <ConfidentialiteSection />
        <ValuesSection />
        <RareteSection />
        <TrustSection />
        <FAQSection />
        <ApplicationSection />
        <CTAFinalSection />
      </main>
      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);