/* Main app · Dossier locataire Mohamed Sahbi */

const { useState, useEffect, useRef, useMemo } = React;
const T = window.DossierThumbs;

const DOSSIER_REF = "DL-2026-MS-014";
const DEMO_PASSWORD = "bienvenue";
const UNLOCK_KEY = "dossier_ms_unlocked_v1";
const UNLOCK_TTL_MS = 30 * 24 * 60 * 60 * 1000; // 30 jours
const DOSSIER_ZIP_HREF = "docs/dossier-mohamed-sahbi.zip";
const DOSSIER_ZIP_NAME = "Dossier-locataire-Mohamed-Sahbi.zip";

/* ---------- Icons (inline, hairline, mono) ---------- */
const Icon = ({ d, size = 16, sw = 1.4 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
       strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    {typeof d === "string" ? <path d={d} /> : d}
  </svg>
);
const I = {
  arrow:    "M5 12h14M13 6l6 6-6 6",
  download: <><path d="M12 4v12"/><path d="M7 11l5 5 5-5"/><path d="M5 20h14"/></>,
  eye:      <><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></>,
  check:    "M4 12l5 5L20 6",
  phone:    "M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z",
  mail:     <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></>,
  whatsapp: <><path d="M3 21l1.5-5A8.5 8.5 0 1 1 8 19.5L3 21z"/><path d="M8.5 9.5c.3 1.5 2.5 4 4 4.5 1 .3 1.6-.3 2-.8.3-.4-.4-1-1-1.3-.3-.2-.7-.1-1 .2"/></>,
  print:    <><rect x="6" y="3" width="12" height="6"/><rect x="4" y="9" width="16" height="9" rx="1"/><rect x="7" y="14" width="10" height="6"/></>,
  lock:     <><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></>,
  shield:   "M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z",
  doc:      <><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></>,
  id:       <><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="12" r="2.5"/><path d="M14 10h5M14 14h4"/></>,
  euro:     <><path d="M18 7a6 6 0 1 0 0 10"/><path d="M5 10h9M5 14h9"/></>,
  pin:      <><path d="M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></>,
  history:  <><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/><path d="M12 7v5l3 2"/></>,
  copy:     <><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1"/></>,
  close:    "M6 6l12 12M18 6L6 18",
  chevron:  "M9 6l6 6-6 6",
  globe:    <><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></>,
};

/* ---------- Pill / Tag ---------- */
function Pill({ icon, children, tone = "default" }) {
  const tones = {
    default:  { bg: "rgba(23,28,38,.04)", c: "var(--ink-2)", b: "var(--line)" },
    verified: { bg: "var(--verified-soft)", c: "var(--verified)", b: "rgba(63,111,74,.25)" },
    gold:     { bg: "rgba(181,138,60,.10)", c: "var(--gold)", b: "rgba(181,138,60,.30)" },
  }[tone];
  return (
    <span style={{
      display:"inline-flex", alignItems:"center", gap:6,
      padding:"4px 9px 4px 8px", borderRadius:999,
      background: tones.bg, color: tones.c,
      border:`1px solid ${tones.b}`,
      fontSize:11, fontFamily:'"Geist Mono", monospace',
      letterSpacing:".06em", textTransform:"uppercase", whiteSpace:"nowrap"
    }}>
      {icon && <Icon d={I[icon] || icon} size={11} sw={1.6} />}
      {children}
    </span>
  );
}

/* ---------- Password gate ---------- */
function Gate({ onUnlock }) {
  const [v, setV] = useState("");
  const [err, setErr] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const inp = useRef(null);
  useEffect(()=>{ inp.current && inp.current.focus(); }, []);
  function submit(e){
    e.preventDefault();
    setSubmitting(true);
    setTimeout(()=>{
      if (v.trim().toLowerCase() === DEMO_PASSWORD){
        try {
          localStorage.setItem(UNLOCK_KEY, JSON.stringify({ at: Date.now() }));
        } catch(_){}
        onUnlock();
      } else {
        setErr(true); setSubmitting(false);
      }
    }, 350);
  }
  return (
    <div className="grain" style={{
      minHeight:"100dvh", display:"grid", placeItems:"center", padding:"24px"
    }}>
      <div style={{
        width:"100%", maxWidth:440,
        background:"var(--card)", border:"1px solid var(--line)",
        borderRadius:14, padding:"28px 28px 24px",
        boxShadow:"var(--shadow)"
      }}>
        <div style={{display:"flex", alignItems:"center", justifyContent:"space-between", marginBottom:28}}>
          <div style={{display:"flex", alignItems:"center", gap:10}}>
            <div style={{
              width:30, height:30, borderRadius:8,
              background:"var(--ink)", color:"var(--paper)",
              display:"grid", placeItems:"center"
            }}>
              <span className="serif" style={{fontSize:18, lineHeight:1, marginTop:2}}>M</span>
            </div>
            <div>
              <div style={{fontSize:13, fontWeight:500}}>Mohamed Sahbi</div>
              <div className="eyebrow" style={{fontSize:9.5}}>{DOSSIER_REF}</div>
            </div>
          </div>
          <Pill icon="lock" tone="default">Privé</Pill>
        </div>

        <div className="eyebrow" style={{marginBottom:8}}>Dossier locataire</div>
        <h1 className="serif" style={{fontSize:34, margin:"0 0 8px", letterSpacing:"-.018em"}}>
          Un accès, une lecture.
        </h1>
        <p style={{margin:"0 0 22px", color:"var(--muted)", fontSize:14.5, maxWidth:380}}>
          Saisissez le code communiqué par e-mail pour consulter le dossier complet et télécharger les pièces.
        </p>

        <form onSubmit={submit}>
          <label className="eyebrow" htmlFor="pw" style={{display:"block", marginBottom:8}}>Code d'accès</label>
          <div style={{
            display:"flex", alignItems:"center",
            border:`1px solid ${err ? "var(--danger)" : "var(--line-2)"}`,
            background:"#FFFCF6", borderRadius:10, padding:"2px 4px 2px 14px",
            transition:"border-color .2s"
          }}>
            <Icon d={I.lock} size={15} />
            <input id="pw" ref={inp} type="password" value={v}
              onChange={(e)=>{setV(e.target.value); setErr(false);}}
              placeholder="••••••••"
              autoComplete="off"
              style={{
                flex:1, border:"none", outline:"none", background:"transparent",
                padding:"14px 12px", fontSize:15, fontFamily:'"Geist Mono", monospace',
                letterSpacing:".15em"
              }} />
            <button type="submit" disabled={submitting} style={{
              background:"var(--ink)", color:"var(--paper)",
              border:"none", borderRadius:8, padding:"10px 14px",
              display:"inline-flex", alignItems:"center", gap:8, fontSize:13.5, fontWeight:500,
              opacity: submitting ? .6 : 1
            }}>
              {submitting ? "Vérification…" : "Ouvrir"} <Icon d={I.arrow} size={14}/>
            </button>
          </div>
          <div style={{minHeight:18, marginTop:8, fontSize:12.5, color: err ? "var(--danger)" : "var(--muted)"}}>
            {err ? "Code incorrect. Réessayez ou demandez le code à Mohamed." : ""}
          </div>
        </form>

        <div className="hairline" style={{margin:"22px 0 0", paddingTop:14, display:"flex", justifyContent:"space-between", alignItems:"center", fontSize:11.5, color:"var(--muted)"}}>
          <span>Chiffré · pièces téléchargeables</span>
          <span className="mono" style={{fontSize:10.5, letterSpacing:".1em"}}>v.2026.05</span>
        </div>
      </div>

      <div className="no-print" style={{position:"fixed", bottom:18, left:0, right:0, textAlign:"center", fontSize:11, color:"var(--muted)"}}>
        Conçu et développé par <a href="https://webcraftdev.com" target="_blank" rel="noopener" style={{color:"var(--ink)", textDecoration:"none", borderBottom:"1px dotted var(--line-2)"}}>WebCraftDev</a>
      </div>
    </div>
  );
}

/* ---------- Top bar inside dossier ---------- */
function TopBar() {
  return (
    <div className="no-print" style={{
      position:"sticky", top:0, zIndex:40,
      background:"rgba(246,241,231,.78)",
      backdropFilter:"saturate(140%) blur(10px)",
      borderBottom:"1px solid var(--line)"
    }}>
      <div className="container topbar-row" style={{display:"flex", alignItems:"center", justifyContent:"space-between", gap:12, height:56}}>
        <div style={{display:"flex", alignItems:"center", gap:10, minWidth:0}}>
          <div style={{
            width:24, height:24, borderRadius:6,
            background:"var(--ink)", color:"var(--paper)",
            display:"grid", placeItems:"center", flexShrink:0
          }}>
            <span className="serif" style={{fontSize:14, lineHeight:1, marginTop:1}}>M</span>
          </div>
          <div className="mono topbar-brand" style={{fontSize:11.5, letterSpacing:".12em", color:"var(--muted)", whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis"}}>
            DOSSIER · <span style={{color:"var(--ink)"}}>MOHAMED SAHBI</span>
          </div>
        </div>
        <nav style={{display:"flex", alignItems:"center", gap:18, fontSize:13}}>
          <a href="#synthese" className="topbar-link" style={navLink}>Synthèse</a>
          <a href="#locataire" className="topbar-link" style={navLink}>Locataire</a>
          <a href="#garant" className="topbar-link" style={navLink}>Garant</a>
          <a href="#a-propos" className="topbar-link" style={navLink}>À propos</a>
          <a href={DOSSIER_ZIP_HREF} download={DOSSIER_ZIP_NAME}
             data-dossier-download="full-zip"
             onClick={()=>{ try{ window.hj && window.hj("event","dossier_zip_download"); }catch(_){} }}
             className="topbar-cta"
             style={{
               background:"var(--ink)", color:"var(--paper)", textDecoration:"none",
               border:"1px solid var(--ink)",
               borderRadius:8, padding:"7px 12px", display:"inline-flex", alignItems:"center", gap:7, fontSize:12.5,
               whiteSpace:"nowrap", flexShrink:0
             }}>
            <Icon d={I.download} size={14}/> <span className="topbar-cta-label">Télécharger le dossier</span>
          </a>
        </nav>
      </div>
      <style>{`
        @media (max-width: 760px){
          .topbar-link{display:none}
        }
        @media (max-width: 480px){
          .topbar-cta-label{display:none}
          .topbar-cta{padding:7px 10px !important}
        }
        @media (max-width: 380px){
          .topbar-brand{font-size:10.5px !important}
        }
      `}</style>
    </div>
  );
}
const navLink = { textDecoration:"none", color:"var(--ink-2)", padding:"4px 0", borderBottom:"1px solid transparent" };

/* ---------- Hero ---------- */
function Hero() {
  return (
    <section className="grain" style={{paddingTop:48, paddingBottom:56}}>
      <div className="container" style={{display:"grid", gridTemplateColumns:"minmax(0,1fr)", gap:36}}>
        <div style={{display:"flex", alignItems:"center", justifyContent:"space-between", flexWrap:"wrap", gap:12}}>
          <div className="eyebrow">Dossier locataire · {DOSSIER_REF}</div>
          <div style={{display:"flex", gap:8, flexWrap:"wrap"}}>
            <Pill icon="check" tone="verified">Pièces vérifiables</Pill>
            <Pill icon="shield" tone="gold">Garant solide</Pill>
            <Pill icon="history">3 ans · 0 incident</Pill>
          </div>
        </div>

        <div className="hero-grid">
          <div className="hero-portrait">
            <img src="images/mohamed-portrait.png" alt="Portrait de Mohamed Sahbi" />
            <div className="hero-portrait-meta">
              <span className="mono" style={{fontSize:10.5, letterSpacing:".1em", color:"var(--muted)"}}>MOHAMED · 36 ANS</span>
            </div>
          </div>

          <div>
            <h1 className="serif hero-name" style={{fontSize:"clamp(40px, 9vw, 84px)", margin:"0 0 10px", letterSpacing:"-.02em"}}>
              Mohamed Sahbi
            </h1>
            <p className="hero-sub" style={{fontSize:"clamp(15.5px, 2.2vw, 18.5px)", margin:"0 0 24px", color:"var(--ink-2)", maxWidth:560, lineHeight:1.45}}>
              Développeur web et expert SEO/GEO. <span style={{color:"var(--muted)"}}>En recherche active d'un CDI et d'un logement à Paris.</span>
            </p>

            <div className="kpi-row">
              <Kpi label="Garantie mensuelle" value="10 950 €" unit="brut / mois" />
              <Kpi label="Antécédents" value="3 ans" unit="à Paris, via Orpi" />
              <Kpi label="Titre de séjour" value="2028" unit="passeport talent" />
            </div>

            <div style={{display:"flex", gap:10, flexWrap:"wrap", marginTop:28}}>
              <ContactBtn icon="phone"    label="07 84 85 21 49" href="tel:+33784852149" />
              <ContactBtn icon="mail"     label="mohamed-sahbi@webcraftdev.com" href="mailto:mohamed-sahbi@webcraftdev.com" />
              <ContactBtn icon="whatsapp" label="WhatsApp"        href="https://wa.me/33784852149" />
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .hero-grid{display:grid; grid-template-columns: 320px 1fr; gap: 48px; align-items:end}
        .hero-portrait{
          position:relative; border-radius:6px; overflow:hidden;
          background:#222; aspect-ratio: 4/5;
          border:1px solid var(--line-2);
          box-shadow: 0 30px 50px -30px rgba(23,28,38,.4);
        }
        .hero-portrait img{width:100%; height:100%; object-fit:cover; display:block; filter: contrast(1.02)}
        .hero-portrait-meta{
          position:absolute; left:0; right:0; bottom:0;
          padding:10px 12px;
          background: linear-gradient(180deg, transparent, rgba(0,0,0,.6));
          color: var(--paper);
        }
        .hero-portrait-meta .mono{color:rgba(246,241,231,.85) !important}
        .kpi-row{
          display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
          gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
        }
        .kpi-cell + .kpi-cell{ border-left:1px solid var(--line); }
        .kpi-cell:first-child{ padding-left:0; }
        .kpi-cell:last-child{ padding-right:0; }
        @media (max-width: 820px){
          .hero-grid{grid-template-columns:1fr; gap:28px}
          .hero-portrait{max-width: 280px; aspect-ratio: 4/5}
          .kpi-row{grid-template-columns:1fr}
          .kpi-cell + .kpi-cell{ border-left:none; border-top:1px solid var(--line); }
          .kpi-cell{ padding-left:0 !important; padding-right:0 !important; }
        }
      `}</style>
    </section>
  );
}

function Kpi({ label, value, unit }) {
  return (
    <div className="kpi-cell" style={{padding:"20px 24px", minWidth:0}}>
      <div className="eyebrow" style={{marginBottom:10}}>{label}</div>
      <div style={{display:"flex", alignItems:"baseline", gap:10, flexWrap:"wrap"}}>
        <span className="serif" style={{fontSize:32, lineHeight:1.1, letterSpacing:"-.01em", whiteSpace:"nowrap"}}>{value}</span>
        <span style={{fontSize:13, color:"var(--muted)", lineHeight:1.4}}>{unit}</span>
      </div>
    </div>
  );
}

function ContactBtn({ icon, label, href }) {
  return (
    <a href={href} style={{
      display:"inline-flex", alignItems:"center", gap:8,
      padding:"10px 14px", borderRadius:999,
      background:"var(--card)", border:"1px solid var(--line-2)",
      color:"var(--ink)", textDecoration:"none", fontSize:13.5,
      maxWidth:"100%", minWidth:0
    }}>
      <Icon d={I[icon]} size={15}/>
      <span style={{overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap", minWidth:0}}>{label}</span>
    </a>
  );
}

/* ---------- Synthèse: bento ---------- */
function Synthese() {
  return (
    <section id="synthese" style={{padding:"56px 0", borderTop:"1px solid var(--line)", borderBottom:"1px solid var(--line)", background:"var(--paper-2)"}}>
      <div className="container">
        <SectionHead eyebrow="Synthèse" title="Tout ce qu'un agent doit savoir, en 10 secondes." />

        <div className="bento">
          <BentoCard style={{gridColumn:"span 4"}}>
            <div className="eyebrow">Identité</div>
            <div style={{display:"flex", gap:14, marginTop:14}}>
              <img src="images/mohamed-portrait.png" alt=""
                style={{width:64, height:80, objectFit:"cover", borderRadius:4, border:"1px solid var(--line)"}}/>
              <div>
                <div className="serif" style={{fontSize:22, lineHeight:1.15}}>Mohamed Taieb Sahbi</div>
                <div style={{fontSize:13.5, color:"var(--muted)", marginTop:4}}>Né le 30 janvier 1990 à Gafsa (Tunisie)</div>
                <div style={{fontSize:13.5, color:"var(--muted)"}}>Nationalité tunisienne · titre de séjour FR</div>
              </div>
            </div>
            <Divider/>
            <KV k="Statut" v="En recherche d'un CDI · dev web & SEO/GEO" />
            <KV k="Recherche" v="Petit appartement (≥ 20 m²) · Paris ou alentours bien desservis" />
            <KV k="Budget" v="≤ 800 € CC" />
          </BentoCard>

          <BentoCard style={{gridColumn:"span 5", background:"var(--ink)", color:"var(--paper)"}}>
            <div className="eyebrow" style={{color:"rgba(246,241,231,.6)"}}>Garant · Justin Stolzenberg</div>
            <div style={{display:"flex", alignItems:"baseline", gap:14, marginTop:18, flexWrap:"wrap"}}>
              <span className="serif" style={{fontSize:"clamp(56px, 9vw, 72px)", lineHeight:.9, letterSpacing:"-.025em"}}>10 950</span>
              <span className="serif" style={{fontSize:"clamp(26px, 4vw, 32px)", color:"var(--gold-soft)"}}>€</span>
              <span style={{fontSize:13, color:"rgba(246,241,231,.6)"}}>brut / mois</span>
            </div>
            <div style={{fontSize:14, color:"rgba(246,241,231,.75)", marginTop:8, maxWidth:380}}>
              Gérant de TAJ Production UG. CDI à durée indéterminée, en poste depuis 2020.
            </div>
            <Divider color="rgba(246,241,231,.12)" />
            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:12, fontSize:13.5}}>
              <div>
                <div className="eyebrow" style={{color:"rgba(246,241,231,.55)"}}>Couverture loyer</div>
                <div className="serif" style={{fontSize:22, marginTop:4}}>≈ 13,7 ×</div>
                <div style={{color:"rgba(246,241,231,.6)", fontSize:12}}>pour un loyer de 800 €</div>
              </div>
              <div>
                <div className="eyebrow" style={{color:"rgba(246,241,231,.55)"}}>Lien</div>
                <div className="serif" style={{fontSize:22, marginTop:4}}>Famille</div>
                <div style={{color:"rgba(246,241,231,.6)", fontSize:12}}>même garant depuis 2021</div>
              </div>
            </div>
          </BentoCard>

          <BentoCard style={{gridColumn:"span 3"}}>
            <div className="eyebrow">Domicile actuel</div>
            <div style={{display:"flex", alignItems:"flex-start", gap:8, marginTop:14}}>
              <Icon d={I.pin} size={16}/>
              <div>
                <div style={{fontSize:14.5}}>10 rue du Général Mittelhau</div>
                <div style={{fontSize:14.5}}>67630 Lauterbourg</div>
                <div style={{fontSize:12.5, color:"var(--muted)", marginTop:4}}>hébergé chez ma sœur, depuis août 2024</div>
              </div>
            </div>
            <Divider/>
            <div className="eyebrow">Justificatif</div>
            <div style={{fontSize:13.5, marginTop:6}}>Facture d'eau SIAEP · 04/2026</div>
            <div style={{fontSize:13.5, color:"var(--muted)"}}>Attestation d'hébergement signée</div>
          </BentoCard>

          <BentoCard style={{gridColumn:"span 6"}}>
            <div className="eyebrow">Antécédents locatifs</div>
            <Timeline />
          </BentoCard>

          <BentoCard style={{gridColumn:"span 6"}}>
            <div className="eyebrow">Pièces vérifiables</div>
            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:0, marginTop:16}}>
              {[
                ["Titre de séjour", "Passeport talent · valable jusqu'au 08/2028"],
                ["Avis d'imposition", "Revenus 2024 · solde nul"],
                ["Avis de situation", "INSEE · SIRENE actif"],
                ["Hébergement", "Attestation + facture eau"],
                ["Contrat garant", "Geschäftsführer · CDI depuis 2020"],
                ["Fiches de paie", "Fév · Mars · Avril 2026"],
              ].map(([k,v],i)=>(
                <div key={i} style={{
                  padding:"12px 0", borderBottom:"1px solid var(--line)",
                  display:"flex", alignItems:"center", gap:10
                }}>
                  <span style={{
                    width:18, height:18, borderRadius:99,
                    background:"var(--verified-soft)", color:"var(--verified)",
                    display:"grid", placeItems:"center", flexShrink:0
                  }}>
                    <Icon d={I.check} size={11} sw={2}/>
                  </span>
                  <div style={{minWidth:0}}>
                    <div style={{fontSize:13.5, fontWeight:500}}>{k}</div>
                    <div style={{fontSize:12, color:"var(--muted)"}}>{v}</div>
                  </div>
                </div>
              ))}
            </div>
          </BentoCard>
        </div>

        <style>{`
          .bento{display:grid; grid-template-columns:repeat(12, 1fr); gap:16px; margin-top:28px}
          @media (max-width: 980px){
            .bento > *{grid-column: span 12 !important}
          }
        `}</style>
      </div>
    </section>
  );
}

function BentoCard({ children, style }) {
  return (
    <div style={{
      background:"var(--card)", border:"1px solid var(--line)", borderRadius:14,
      padding:22, ...style
    }}>{children}</div>
  );
}
function KV({ k, v }) {
  return (
    <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline", padding:"8px 0", borderBottom:"1px solid var(--line)", fontSize:13.5}}>
      <span style={{color:"var(--muted)"}}>{k}</span>
      <span style={{textAlign:"right"}}>{v}</span>
    </div>
  );
}
function Divider({ color }) {
  return <div style={{height:1, background: color || "var(--line)", margin:"16px 0"}}/>
}

function Timeline() {
  const items = [
    { y: "2020 – 2023", t: "3 ans à Paris", s: "Studio vide à Romainville · agence Orpi", chip:"Aucun incident", tone:"verified" },
    { y: "2024 – aujourd'hui", t: "Lauterbourg (67)", s: "Hébergé chez ma sœur · attestation jointe", chip:"En cours", tone:"default" },
    { y: "été 2026", t: "Retour à Paris", s: "Recherche petit appartement (≥ 20 m²) · disponibilité immédiate", chip:"Objectif", tone:"gold" },
  ];
  return (
    <div style={{marginTop:18, position:"relative", paddingLeft:18}}>
      <div style={{position:"absolute", left:5, top:6, bottom:6, width:1, background:"var(--line-2)"}}/>
      {items.map((it,i)=>(
        <div key={i} style={{position:"relative", paddingBottom: i===items.length-1 ? 0 : 18}}>
          <span style={{
            position:"absolute", left:-18, top:6, width:11, height:11,
            background:"var(--card)", border:"2px solid var(--ink)", borderRadius:99
          }}/>
          <div className="eyebrow" style={{marginBottom:4}}>{it.y}</div>
          <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", gap:10, flexWrap:"wrap"}}>
            <div style={{fontSize:15, fontWeight:500}}>{it.t}</div>
            <Pill tone={it.tone}>{it.chip}</Pill>
          </div>
          <div style={{fontSize:13, color:"var(--muted)", marginTop:2}}>{it.s}</div>
        </div>
      ))}
    </div>
  );
}

/* ---------- Section head ---------- */
function SectionHead({ eyebrow, title, sub }) {
  return (
    <div style={{display:"flex", justifyContent:"space-between", alignItems:"end", flexWrap:"wrap", gap:14, marginBottom:8}}>
      <div>
        <div className="eyebrow" style={{marginBottom:10}}>{eyebrow}</div>
        <h2 className="serif" style={{fontSize:"clamp(28px, 3.6vw, 44px)", margin:0, letterSpacing:"-.015em", maxWidth:760}}>{title}</h2>
        {sub && <p style={{maxWidth:560, color:"var(--muted)", marginTop:8}}>{sub}</p>}
      </div>
    </div>
  );
}

/* ---------- Document Card ---------- */
function DocCard({ doc, onPreview }) {
  return (
    <article style={{
      background:"var(--card)", border:"1px solid var(--line)", borderRadius:12,
      padding:14, display:"flex", flexDirection:"column", gap:12,
      transition:"transform .25s ease, box-shadow .25s ease, border-color .25s ease"
    }}
    onMouseEnter={e=>{ e.currentTarget.style.transform="translateY(-2px)"; e.currentTarget.style.boxShadow="0 14px 40px -22px rgba(23,28,38,.35)"; e.currentTarget.style.borderColor="var(--line-2)"; }}
    onMouseLeave={e=>{ e.currentTarget.style.transform=""; e.currentTarget.style.boxShadow=""; e.currentTarget.style.borderColor="var(--line)"; }}>
      <button onClick={()=>onPreview(doc)} className="doc-thumb" style={{padding:0, border:"1px solid var(--line)", background:"transparent", cursor:"zoom-in"}}>
        {doc.kind === "image"
          ? <img src={doc.src} alt={doc.title} style={{width:"100%", height:"100%", objectFit: doc.fit || "cover", display:"block"}}/>
          : (doc.Thumb ? <doc.Thumb /> : null)
        }
      </button>
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"flex-start", gap:8}}>
        <div style={{minWidth:0}}>
          <div style={{fontSize:14, fontWeight:500, lineHeight:1.25}}>{doc.title}</div>
          <div style={{fontSize:12, color:"var(--muted)", marginTop:3, display:"flex", gap:8, alignItems:"center", flexWrap:"wrap"}}>
            <span className="mono" style={{fontSize:10.5, letterSpacing:".08em"}}>{doc.type}</span>
            {doc.meta && <><span style={{opacity:.4}}>·</span><span>{doc.meta}</span></>}
          </div>
        </div>
        <Pill icon="check" tone="verified">OK</Pill>
      </div>
      <div style={{display:"flex", gap:8, marginTop:"auto"}}>
        <button onClick={()=>onPreview(doc)} style={{
          flex:1, border:"1px solid var(--line-2)", background:"transparent",
          borderRadius:8, padding:"8px 10px", display:"inline-flex", alignItems:"center", justifyContent:"center", gap:6, fontSize:12.5
        }}>
          <Icon d={I.eye} size={13}/> Aperçu
        </button>
        <a href={doc.src} download style={{
          flex:1, background:"var(--ink)", color:"var(--paper)",
          borderRadius:8, padding:"8px 10px", display:"inline-flex", alignItems:"center", justifyContent:"center", gap:6, fontSize:12.5,
          textDecoration:"none"
        }}>
          <Icon d={I.download} size={13}/> Télécharger
        </a>
      </div>
    </article>
  );
}

/* ---------- Documents (lists) ---------- */
const DOC_LOCATAIRE = [
  { id:"titre-sejour", title:"Titre de séjour", type:"PDF", meta:"Recto + verso · passeport talent",
    kind:"pdf", src:"docs/locataire/titre-sejour.pdf", Thumb: T.TitreSejour },
  { id:"imp",      title:"Avis d'imposition 2025", type:"PDF", meta:"Revenus 2024 · 1 page",
    kind:"pdf", src:"docs/locataire/avis-imposition-2024.pdf", Thumb: T.AvisImpotLocataire },
  { id:"situ",     title:"Avis de situation INSEE", type:"PDF", meta:"SIRENE · activité",
    kind:"pdf", src:"docs/locataire/avis-de-situation.pdf", Thumb: T.AvisSituation },
  { id:"heb",      title:"Attestation d'hébergement", type:"PDF", meta:"Signée 05/2026",
    kind:"pdf", src:"docs/locataire/attestation-hebergement.pdf", Thumb: T.Hebergement },
];

const DOC_GARANT = [
  { id:"passport", title:"Passeport allemand", type:"PDF", meta:"Bundesrepublik · 08/2028",
    kind:"pdf", src:"docs/garant/passeport-justin.pdf", Thumb: T.PasseportJustin },
  { id:"contrat",  title:"Contrat de gérant", type:"PDF", meta:"Geschäftsführer · CDI",
    kind:"pdf", src:"docs/garant/contrat-gerant.pdf", Thumb: T.ContratGerant },
  { id:"fp-02",    title:"Fiche de paie · Février 2026", type:"PDF", meta:"Brutto-Netto · 10 950 €",
    kind:"pdf", src:"docs/garant/fiche-paie-fevrier-2026.pdf", Thumb: T.PayslipFev },
  { id:"fp-03",    title:"Fiche de paie · Mars 2026", type:"PDF", meta:"Brutto-Netto · 10 950 €",
    kind:"pdf", src:"docs/garant/fiche-paie-mars-2026.pdf", Thumb: T.PayslipMar },
  { id:"fp-04",    title:"Fiche de paie · Avril 2026", type:"PDF", meta:"Brutto-Netto · 10 950 €",
    kind:"pdf", src:"docs/garant/fiche-paie-avril-2026.pdf", Thumb: T.PayslipAvr },
  { id:"imp-g",    title:"Avis d'imposition 2025", type:"PDF", meta:"Revenus 2024",
    kind:"pdf", src:"docs/garant/avis-imposition-2024.pdf", Thumb: T.AvisImpotGarant },
  { id:"facture",  title:"Justificatif de domicile", type:"PDF", meta:"Facture d'eau SIAEP · 04/2026",
    kind:"pdf", src:"docs/garant/facture-eau-lauterbourg.pdf", Thumb: T.FactureEau },
];

function DocSection({ id, eyebrow, title, sub, docs, onPreview, footer }) {
  return (
    <section id={id} style={{padding:"72px 0", borderTop:"1px solid var(--line)"}}>
      <div className="container">
        <SectionHead eyebrow={eyebrow} title={title} sub={sub}/>
        <div className="doc-grid" style={{marginTop:32}}>
          {docs.map(d => <DocCard key={d.id} doc={d} onPreview={onPreview}/>)}
        </div>
        {footer}
        <style>{`
          .doc-grid{
            display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap:18px;
          }
        `}</style>
      </div>
    </section>
  );
}

/* ---------- Preview modal ---------- */
function PreviewModal({ doc, onClose }) {
  useEffect(()=>{
    if (!doc) return;
    function esc(e){ if(e.key==="Escape") onClose(); }
    window.addEventListener("keydown", esc);
    document.body.style.overflow = "hidden";
    return ()=>{ window.removeEventListener("keydown", esc); document.body.style.overflow=""; };
  }, [doc, onClose]);
  if (!doc) return null;
  return (
    <div onClick={onClose} style={{
      position:"fixed", inset:0, zIndex:60,
      background:"rgba(15,18,24,.7)", backdropFilter:"blur(4px)",
      display:"grid", placeItems:"center", padding:"4vh 4vw"
    }}>
      <div onClick={e=>e.stopPropagation()} style={{
        background:"var(--card)", borderRadius:12, border:"1px solid var(--line-2)",
        maxWidth:880, width:"100%", maxHeight:"92vh", display:"flex", flexDirection:"column",
        overflow:"hidden"
      }}>
        <div style={{display:"flex", alignItems:"center", justifyContent:"space-between", padding:"14px 18px", borderBottom:"1px solid var(--line)"}}>
          <div>
            <div style={{fontSize:14, fontWeight:500}}>{doc.title}</div>
            <div className="mono" style={{fontSize:11, color:"var(--muted)", marginTop:2}}>{doc.type} · {doc.meta}</div>
          </div>
          <div style={{display:"flex", gap:8}}>
            <a href={doc.src} download style={{
              background:"var(--ink)", color:"var(--paper)",
              borderRadius:8, padding:"8px 12px", display:"inline-flex", alignItems:"center", gap:6, fontSize:12.5,
              textDecoration:"none"
            }}>
              <Icon d={I.download} size={13}/> Télécharger
            </a>
            <button onClick={onClose} style={{
              border:"1px solid var(--line-2)", background:"transparent",
              borderRadius:8, padding:"8px 10px", display:"inline-flex", alignItems:"center", gap:6, fontSize:12.5
            }}>
              <Icon d={I.close} size={13}/>
            </button>
          </div>
        </div>
        <div style={{flex:1, overflow:"auto", background:"#EEE8DA", padding:24, display:"grid", placeItems:"center"}}>
          {doc.kind === "image" ? (
            <img src={doc.src} alt={doc.title} style={{maxWidth:"100%", maxHeight:"75vh", borderRadius:6, boxShadow:"0 30px 60px -30px rgba(0,0,0,.5)"}}/>
          ) : (
            <iframe src={doc.src + "#view=FitH"} title={doc.title} style={{
              width:"min(700px, 100%)", height:"75vh", border:"1px solid var(--line-2)", background:"#fff"
            }}/>
          )}
        </div>
      </div>
    </div>
  );
}

/* ---------- About + Footer ---------- */
function About() {
  return (
    <section id="a-propos" style={{padding:"80px 0", borderTop:"1px solid var(--line)", background:"var(--paper-2)"}}>
      <div className="container" style={{display:"grid", gridTemplateColumns:"minmax(0,1fr) 1.1fr", gap:48, alignItems:"center"}}>
        <div style={{
          aspectRatio:"4/5", borderRadius:6, overflow:"hidden",
          border:"1px solid var(--line-2)", boxShadow:"0 30px 60px -30px rgba(23,28,38,.4)"
        }}>
          <img src="images/mohamed-about.png" alt="Mohamed dans son atelier" style={{width:"100%", height:"100%", objectFit:"cover", display:"block"}}/>
        </div>
        <div>
          <div className="eyebrow" style={{marginBottom:14}}>À propos</div>
          <h2 className="serif" style={{fontSize:"clamp(32px, 4.2vw, 52px)", margin:"0 0 18px", letterSpacing:"-.018em"}}>
            Locataire discret, méthodique, et solvable.
          </h2>
          <p style={{fontSize:16.5, lineHeight:1.6, color:"var(--ink-2)"}}>
            J'ai vécu trois ans à Paris, dans un studio vide à Romainville géré par Orpi, sans le moindre incident : loyers virés le 1er du mois, état des lieux de sortie identique à celui d'entrée. Depuis 2024, je suis hébergé chez ma sœur à Lauterbourg, le temps de relancer mon activité.
          </p>
          <p style={{fontSize:16.5, lineHeight:1.6, color:"var(--ink-2)", marginTop:14}}>
            Aujourd'hui, je rentre à Paris pour rejoindre mes clients. Je travaille en indépendant : développement web, SEO/GEO, refonte de sites web. Je suis aussi activement à la recherche d'un CDI dans le développement web ou le SEO. Je cherche un logement calme et en bon état.
          </p>
          <div style={{display:"flex", flexWrap:"wrap", gap:8, marginTop:22}}>
            <Pill icon="check" tone="verified">Non fumeur</Pill>
            <Pill icon="check" tone="verified">Sans animal</Pill>
            <Pill icon="check" tone="verified">Loyer prélevé le 1er</Pill>
            <Pill icon="globe">FR · EN · AR</Pill>
          </div>
          <div className="hairline" style={{marginTop:30, paddingTop:18, display:"flex", gap:18, flexWrap:"wrap", color:"var(--muted)", fontSize:13.5}}>
            <span>Disponibilité&nbsp;: <span style={{color:"var(--ink)"}}>immédiate</span></span>
            <span>Préavis&nbsp;: <span style={{color:"var(--ink)"}}>aucun</span></span>
            <span>Référence Orpi&nbsp;: <span style={{color:"var(--ink)"}}>sur demande</span></span>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 820px){
          #a-propos .container{grid-template-columns:1fr !important; gap:28px}
          #a-propos .container > div:first-child{max-width: 320px}
        }
      `}</style>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{padding:"60px 0 40px"}}>
      <div className="container">
        <div className="hairline" style={{paddingTop:36, display:"grid", gridTemplateColumns:"1.2fr 1fr 1fr", gap:32, alignItems:"start"}}>
          <div>
            <div style={{display:"flex", alignItems:"center", gap:10, marginBottom:10}}>
              <div style={{
                width:24, height:24, borderRadius:6,
                background:"var(--ink)", color:"var(--paper)",
                display:"grid", placeItems:"center"
              }}>
                <span className="serif" style={{fontSize:14, lineHeight:1, marginTop:1}}>W</span>
              </div>
              <span style={{fontSize:14, fontWeight:500}}>WebCraftDev</span>
            </div>
            <p style={{fontSize:13.5, color:"var(--muted)", maxWidth:380, lineHeight:1.55}}>
              Ce dossier a été conçu et développé par Mohamed pour son agence WebCraftDev : refonte de sites web, SEO/GEO et sites sur mesure.
            </p>
            <a href="https://webcraftdev.com" style={{
              display:"inline-flex", alignItems:"center", gap:8, marginTop:14,
              padding:"9px 13px", border:"1px solid var(--ink)", borderRadius:99,
              textDecoration:"none", color:"var(--ink)", fontSize:13
            }}>
              Voir webcraftdev.com <Icon d={I.arrow} size={13}/>
            </a>
          </div>
          <div>
            <div className="eyebrow" style={{marginBottom:10}}>Pour les agences</div>
            <p style={{fontSize:13.5, color:"var(--ink-2)", lineHeight:1.55, maxWidth:300}}>
              Vous aimez ce dossier ? Imaginez ce que je peux faire pour votre site d'agence.
            </p>
            <a href="mailto:contact@webcraftdev.com?subject=Site%20agence%20immobili%C3%A8re" style={{
              fontSize:13, color:"var(--gold)", textDecoration:"none", borderBottom:"1px solid var(--gold-soft)"
            }}>contact@webcraftdev.com →</a>
          </div>
          <div>
            <div className="eyebrow" style={{marginBottom:10}}>Confidentialité</div>
            <p style={{fontSize:13, color:"var(--muted)", lineHeight:1.55, maxWidth:280}}>
              Ce dossier est privé. Les pièces ne sont consultables qu'avec le code communiqué et ne doivent être transmises qu'à votre service location.
            </p>
          </div>
        </div>
        <div style={{marginTop:36, display:"flex", justifyContent:"space-between", color:"var(--muted)", fontSize:12, flexWrap:"wrap", gap:8}}>
          <span>© 2026 Mohamed Sahbi · {DOSSIER_REF}</span>
          <span className="mono" style={{letterSpacing:".1em"}}>v.2026.05 · MAJ le 11.05.2026</span>
        </div>
      </div>
      <style>{`
        @media (max-width: 820px){
          footer .hairline{grid-template-columns:1fr !important}
        }
      `}</style>
    </footer>
  );
}

/* ---------- App ---------- */
function App() {
  const [unlocked, setUnlocked] = useState(()=>{
    try {
      const raw = localStorage.getItem(UNLOCK_KEY);
      if (!raw) return false;
      const { at } = JSON.parse(raw);
      if (typeof at !== "number") return false;
      if (Date.now() - at > UNLOCK_TTL_MS){
        localStorage.removeItem(UNLOCK_KEY);
        return false;
      }
      return true;
    } catch(_){ return false; }
  });
  const [preview, setPreview] = useState(null);
  return (
    <>
      {!unlocked && <Gate onUnlock={()=>setUnlocked(true)} />}
      {unlocked && (
        <>
          <TopBar />
          <Hero />
          <Synthese />
          <DocSection id="locataire"
            eyebrow="Mes documents · locataire"
            title="Les pièces qui prouvent qui je suis."
            sub="Identité, fiscalité, situation et hébergement. Cliquez pour prévisualiser, téléchargez en un clic."
            docs={DOC_LOCATAIRE}
            onPreview={setPreview}
          />
          <DocSection id="garant"
            eyebrow="Documents du garant"
            title="Justin Stolzenberg, garant solide."
            sub="Gérant de TAJ Production UG en CDI depuis 2020, 10 950 € brut mensuel. Contrat, fiches de paie, avis fiscal et justificatif de domicile."
            docs={DOC_GARANT}
            onPreview={setPreview}
            footer={
              <div style={{
                marginTop:32, padding:"18px 22px", borderRadius:12,
                background:"var(--card)", border:"1px solid var(--line)",
                display:"flex", justifyContent:"space-between", flexWrap:"wrap", gap:12, alignItems:"center"
              }}>
                <div>
                  <div className="eyebrow" style={{marginBottom:4}}>Cumul de revenus garant</div>
                  <div className="serif" style={{fontSize:24, letterSpacing:"-.01em"}}>131 400 € <span style={{color:"var(--muted)", fontSize:14}}> brut annuel</span></div>
                </div>
                <div style={{display:"flex", gap:8, flexWrap:"wrap"}}>
                  <Pill tone="verified" icon="check">3 fiches consécutives</Pill>
                  <Pill tone="gold" icon="shield">Caution simple</Pill>
                </div>
              </div>
            }
          />
          <About />
          <Footer />
          <PreviewModal doc={preview} onClose={()=>setPreview(null)} />
        </>
      )}
    </>
  );
}

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