import { useState, useRef, useCallback } from "react";

const GROQ_KEY = "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";

const SECTORS = [
  { id:"avocat", label:"Avocat / Cabinet juridique", icon:"⚖️" },
  { id:"immobilier", label:"Immobilier / Mandataire", icon:"🏠" },
  { id:"comptable", label:"Expert-comptable", icon:"📊" },
  { id:"conseil", label:"Conseil / Stratégie", icon:"💼" },
  { id:"opticien", label:"Opticien / Santé", icon:"👓" },
  { id:"medical", label:"Médical / Paramédical", icon:"🩺" },
  { id:"architecte", label:"Architecte / Design", icon:"📐" },
  { id:"restaurant", label:"Restaurant / Traiteur", icon:"🍽️" },
  { id:"artisan", label:"Artisan / BTP", icon:"🔨" },
  { id:"beaute", label:"Beauté / Bien-être", icon:"✨" },
  { id:"formation", label:"Formation / Coaching", icon:"🎓" },
  { id:"autre", label:"Autre secteur", icon:"🏢" },
];

const PALETTES = [
  { id:"navy", label:"Marine & Or", primary:"#1a2744", accent:"#c9a84c", bg:"#f8f6f1" },
  { id:"forest", label:"Forêt & Crème", primary:"#2d4a3e", accent:"#a8875a", bg:"#faf9f6" },
  { id:"burgundy", label:"Bordeaux & Doré", primary:"#5c1a2a", accent:"#d4a953", bg:"#fdf8f5" },
  { id:"slate", label:"Ardoise & Bleu", primary:"#2c3e50", accent:"#3498db", bg:"#f5f7fa" },
  { id:"charcoal", label:"Charbon & Cuivre", primary:"#1a1a2e", accent:"#c87941", bg:"#f9f7f5" },
  { id:"ocean", label:"Océan & Sable", primary:"#0d3b66", accent:"#e8a87c", bg:"#fafbf9" },
  { id:"modern", label:"Noir & Rouge", primary:"#111111", accent:"#e63946", bg:"#ffffff" },
  { id:"terra", label:"Terracotta & Olive", primary:"#7a3b2e", accent:"#6B8E23", bg:"#FFF8F0" },
];

const FONTS = [
  { id:"classic", label:"Classique élégant", heading:"'Playfair Display',serif", body:"'Source Sans 3',sans-serif", imp:"Playfair+Display:wght@400;600;700;800&family=Source+Sans+3:wght@300;400;600;700" },
  { id:"modern", label:"Moderne épuré", heading:"'DM Sans',sans-serif", body:"'DM Sans',sans-serif", imp:"DM+Sans:wght@300;400;500;600;700" },
  { id:"editorial", label:"Éditorial chic", heading:"'Cormorant Garamond',serif", body:"'Montserrat',sans-serif", imp:"Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700" },
  { id:"bold", label:"Audacieux pro", heading:"'Sora',sans-serif", body:"'Work Sans',sans-serif", imp:"Sora:wght@300;400;600;700;800&family=Work+Sans:wght@300;400;500;600" },
  { id:"luxury", label:"Luxe raffiné", heading:"'Libre Baskerville',serif", body:"'Karla',sans-serif", imp:"Libre+Baskerville:wght@400;700&family=Karla:wght@300;400;500;600;700" },
];

const emptyForm = () => ({
  businessName:"", tagline:"", sector:"", sectorCustom:"", description:"",
  services:["","","",""], serviceDescs:["","","",""],
  ownerName:"", ownerTitle:"", ownerBio:"",
  phone:"", email:"", address:"", hours:"",
  socialFb:"", socialIg:"", socialLi:"", socialG:"",
  testimonials:[{name:"",text:""},{name:"",text:""},{name:"",text:""}],
  palette:"navy", fonts:"classic", ctaText:"Prendre rendez-vous", ctaUrl:"#contact",
  stats:[{n:"",l:""},{n:"",l:""},{n:"",l:""}],
  imgLogo:null, imgHero:null, imgOwner:null, imgSvc:[null,null,null,null],
  articles:[{title:"",date:"",excerpt:"",img:null,content:""},{title:"",date:"",excerpt:"",img:null,content:""},{title:"",date:"",excerpt:"",img:null,content:""},{title:"",date:"",excerpt:"",img:null,content:""},{title:"",date:"",excerpt:"",img:null,content:""},{title:"",date:"",excerpt:"",img:null,content:""}],
});

/* ── GROQ ── */
async function callGroq(prompt) {
  try {
    const r = await fetch("https://api.groq.com/openai/v1/chat/completions", {
      method:"POST", headers:{"Content-Type":"application/json",Authorization:`Bearer ${GROQ_KEY}`},
      body: JSON.stringify({model:"llama-3.3-70b-versatile",messages:[{role:"user",content:prompt}],temperature:0.7,max_tokens:2000}),
    });
    const d = await r.json();
    const txt = d.choices?.[0]?.message?.content||"";
    const c = txt.replace(/```json|```/g,"").trim();
    const s = c.indexOf("{"), e = c.lastIndexOf("}");
    if(s===-1) return null;
    return JSON.parse(c.slice(s,e+1));
  } catch(e){console.error(e);return null;}
}

async function aiEnhance(f) {
  const sec = f.sector==="autre"?f.sectorCustom:SECTORS.find(s=>s.id===f.sector)?.label||"pro";
  return callGroq(`Tu es un copywriter web français expert. Client: ${f.businessName} | Secteur: ${sec} | Tagline: ${f.tagline||"?"} | Desc: ${f.description||"?"} | Dirigeant: ${f.ownerName||"?"} (${f.ownerTitle||"?"}) | Services: ${f.services.filter(Boolean).join(", ")||"?"}

JSON uniquement:
{"tagline":"max 15 mots, un mot entre *astérisques*","description":"2-3 phrases max 250 car","ownerBio":"3-4 phrases bio (vide si pas de nom)","serviceDescs":["desc1","desc2","desc3","desc4"],"stats":[{"number":"25+","label":"années"},{"number":"500+","label":"clients"},{"number":"98%","label":"satisfaction"}]}`);
}

async function aiArticles(f) {
  const sec = f.sector==="autre"?f.sectorCustom:SECTORS.find(s=>s.id===f.sector)?.label||"pro";
  return callGroq(`Rédacteur web expert. 6 articles blog style Artur'in pour "${f.businessName}" (${sec}). Informatifs, SEO, conseil client.

JSON uniquement:
{"articles":[{"title":"T1","date":"2025-01-15","excerpt":"Résumé","content":"150-200 mots, paragraphes par \\n\\n"},{"title":"T2","date":"2025-02-03","excerpt":"...","content":"..."},{"title":"T3","date":"2025-02-20","excerpt":"...","content":"..."},{"title":"T4","date":"2025-03-10","excerpt":"...","content":"..."},{"title":"T5","date":"2025-03-28","excerpt":"...","content":"..."},{"title":"T6","date":"2025-04-14","excerpt":"...","content":"..."}]}`);
}

/* ── IMAGE ── */
function toB64(file){return new Promise(r=>{const fr=new FileReader();fr.onload=()=>r(fr.result);fr.readAsDataURL(file)})}

function ImgUp({label,value,onChange,w=200,h=140}){
  const ref=useRef(null);
  return <div style={{display:"inline-flex",flexDirection:"column",gap:4}}>
    {label&&<span style={{fontSize:11,fontWeight:600,color:"#1a2744"}}>{label}</span>}
    <div onClick={()=>ref.current?.click()} style={{width:w,height:h,borderRadius:8,border:"2px dashed #ccc",background:value?`url(${value}) center/cover`:"#f5f5f5",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",position:"relative",overflow:"hidden"}}>
      {!value&&<span style={{fontSize:11,color:"#999",textAlign:"center",padding:6}}>📷 Cliquer</span>}
      {value&&<button onClick={e=>{e.stopPropagation();onChange(null)}} style={{position:"absolute",top:3,right:3,background:"rgba(0,0,0,.6)",color:"#fff",border:"none",borderRadius:"50%",width:20,height:20,cursor:"pointer",fontSize:10,lineHeight:"20px"}}>✕</button>}
    </div>
    <input ref={ref} type="file" accept="image/*" onChange={async e=>{const file=e.target.files?.[0];if(file)onChange(await toB64(file))}} style={{display:"none"}} />
  </div>;
}

/* ── FIELD ── */
function Fld({label,sub,value,onChange,ph,ta,half,req}){
  const T=ta?"textarea":"input";
  return <div style={{flex:half?"1 1 45%":"1 1 100%",minWidth:half?190:undefined}}>
    <label style={{display:"block",fontSize:11.5,fontWeight:600,color:"#1a2744",marginBottom:2}}>{label}{req&&<span style={{color:"#c44"}}> *</span>}</label>
    {sub&&<span style={{fontSize:10.5,color:"#999",display:"block",marginBottom:2}}>{sub}</span>}
    <T value={value} onChange={e=>onChange(e.target.value)} placeholder={ph} rows={ta?3:undefined}
      style={{width:"100%",padding:"8px 11px",border:"1.5px solid #ddd",borderRadius:6,fontSize:13,fontFamily:"inherit",resize:ta?"vertical":undefined,outline:"none",background:"#fafafa",boxSizing:"border-box"}}
      onFocus={e=>e.target.style.borderColor="#1a2744"} onBlur={e=>e.target.style.borderColor="#ddd"} />
  </div>;
}

/* ── STEPPER ── */
function Steps({cur,labels}){
  return <div style={{display:"flex",gap:2,marginBottom:24,flexWrap:"wrap"}}>
    {labels.map((l,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:2}}>
      <div style={{width:26,height:26,borderRadius:"50%",fontSize:10.5,fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center",background:i<=cur?"#1a2744":"#e0e0e0",color:i<=cur?"#fff":"#aaa",boxShadow:i===cur?"0 0 0 3px rgba(26,39,68,.15)":"none"}}>{i+1}</div>
      <span style={{fontSize:10.5,color:i<=cur?"#1a2744":"#bbb",fontWeight:i===cur?700:400}}>{l}</span>
      {i<labels.length-1&&<div style={{width:10,height:2,background:i<cur?"#1a2744":"#e0e0e0"}}/>}
    </div>)}
  </div>;
}

/* ── HTML GEN ── */
function genHTML(f){
  const P=PALETTES.find(p=>p.id===f.palette)||PALETTES[0];
  const FN=FONTS.find(x=>x.id===f.fonts)||FONTS[0];
  const sec=f.sector==="autre"?f.sectorCustom:SECTORS.find(s=>s.id===f.sector)?.label||"";
  const svcs=f.services.filter(s=>s.trim());
  const testos=f.testimonials.filter(t=>t.name&&t.text);
  const stats=f.stats.filter(s=>s.n&&s.l);
  const arts=f.articles.filter(a=>a.title&&a.excerpt);
  const nav=["Accueil",svcs.length&&"Services",f.ownerName&&"À propos",testos.length&&"Témoignages",arts.length&&"Actualités","Contact"].filter(Boolean);
  const soc=[f.socialFb&&`<a href="${f.socialFb}" target="_blank" class="sl">Facebook</a>`,f.socialIg&&`<a href="${f.socialIg}" target="_blank" class="sl">Instagram</a>`,f.socialLi&&`<a href="${f.socialLi}" target="_blank" class="sl">LinkedIn</a>`,f.socialG&&`<a href="${f.socialG}" target="_blank" class="sl">Google</a>`].filter(Boolean);
  const ic=["◆","◇","▸","●"];
  const hs=f.imgHero?`background:linear-gradient(rgba(0,0,0,.52),rgba(0,0,0,.52)),url('${f.imgHero}') center/cover no-repeat`:`background:linear-gradient(135deg,${P.primary} 0%,color-mix(in srgb,${P.primary} 75%,#000) 100%)`;
  const logo=f.imgLogo?`<img src="${f.imgLogo}" alt="${f.businessName}" style="height:42px;width:auto">`:`<span class="nl">${f.businessName}</span>`;
  const sl=n=>n.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f\s]/g,'');
  const fmtD=d=>{try{return new Date(d+'T00:00:00').toLocaleDateString('fr-FR',{day:'numeric',month:'long',year:'numeric'})}catch(e){return d}};

return `<!DOCTYPE html><html lang="fr"><head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>${f.businessName} | ${f.tagline||sec}</title>
<meta name="description" content="${(f.description||f.tagline||'').slice(0,160)}">
<meta property="og:title" content="${f.businessName}"><meta property="og:description" content="${(f.description||'').slice(0,200)}">
${f.imgHero?`<meta property="og:image" content="${f.imgHero}">`:''}
<link href="https://fonts.googleapis.com/css2?family=${FN.imp}&display=swap" rel="stylesheet">
<style>
:root{--p:${P.primary};--a:${P.accent};--bg:${P.bg};--hf:${FN.heading};--bf:${FN.body}}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--bf);color:${P.primary};background:var(--bg);line-height:1.7}img{max-width:100%;height:auto}a{color:inherit;text-decoration:none}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.05);padding:0 5%}.ni{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;height:70px}.nl{font-family:var(--hf);font-size:21px;font-weight:700;color:var(--p)}.nk{display:flex;gap:28px;list-style:none}.nk a{font-size:13.5px;font-weight:500;color:var(--p);opacity:.65;transition:.3s}.nk a:hover{opacity:1;color:var(--a)}.nc{background:var(--p);color:#fff;padding:10px 22px;border-radius:6px;font-size:13px;font-weight:600;transition:transform .2s}.nc:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.15)}
.hb{display:none;background:none;border:none;cursor:pointer;padding:8px}.hb span{display:block;width:22px;height:2px;background:var(--p);margin:5px 0}.mm{display:none;position:fixed;top:70px;left:0;right:0;background:#fff;padding:20px 5%;box-shadow:0 8px 30px rgba(0,0,0,.1);z-index:99}.mm.open{display:flex;flex-direction:column;gap:16px}.mm a{font-size:16px;font-weight:500;padding:8px 0;border-bottom:1px solid #eee}
.hero{min-height:100vh;display:flex;align-items:center;padding:100px 5% 60px;${hs};color:#fff;position:relative;overflow:hidden}.hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:100px;background:linear-gradient(to top,var(--bg),transparent)}.hi{max-width:1200px;margin:0 auto;width:100%;position:relative;z-index:2}.hbd{display:inline-block;padding:6px 16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:50px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:24px}.hero h1{font-family:var(--hf);font-size:clamp(32px,5vw,60px);font-weight:700;line-height:1.15;margin-bottom:22px;max-width:700px}.hero h1 em{font-style:italic;color:var(--a)}.hero>div>p{font-size:17px;opacity:.85;max-width:520px;margin-bottom:32px}.bh{display:inline-flex;align-items:center;gap:8px;background:var(--a);color:#fff;padding:15px 34px;border-radius:6px;font-size:15px;font-weight:600;transition:transform .3s}.bh:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.25)}.bh::after{content:'→';margin-left:4px}
.sec{padding:90px 5%}.si{max-width:1100px;margin:0 auto}.sla{font-size:11.5px;letter-spacing:3px;text-transform:uppercase;color:var(--a);font-weight:600;margin-bottom:10px}.stt{font-family:var(--hf);font-size:clamp(26px,3.5vw,42px);font-weight:700;color:var(--p);margin-bottom:16px;line-height:1.2}.ssu{font-size:16px;color:#666;max-width:580px;margin-bottom:44px}
.stb{display:flex;background:var(--p)}.stb .st{flex:1;text-align:center;padding:44px 20px;border-right:1px solid rgba(255,255,255,.08)}.stb .st:last-child{border:none}.stn{font-family:var(--hf);font-size:44px;font-weight:700;color:var(--a);margin-bottom:6px}.stl{font-size:13px;color:rgba(255,255,255,.6)}
.sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px}.sc{padding:36px 28px;background:#fff;border-radius:12px;border:1px solid rgba(0,0,0,.05);transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden}.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--a);transform:scaleX(0);transition:.4s;transform-origin:left}.sc:hover{transform:translateY(-4px);box-shadow:0 14px 44px rgba(0,0,0,.07)}.sc:hover::before{transform:scaleX(1)}.sci{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:18px}.sic{width:44px;height:44px;background:color-mix(in srgb,var(--a) 12%,transparent);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--a);font-size:18px;font-weight:700}.sc h3{font-family:var(--hf);font-size:19px;font-weight:700;margin-bottom:10px;color:var(--p)}.sc p{font-size:14.5px;color:#666}
.ag{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.aimg{width:100%;height:400px;object-fit:cover;border-radius:14px}.aph{width:100%;height:400px;background:linear-gradient(135deg,var(--p),color-mix(in srgb,var(--a) 35%,var(--p)));border-radius:14px;display:flex;align-items:center;justify-content:center}.ain{font-family:var(--hf);font-size:72px;color:rgba(255,255,255,.18);font-weight:700}.ac h3{font-family:var(--hf);font-size:26px;font-weight:700;color:var(--p);margin-bottom:6px}.ac .ft{font-size:14px;color:var(--a);font-weight:600;margin-bottom:18px;display:block}.ac p{font-size:14.5px;color:#555;line-height:1.8;margin-bottom:14px}.aq{padding:18px 22px;border-left:3px solid var(--a);background:color-mix(in srgb,var(--a) 5%,transparent);border-radius:0 8px 8px 0;font-style:italic;color:#555;margin-top:20px}
.tb{background:var(--p);color:#fff}.tg{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:24px}.tc{padding:32px;background:rgba(255,255,255,.06);border-radius:12px;border:1px solid rgba(255,255,255,.07)}.ts{color:var(--a);font-size:15px;letter-spacing:2px;margin-bottom:14px}.tc p{font-size:14.5px;opacity:.9;margin-bottom:18px;font-style:italic}.ta{font-size:13px;font-weight:600;opacity:.6}
.arg{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px}.arc{background:#fff;border-radius:12px;overflow:hidden;border:1px solid rgba(0,0,0,.06);transition:transform .3s,box-shadow .3s}.arc:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(0,0,0,.07)}.arth{width:100%;height:180px;object-fit:cover;background:linear-gradient(135deg,color-mix(in srgb,var(--a) 20%,var(--bg)),color-mix(in srgb,var(--p) 15%,var(--bg)))}.arb{padding:24px}.ard{font-size:12px;color:var(--a);font-weight:600;margin-bottom:8px}.arc h3{font-family:var(--hf);font-size:18px;font-weight:700;color:var(--p);margin-bottom:10px;line-height:1.3}.arex{font-size:14px;color:#666;margin-bottom:14px}.arm{font-size:13px;color:var(--a);font-weight:600}.arm:hover{text-decoration:underline}
.af{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;background:var(--bg);overflow-y:auto}.af.active{display:block}.afi{max-width:760px;margin:0 auto;padding:40px 5% 80px}.afb{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--a);font-weight:600;margin-bottom:30px;cursor:pointer;border:none;background:none;font-family:var(--bf)}.af h1{font-family:var(--hf);font-size:clamp(26px,4vw,38px);font-weight:700;color:var(--p);margin-bottom:12px}.afm{font-size:13px;color:var(--a);font-weight:600;margin-bottom:30px}.afhi{width:100%;height:340px;object-fit:cover;border-radius:12px;margin-bottom:32px}.afct{font-size:16px;line-height:1.9;color:#444}.afct p{margin-bottom:18px}
.cg{display:grid;grid-template-columns:1fr 1fr;gap:44px}.ci{display:flex;flex-direction:column;gap:22px}.cit{display:flex;gap:14px}.cic{width:42px;height:42px;background:color-mix(in srgb,var(--a) 12%,transparent);border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--a);font-weight:700;flex-shrink:0}.cit h4{font-size:13px;font-weight:600;color:var(--p);margin-bottom:2px}.cit p,.cit a{font-size:13.5px;color:#666}.cf{display:flex;flex-direction:column;gap:14px}.cf input,.cf textarea{width:100%;padding:13px 16px;border:1.5px solid #ddd;border-radius:7px;font-family:var(--bf);font-size:13.5px;background:#fff;outline:none}.cf input:focus,.cf textarea:focus{border-color:var(--a)}.cf textarea{min-height:110px;resize:vertical}.cf button{background:var(--p);color:#fff;padding:13px 28px;border:none;border-radius:7px;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--bf)}.cf button:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.12)}.sl{color:var(--a);font-size:13.5px;font-weight:500;margin-right:16px}.sl:hover{text-decoration:underline}
.footer{background:var(--p);color:rgba(255,255,255,.55);padding:44px 5% 26px}.fii{max-width:1100px;margin:0 auto}.ftt{display:flex;justify-content:space-between;flex-wrap:wrap;gap:28px;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:20px}.fl{font-family:var(--hf);font-size:20px;font-weight:700;color:#fff;margin-bottom:6px}.fls{display:flex;gap:22px;flex-wrap:wrap}.fls a{font-size:13px;opacity:.55;transition:.3s}.fls a:hover{opacity:1;color:var(--a)}.fb{text-align:center;font-size:11.5px;opacity:.35}
@media(max-width:768px){.nk,.nc{display:none}.hb{display:block}.ag,.cg{grid-template-columns:1fr}.aimg,.aph{height:260px}.stb{flex-direction:column}.stb .st{border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}.hero h1{font-size:28px}.sec{padding:60px 5%}}
@keyframes fu{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.hi>*{animation:fu .7s ease-out both}.hbd{animation-delay:.1s}.hero h1{animation-delay:.2s}.hero>div>p{animation-delay:.35s}.bh{animation-delay:.5s}
</style></head><body>

<nav class="nav"><div class="ni"><a href="#">${logo}</a><ul class="nk">${nav.map(n=>'<li><a href="#'+sl(n)+'">'+n+'</a></li>').join('')}</ul><a href="${f.ctaUrl||'#contact'}" class="nc">${f.ctaText}</a><button class="hb" onclick="document.getElementById('mob').classList.toggle('open')"><span></span><span></span><span></span></button></div></nav>
<div id="mob" class="mm">${nav.map(n=>'<a href="#'+sl(n)+'" onclick="document.getElementById(\'mob\').classList.remove(\'open\')">'+n+'</a>').join('')}</div>

<header class="hero" id="accueil"><div class="hi"><div class="hbd">${sec}</div><h1>${(f.tagline||f.businessName).replace(/\*([^*]+)\*/g,'<em>$1</em>')}</h1><p>${f.description||''}</p><a href="${f.ctaUrl||'#contact'}" class="bh">${f.ctaText}</a></div></header>

${stats.length?'<div class="stb">'+stats.map(s=>'<div class="st"><div class="stn">'+s.n+'</div><div class="stl">'+s.l+'</div></div>').join('')+'</div>':''}

${svcs.length?'<section class="sec" id="services"><div class="si"><div class="sla">Nos services</div><div class="stt">Comment puis-je vous accompagner ?</div><div class="ssu">Des solutions sur-mesure adaptées à vos besoins.</div><div class="sg">'+svcs.map((s,i)=>'<div class="sc">'+(f.imgSvc[i]?'<img class="sci" src="'+f.imgSvc[i]+'" alt="'+s+'">':'<div class="sic">'+ic[i%4]+'</div>')+'<h3>'+s+'</h3><p>'+(f.serviceDescs[i]||'Un accompagnement personnalisé.')+'</p></div>').join('')+'</div></div></section>':''}

${f.ownerName?'<section class="sec" id="apropos" style="background:#fff"><div class="si"><div class="ag">'+(f.imgOwner?'<img class="aimg" src="'+f.imgOwner+'" alt="'+f.ownerName+'">':'<div class="aph"><div class="ain">'+f.ownerName.split(' ').map(n=>n[0]).join('').toUpperCase()+'</div></div>')+'<div class="ac"><div class="sla">À propos</div><h3>'+f.ownerName+'</h3><span class="ft">'+(f.ownerTitle||sec)+'</span><p>'+(f.ownerBio||'')+'</p>'+(f.ownerBio?'<div class="aq">"Mon engagement : un accompagnement humain et sur-mesure pour chacun de mes clients."</div>':'')+'</div></div></div></section>':''}

${testos.length?'<section class="sec tb" id="temoignages"><div class="si"><div class="sla" style="color:var(--a)">Témoignages</div><div class="stt" style="color:#fff">Ce que disent nos clients</div><div class="ssu" style="color:rgba(255,255,255,.55)">La satisfaction de nos clients est notre meilleure carte de visite.</div><div class="tg">'+testos.map(t=>'<div class="tc"><div class="ts">★★★★★</div><p>"'+t.text+'"</p><div class="ta">— '+t.name+'</div></div>').join('')+'</div></div></section>':''}

${arts.length?'<section class="sec" id="actualites"><div class="si"><div class="sla">Actualités</div><div class="stt">Nos derniers articles</div><div class="ssu">Retrouvez nos conseils et notre expertise.</div><div class="arg">'+arts.map((a,i)=>'<div class="arc">'+(a.img?'<img class="arth" src="'+a.img+'" alt="'+a.title+'">':'<div class="arth"></div>')+'<div class="arb"><div class="ard">'+fmtD(a.date)+'</div><h3>'+a.title+'</h3><p class="arex">'+a.excerpt+'</p><a href="javascript:void(0)" class="arm" onclick="document.getElementById(\'af'+i+'\').classList.add(\'active\')">Lire la suite →</a></div></div>').join('')+'</div></div></section>\n'+arts.map((a,i)=>'<div id="af'+i+'" class="af"><div class="afi"><button class="afb" onclick="this.closest(\'.af\').classList.remove(\'active\')">← Retour</button><h1>'+a.title+'</h1><div class="afm">'+fmtD(a.date)+'</div>'+(a.img?'<img class="afhi" src="'+a.img+'" alt="'+a.title+'">':'')+'<div class="afct">'+(a.content||a.excerpt).split(/\n\n|\n/).filter(p=>p.trim()).map(p=>'<p>'+p+'</p>').join('')+'</div></div></div>').join('\n'):''}

<section class="sec" id="contact"><div class="si"><div class="sla">Contact</div><div class="stt">Parlons de votre projet</div><div class="ssu">N'hésitez pas à nous contacter.</div><div class="cg"><div class="ci">${f.phone?'<div class="cit"><div class="cic">☎</div><div><h4>Téléphone</h4><a href="tel:'+f.phone+'">'+f.phone+'</a></div></div>':''}${f.email?'<div class="cit"><div class="cic">✉</div><div><h4>Email</h4><a href="mailto:'+f.email+'">'+f.email+'</a></div></div>':''}${f.address?'<div class="cit"><div class="cic">📍</div><div><h4>Adresse</h4><p>'+f.address+'</p></div></div>':''}${f.hours?'<div class="cit"><div class="cic">🕐</div><div><h4>Horaires</h4><p>'+f.hours+'</p></div></div>':''}${soc.length?'<div style="margin-top:8px">'+soc.join('')+'</div>':''}</div><div class="cf"><input type="text" placeholder="Votre nom"><input type="email" placeholder="Votre email"><input type="text" placeholder="Objet"><textarea placeholder="Votre message..."></textarea><button type="button">Envoyer le message</button></div></div></div></section>

<footer class="footer"><div class="fii"><div class="ftt"><div><div class="fl">${f.businessName}</div><div style="font-size:13px;opacity:.5">${f.tagline||sec}</div></div><div class="fls">${nav.map(n=>'<a href="#'+sl(n)+'">'+n+'</a>').join('')}</div></div><div class="fb">© ${new Date().getFullYear()} ${f.businessName}. Tous droits réservés. | <a href="#" style="color:var(--a)">Mentions légales</a> | <a href="#" style="color:var(--a)">Politique de confidentialité</a></div></div></footer>
</body></html>`;
}

/* ── MAIN ── */
export default function App(){
  const [f,setF]=useState(emptyForm);
  const [step,setStep]=useState(0);
  const [prev,setPrev]=useState(false);
  const [aiL,setAiL]=useState(false);
  const [artL,setArtL]=useState(false);
  const [aiOk,setAiOk]=useState(false);
  const [artOk,setArtOk]=useState(false);
  const [toast,setToast]=useState("");

  const u=useCallback((k,v)=>setF(p=>({...p,[k]:v})),[]);
  const uA=useCallback((k,i,v)=>setF(p=>{const a=[...p[k]];a[i]=v;return{...p,[k]:a}}),[]);
  const uT=useCallback((i,k,v)=>setF(p=>{const a=[...p.testimonials];a[i]={...a[i],[k]:v};return{...p,testimonials:a}}),[]);
  const uS=useCallback((i,k,v)=>setF(p=>{const a=[...p.stats];a[i]={...a[i],[k]:v};return{...p,stats:a}}),[]);
  const uR=useCallback((i,k,v)=>setF(p=>{const a=[...p.articles];a[i]={...a[i],[k]:v};return{...p,articles:a}}),[]);
  const uSI=useCallback((i,v)=>setF(p=>{const a=[...p.imgSvc];a[i]=v;return{...p,imgSvc:a}}),[]);
  const msg=m=>{setToast(m);setTimeout(()=>setToast(""),3000)};

  const doAI=async()=>{
    setAiL(true);
    const r=await aiEnhance(f);
    if(r){setF(p=>({...p,tagline:r.tagline||p.tagline,description:r.description||p.description,ownerBio:r.ownerBio||p.ownerBio,serviceDescs:r.serviceDescs?.length?r.serviceDescs:p.serviceDescs,stats:r.stats?.length?r.stats.map(s=>({n:s.number||s.n,l:s.label||s.l})):p.stats}));setAiOk(true);msg("✅ Textes enrichis !")}
    else msg("❌ Erreur — réessayez");
    setAiL(false);
  };

  const doArt=async()=>{
    setArtL(true);
    const r=await aiArticles(f);
    if(r?.articles){setF(p=>({...p,articles:r.articles.map((a,i)=>({...p.articles[i],title:a.title,date:a.date,excerpt:a.excerpt,content:a.content}))}));setArtOk(true);msg("✅ 6 articles générés !")}
    else msg("❌ Erreur — réessayez");
    setArtL(false);
  };

  const dl=()=>{const h=genHTML(f);const b=new Blob([h],{type:"text/html"});const u=URL.createObjectURL(b);const a=document.createElement("a");a.href=u;a.download=`${f.businessName.toLowerCase().replace(/[^a-z0-9]/g,"-")||"site"}.html`;a.click();URL.revokeObjectURL(u)};

  const ST=["Identité","Images","Services","À propos","Avis","Contact","Actu","Design"];
  const T=toast?<div style={{position:"fixed",bottom:20,left:"50%",transform:"translateX(-50%)",background:"#1a2744",color:"#fff",padding:"10px 24px",borderRadius:8,fontSize:13,fontWeight:600,zIndex:999,boxShadow:"0 4px 20px rgba(0,0,0,.2)"}}>{toast}</div>:null;

  const btnS={padding:"7px 16px",borderRadius:5,cursor:"pointer",fontSize:12,border:"none",fontFamily:"inherit"};

  if(prev) return <div style={{height:"100vh",display:"flex",flexDirection:"column",fontFamily:"'DM Sans',sans-serif"}}>
    <div style={{padding:"10px 16px",background:"#1a2744",color:"#fff",display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:8}}>
      <span style={{fontSize:14,fontWeight:600}}>🌐 {f.businessName}</span>
      <div style={{display:"flex",gap:6,flexWrap:"wrap"}}>
        <button onClick={()=>setPrev(false)} style={{...btnS,background:"rgba(255,255,255,.1)",color:"#fff",border:"1px solid rgba(255,255,255,.2)"}}>← Modifier</button>
        <button onClick={()=>{navigator.clipboard.writeText(genHTML(f));msg("📋 Copié !")}} style={{...btnS,background:"rgba(255,255,255,.15)",color:"#fff",border:"1px solid rgba(255,255,255,.2)"}}>📋 Copier</button>
        <button onClick={dl} style={{...btnS,background:"#c9a84c",color:"#1a2744",fontWeight:700}}>⬇ Télécharger</button>
      </div>
    </div>
    <iframe srcDoc={genHTML(f)} style={{flex:1,border:"none",width:"100%"}} title="Preview" />
    {T}
  </div>;

  const ok=f.businessName.trim();
  const box={marginBottom:14,padding:16,background:"#fff",borderRadius:10,border:"1px solid #eee"};
  const lbl={fontSize:11,fontWeight:600,color:"#bbb",marginBottom:8,textTransform:"uppercase",letterSpacing:1};
  const aiBtn=(loading,done,onClick,text,doneText)=><button onClick={onClick} disabled={loading||!f.businessName} style={{padding:"11px 24px",borderRadius:7,border:"none",background:loading?"#ccc":"linear-gradient(135deg,#667eea,#764ba2)",color:"#fff",fontSize:13,fontWeight:600,cursor:loading?"wait":"pointer",fontFamily:"inherit",display:"flex",alignItems:"center",gap:8}}>{loading?"⏳ Chargement...":done?doneText:text}</button>;

  return <div style={{minHeight:"100vh",background:"linear-gradient(135deg,#f7f8fc,#edf0f7)",fontFamily:"'DM Sans',sans-serif"}}>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Playfair+Display:wght@400;600;700;800&family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&family=Sora:wght@300;400;600;700;800&family=Work+Sans:wght@300;400;500;600&family=Libre+Baskerville:wght@400;700&family=Karla:wght@300;400;500;600;700&family=Source+Sans+3:wght@300;400;600;700&display=swap" rel="stylesheet" />
    <div style={{padding:"20px 5%",background:"#1a2744",color:"#fff",textAlign:"center"}}>
      <div style={{fontSize:22,fontWeight:800,fontFamily:"'Playfair Display',serif",marginBottom:2}}>✦ Générateur de Site Vitrine Pro</div>
      <div style={{fontSize:12,opacity:.5}}>Formulaire → IA Groq → Site complet avec Actualités Artur'in</div>
    </div>
    <div style={{maxWidth:880,margin:"0 auto",padding:"24px 16px 80px"}}>
      <Steps cur={step} labels={ST} />

      {step===0&&<div>
        <h2 style={{fontSize:19,fontWeight:700,color:"#1a2744",marginBottom:2}}>Identité</h2>
        <p style={{fontSize:12,color:"#999",marginBottom:18}}>Les bases de votre activité.</p>
        <Fld label="Nom de l'entreprise" value={f.businessName} onChange={v=>u("businessName",v)} ph="ex: Cabinet Dupont" req />
        <div style={{height:14}}/>
        <div style={{fontSize:12,fontWeight:600,color:"#1a2744",marginBottom:8}}>Secteur *</div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(155px,1fr))",gap:6,marginBottom:16}}>
          {SECTORS.map(s=><button key={s.id} onClick={()=>u("sector",s.id)} style={{padding:"9px 8px",border:f.sector===s.id?"2px solid #1a2744":"2px solid #e8e8e8",borderRadius:8,background:f.sector===s.id?"#f0f2f8":"#fff",cursor:"pointer",display:"flex",alignItems:"center",gap:6,fontSize:12,fontWeight:f.sector===s.id?700:400,color:"#1a2744"}}><span style={{fontSize:16}}>{s.icon}</span>{s.label}</button>)}
        </div>
        {f.sector==="autre"&&<><Fld label="Précisez" value={f.sectorCustom} onChange={v=>u("sectorCustom",v)} ph="ex: Consultant RSE" /><div style={{height:10}}/></>}
        <Fld label="Accroche / Tagline" sub="Mot entre *astérisques* = emphase" value={f.tagline} onChange={v=>u("tagline",v)} ph="ex: Défendre vos droits, *protéger votre avenir*" />
        <div style={{height:10}}/>
        <Fld label="Description courte" value={f.description} onChange={v=>u("description",v)} ph="Expertise juridique rigoureuse et humaine..." ta />
      </div>}

      {step===1&&<div>
        <h2 style={{fontSize:19,fontWeight:700,color:"#1a2744",marginBottom:2}}>Images</h2>
        <p style={{fontSize:12,color:"#999",marginBottom:18}}>Toutes optionnelles. Les images seront intégrées en base64 dans le HTML.</p>
        <div style={{display:"flex",flexWrap:"wrap",gap:20,marginBottom:24}}>
          <ImgUp label="Logo" value={f.imgLogo} onChange={v=>u("imgLogo",v)} w={180} h={80} />
          <ImgUp label="Bannière Hero" value={f.imgHero} onChange={v=>u("imgHero",v)} w={280} h={150} />
          <ImgUp label="Photo dirigeant" value={f.imgOwner} onChange={v=>u("imgOwner",v)} w={170} h={200} />
        </div>
        <div style={{fontSize:14,fontWeight:600,color:"#1a2744",marginBottom:10}}>Images services</div>
        <div style={{display:"flex",flexWrap:"wrap",gap:14}}>
          {[0,1,2,3].map(i=><ImgUp key={i} label={`Service ${i+1}`} value={f.imgSvc[i]} onChange={v=>uSI(i,v)} w={150} h={100} />)}
        </div>
      </div>}

      {step===2&&<div>
        <h2 style={{fontSize:19,fontWeight:700,color:"#1a2744",marginBottom:2}}>Services</h2>
        <p style={{fontSize:12,color:"#999",marginBottom:18}}>Jusqu'à 4 services.</p>
        {[0,1,2,3].map(i=><div key={i} style={box}>
          <div style={lbl}>Service {i+1}</div>
          <div style={{display:"flex",flexWrap:"wrap",gap:10}}>
            <Fld label="Nom" value={f.services[i]} onChange={v=>uA("services",i,v)} ph="ex: Droit de la famille" half />
            <Fld label="Description" value={f.serviceDescs[i]} onChange={v=>uA("serviceDescs",i,v)} ph="Accompagnement personnalisé..." half />
          </div>
        </div>)}
        <div style={{fontSize:14,fontWeight:600,color:"#1a2744",marginTop:16,marginBottom:10}}>Chiffres clés</div>
        <div style={{display:"flex",flexWrap:"wrap",gap:10}}>
          {[0,1,2].map(i=><div key={i} style={{flex:"1 1 150px",padding:12,background:"#fff",borderRadius:8,border:"1px solid #eee"}}>
            <Fld label="Chiffre" value={f.stats[i].n} onChange={v=>uS(i,"n",v)} ph="25+" />
            <div style={{height:6}}/>
            <Fld label="Label" value={f.stats[i].l} onChange={v=>uS(i,"l",v)} ph="années" />
          </div>)}
        </div>
      </div>}

      {step===3&&<div>
        <h2 style={{fontSize:19,fontWeight:700,color:"#1a2744",marginBottom:2}}>À propos</h2>
        <p style={{fontSize:12,color:"#999",marginBottom:18}}>Le dirigeant / fondateur.</p>
        <div style={{display:"flex",flexWrap:"wrap",gap:14}}>
          <Fld label="Nom complet" value={f.ownerName} onChange={v=>u("ownerName",v)} ph="Maître Cathy Pereira" half />
          <Fld label="Titre" value={f.ownerTitle} onChange={v=>u("ownerTitle",v)} ph="Avocate au Barreau" half />
          <Fld label="Biographie" value={f.ownerBio} onChange={v=>u("ownerBio",v)} ph="Parcours, valeurs..." ta />
        </div>
      </div>}

      {step===4&&<div>
        <h2 style={{fontSize:19,fontWeight:700,color:"#1a2744",marginBottom:2}}>Témoignages</h2>
        <p style={{fontSize:12,color:"#999",marginBottom:18}}>Jusqu'à 3 avis.</p>
        {[0,1,2].map(i=><div key={i} style={box}>
          <div style={{display:"flex",flexWrap:"wrap",gap:10}}>
            <Fld label="Nom" value={f.testimonials[i].name} onChange={v=>uT(i,"name",v)} ph="Sophie Martin" half />
            <Fld label="Avis" value={f.testimonials[i].text} onChange={v=>uT(i,"text",v)} ph="Accompagnement remarquable..." half />
          </div>
        </div>)}
      </div>}

      {step===5&&<div>
        <h2 style={{fontSize:19,fontWeight:700,color:"#1a2744",marginBottom:2}}>Contact</h2>
        <p style={{fontSize:12,color:"#999",marginBottom:18}}>Coordonnées de l'entreprise.</p>
        <div style={{display:"flex",flexWrap:"wrap",gap:14}}>
          <Fld label="Téléphone" value={f.phone} onChange={v=>u("phone",v)} ph="+33 6 12 34 56 78" half />
          <Fld label="Email" value={f.email} onChange={v=>u("email",v)} ph="contact@monsite.fr" half />
          <Fld label="Adresse" value={f.address} onChange={v=>u("address",v)} ph="12 rue de la Paix, 75001 Paris" />
          <Fld label="Horaires" value={f.hours} onChange={v=>u("hours",v)} ph="Lun-Ven : 9h-18h" half />
          <Fld label="Texte bouton CTA" value={f.ctaText} onChange={v=>u("ctaText",v)} ph="Prendre rendez-vous" half />
        </div>
        <div style={{fontSize:14,fontWeight:600,color:"#1a2744",marginTop:18,marginBottom:10}}>Réseaux sociaux</div>
        <div style={{display:"flex",flexWrap:"wrap",gap:10}}>
          <Fld label="Facebook" value={f.socialFb} onChange={v=>u("socialFb",v)} ph="https://facebook.com/..." half />
          <Fld label="Instagram" value={f.socialIg} onChange={v=>u("socialIg",v)} ph="https://instagram.com/..." half />
          <Fld label="LinkedIn" value={f.socialLi} onChange={v=>u("socialLi",v)} ph="https://linkedin.com/..." half />
          <Fld label="Google Business" value={f.socialG} onChange={v=>u("socialG",v)} ph="https://google.com/maps/..." half />
        </div>
      </div>}

      {step===6&&<div>
        <h2 style={{fontSize:19,fontWeight:700,color:"#1a2744",marginBottom:2}}>Page Actualités</h2>
        <p style={{fontSize:12,color:"#999",marginBottom:14}}>Articles style Artur'in. Manuels ou générés par IA.</p>
        <div style={{marginBottom:18}}>{aiBtn(artL,artOk,doArt,"✨ Générer 6 articles avec l'IA","✅ Générés — Regénérer")}</div>
        {f.articles.map((a,i)=><div key={i} style={box}>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:6}}>
            <span style={lbl}>Article {i+1}</span>
            <ImgUp label="" value={a.img} onChange={v=>uR(i,"img",v)} w={70} h={45} />
          </div>
          <div style={{display:"flex",flexWrap:"wrap",gap:10,marginBottom:6}}>
            <Fld label="Titre" value={a.title} onChange={v=>uR(i,"title",v)} ph="Titre article" half />
            <Fld label="Date" value={a.date} onChange={v=>uR(i,"date",v)} ph="2025-03-15" half />
          </div>
          <Fld label="Résumé" value={a.excerpt} onChange={v=>uR(i,"excerpt",v)} ph="Résumé court..." />
          <div style={{height:6}}/>
          <Fld label="Contenu complet" value={a.content} onChange={v=>uR(i,"content",v)} ph="Contenu complet... Lignes vides = paragraphes" ta />
        </div>)}
      </div>}

      {step===7&&<div>
        <h2 style={{fontSize:19,fontWeight:700,color:"#1a2744",marginBottom:2}}>Design</h2>
        <p style={{fontSize:12,color:"#999",marginBottom:18}}>Couleurs et typographie.</p>
        <div style={{fontSize:13,fontWeight:600,color:"#1a2744",marginBottom:8}}>Palette</div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(145px,1fr))",gap:6,marginBottom:22}}>
          {PALETTES.map(p=><button key={p.id} onClick={()=>u("palette",p.id)} style={{padding:10,border:f.palette===p.id?"2px solid #1a2744":"2px solid #e8e8e8",borderRadius:8,background:"#fff",cursor:"pointer"}}>
            <div style={{display:"flex",gap:3,marginBottom:4}}><div style={{width:22,height:22,borderRadius:5,background:p.primary}}/><div style={{width:22,height:22,borderRadius:5,background:p.accent}}/><div style={{width:22,height:22,borderRadius:5,background:p.bg,border:"1px solid #ddd"}}/></div>
            <span style={{fontSize:11,fontWeight:f.palette===p.id?700:400,color:"#333"}}>{p.label}</span>
          </button>)}
        </div>
        <div style={{fontSize:13,fontWeight:600,color:"#1a2744",marginBottom:8}}>Typographie</div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(165px,1fr))",gap:6,marginBottom:24}}>
          {FONTS.map(x=><button key={x.id} onClick={()=>u("fonts",x.id)} style={{padding:12,border:f.fonts===x.id?"2px solid #1a2744":"2px solid #e8e8e8",borderRadius:8,background:"#fff",cursor:"pointer",textAlign:"left"}}>
            <div style={{fontFamily:x.heading,fontSize:18,fontWeight:700,color:"#1a2744",marginBottom:2}}>Aa</div>
            <div style={{fontSize:11,color:"#666"}}>{x.label}</div>
          </button>)}
        </div>
        <div style={{padding:18,background:"#fff",borderRadius:12,border:"2px solid #e8e8e8"}}>
          <h3 style={{fontSize:15,fontWeight:700,color:"#1a2744",marginBottom:4}}>🤖 Enrichissement IA (Groq)</h3>
          <p style={{fontSize:12,color:"#888",marginBottom:12}}>Génère tagline, description, bio, textes services et chiffres clés.</p>
          {aiBtn(aiL,aiOk,doAI,"✨ Enrichir les textes","✅ Enrichi — Relancer")}
        </div>
      </div>}

      {/* NAV */}
      <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginTop:28,flexWrap:"wrap",gap:10}}>
        <button onClick={()=>setStep(s=>Math.max(0,s-1))} disabled={step===0} style={{padding:"10px 24px",borderRadius:7,border:"1.5px solid #ddd",background:"#fff",color:"#666",fontSize:13,fontWeight:500,cursor:step===0?"not-allowed":"pointer",opacity:step===0?.4:1,fontFamily:"inherit"}}>← Précédent</button>
        <div style={{display:"flex",gap:8}}>
          {step<ST.length-1
            ?<button onClick={()=>setStep(s=>s+1)} style={{padding:"10px 24px",borderRadius:7,border:"none",background:"#1a2744",color:"#fff",fontSize:13,fontWeight:600,cursor:"pointer",fontFamily:"inherit"}}>Suivant →</button>
            :<button onClick={()=>setPrev(true)} disabled={!ok} style={{padding:"12px 32px",borderRadius:7,border:"none",background:ok?"linear-gradient(135deg,#c9a84c,#e8c564)":"#ccc",color:"#1a2744",fontSize:14,fontWeight:700,cursor:ok?"pointer":"not-allowed",fontFamily:"inherit",boxShadow:ok?"0 4px 18px rgba(201,168,76,.25)":"none"}}>🚀 Générer mon site</button>
          }
        </div>
      </div>
    </div>
    {T}
  </div>;
}