import React, { useState, useMemo } from "react"; import { Check, AlertTriangle, X, Copy, Plus, Trash2, ExternalLink, ArrowRight } from "lucide-react"; /* ------------------------------------------------------------------ * * Générateur de Schema JSON-LD — Refmax * Types : FAQPage · LocalBusiness · LegalService * Outil gratuit, 100% client-side, zéro donnée collectée. * Charte β-1 : navy #142e4f (data/territoire), orange #ff4e44 (action), * vert #009d78 (valide), Onest (titres) + JetBrains Mono (code). * ------------------------------------------------------------------ */ const C = { white: "#ffffff", dark: "#1d1b2d", body: "#665f78", green: "#009d78", greenLight: "#e4fff9", cream: "#fff9e3", orange: "#ff4e44", blue: "#142e4f", blueLight: "#dce5f0", line: "#e8e8f0", ink: "#0e2236", }; const TYPES = [ { id: "FAQPage", label: "FAQ", hint: "Questions / réponses" }, { id: "LocalBusiness", label: "Établissement", hint: "Commerce, agence, local" }, { id: "LegalService", label: "Cabinet d’avocats", hint: "Sous-type juridique" }, ]; const DAYS = [ ["Lu", "Monday"], ["Ma", "Tuesday"], ["Me", "Wednesday"], ["Je", "Thursday"], ["Ve", "Friday"], ["Sa", "Saturday"], ["Di", "Sunday"], ]; /* retire récursivement les valeurs vides */ function prune(v) { if (Array.isArray(v)) { const a = v.map(prune).filter((x) => x !== undefined); return a.length ? a : undefined; } if (v && typeof v === "object") { const o = {}; for (const k of Object.keys(v)) { const pv = prune(v[k]); if (pv !== undefined) o[k] = pv; } return Object.keys(o).length ? o : undefined; } if (typeof v === "string") return v.trim() === "" ? undefined : v.trim(); return v; } function Field({ label, value, set, placeholder, hint, area, type = "text" }) { return ( {label}{hint && {hint}} {area ? (

set(e.target.value)} />
      ) : (
        <input type={type} value={value} placeholder={placeholder} onChange={(e) => set(e.target.value)} />
      )}
    </label>
  );
}

export default function SchemaGenerator() {
  const [type, setType] = useState("LocalBusiness");
  const [copied, setCopied] = useState(null);

const [faqs, setFaqs] = useState([
    { q: "Le SEO est-il vraiment moins cher que Google Ads ?", a: "Sur la durée, oui : une fois l’actif en place, son coût par visite tend vers zéro, là où la publicité reste une dépense récurrente." },
    { q: "Combien de temps avant que le SEO rapporte ?", a: "Comptez 6 à 12 mois pour atteindre une visibilité mature sur la plupart des marchés." },
  ]);

const [biz, setBiz] = useState({
    name: "Refmax",
    description: "Agence de référencement nouvelle génération (SEO, GEO, Webflow) basée à Paris.",
    url: "https://www.refmax.fr",
    telephone: "+33 6 63 08 24 17",
    email: "social@refmax.fr",
    image: "https://www.refmax.fr/logo.png",
    priceRange: "€€",
    street: "38 rue des Mathurins",
    locality: "Paris",
    region: "Île-de-France",
    postalCode: "75008",
    country: "FR",
    lat: "", lng: "",
    areaServed: "Paris et Île-de-France",
  });
  const setB = (k) => (v) => setBiz((b) => ({ ...b, [k]: v }));

const [sameAs, setSameAs] = useState(["https://www.linkedin.com/company/refmax"]);
  const [hours, setHours] = useState([
    { days: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"], opens: "08:00", closes: "22:00" },
  ]);

const isBiz = type === "LocalBusiness" || type === "LegalService";

/* ---------- construction du schema ---------- */
  const schema = useMemo(() => {
    if (type === "FAQPage") {
      return prune({
        "@context": "https://schema.org",
        "@type": "FAQPage",
        mainEntity: faqs.map((f) => ({
          "@type": "Question",
          name: f.q,
          acceptedAnswer: { "@type": "Answer", text: f.a },
        })),
      }) || { "@context": "https://schema.org", "@type": "FAQPage", mainEntity: [] };
    }
    const lat = parseFloat(biz.lat), lng = parseFloat(biz.lng);
    return prune({
      "@context": "https://schema.org",
      "@type": type,
      name: biz.name,
      description: biz.description,
      url: biz.url,
      telephone: biz.telephone,
      email: biz.email,
      image: biz.image,
      priceRange: biz.priceRange,
      address: {
        "@type": "PostalAddress",
        streetAddress: biz.street,
        addressLocality: biz.locality,
        postalCode: biz.postalCode,
        addressRegion: biz.region,
        addressCountry: biz.country,
      },
      geo: (!isNaN(lat) && !isNaN(lng)) ? { "@type": "GeoCoordinates", latitude: lat, longitude: lng } : undefined,
      areaServed: type === "LegalService" ? biz.areaServed : undefined,
      openingHoursSpecification: hours
        .filter((h) => h.days.length && h.opens && h.closes)
        .map((h) => ({ "@type": "OpeningHoursSpecification", dayOfWeek: h.days, opens: h.opens, closes: h.closes })),
      sameAs: sameAs,
    }) || {};
  }, [type, faqs, biz, hours, sameAs]);

const json = useMemo(() => JSON.stringify(schema, null, 2), [schema]);
  const scriptTag = `<script type="application/ld+json">\n${json}\n</script>`;

/* ---------- contrôle de cohérence ---------- */
  const checks = useMemo(() => {
    const out = [];
    const ok = (l) => out.push({ s: "ok", l });
    const warn = (l) => out.push({ s: "warn", l });
    const err = (l) => out.push({ s: "err", l });
    if (type === "FAQPage") {
      const valid = faqs.filter((f) => f.q.trim() && f.a.trim());
      valid.length ? ok(`${valid.length} question(s) valide(s)`) : err("Au moins une paire question / réponse requise");
      const partial = faqs.filter((f) => (f.q.trim() && !f.a.trim()) || (!f.q.trim() && f.a.trim()));
      if (partial.length) warn(`${partial.length} paire(s) incomplète(s) — ignorée(s)`);
    } else {
      biz.name.trim() ? ok("Nom (name)") : err("Nom (name) requis");
      const a = schema.address || {};
      a.streetAddress ? ok("Adresse (streetAddress)") : err("Adresse postale requise");
      a.addressLocality ? ok("Ville (addressLocality)") : err("Ville requise");
      a.postalCode ? ok("Code postal") : err("Code postal requis");
      a.addressCountry ? ok("Pays (addressCountry)") : err("Pays requis (ex. FR)");
      biz.telephone.trim() ? ok("Téléphone") : warn("Téléphone recommandé");
      biz.image.trim() ? ok("Image / logo") : warn("Image recommandée par Google");
      biz.url.trim() ? ok("URL") : warn("URL recommandée");
      if (type === "LegalService") (biz.areaServed.trim() ? ok("Zone desservie (areaServed)") : warn("Zone desservie recommandée"));
      if (schema.openingHoursSpecification) ok("Horaires d’ouverture");
      if (schema.geo) ok("Coordonnées GPS");
    }
    return out;
  }, [type, faqs, biz, schema]);

const hasError = checks.some((c) => c.s === "err");

/* coloration légère du JSON (affichage seul — la copie utilise le brut) */
  const html = useMemo(() => {
    const esc = json.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
    return esc.replace(/("(?:\\.|[^"\\])*")(\s*:)?/g,
      (m, str, colon) => colon ? `<span class="k">${str}</span>${colon}` : `<span class="s">${str}</span>`);
  }, [json]);

const updateHours = (i, patch) => setHours((h) => h.map((r, j) => j === i ? { ...r, ...patch } : r));
  const toggleDay = (i, day) => setHours((h) => h.map((r, j) => j === i
    ? { ...r, days: r.days.includes(day) ? r.days.filter((d) => d !== day) : [...r.days, day] } : r));

return (
    <div className="sch">
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
        @import url('https://api.fontshare.com/v2/css?f[]=satoshi@500,700&display=swap');
        .sch{--blue:${C.blue};--orange:${C.orange};--green:${C.green};
          font-family:'Satoshi','Onest',ui-sans-serif,system-ui,sans-serif;color:${C.body};
          background:${C.white};background-image:radial-gradient(${C.blueLight}55 1px,transparent 1px);
          background-size:26px 26px;padding:clamp(18px,4vw,38px);border-radius:24px;
          max-width:1120px;margin:0 auto;box-sizing:border-box;}
        .sch *{box-sizing:border-box;}
        .sch h1,.sch h2,.sch h3,.sch .sch-flabel{font-family:'Onest',sans-serif;}

.sch-kicker{font-family:'Onest';font-weight:600;font-size:12px;letter-spacing:.14em;
          text-transform:uppercase;color:${C.blue};display:flex;align-items:center;gap:9px;}
        .sch-kicker::before{content:"";width:26px;height:2px;background:${C.orange};display:inline-block;}
        .sch h1{color:${C.dark};font-weight:800;font-size:clamp(23px,3.6vw,32px);line-height:1.12;
          margin:13px 0 8px;letter-spacing:-.025em;}
        .sch-lede{font-size:clamp(14px,2vw,16px);max-width:620px;line-height:1.5;}
        .sch-lede b{color:${C.dark};}

.sch-types{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 4px;}
        .sch-type{flex:1;min-width:150px;text-align:left;background:${C.white};border:1.5px solid ${C.line};
          border-radius:14px;padding:13px 15px;cursor:pointer;transition:all .15s ease;}
        .sch-type:hover{border-color:${C.blueLight};}
        .sch-type.on{border-color:${C.blue};background:${C.blueLight}40;box-shadow:0 2px 10px #142e4f12;}
        .sch-type b{display:block;font-family:'Onest';font-weight:600;color:${C.dark};font-size:15px;}
        .sch-type span{font-size:12px;color:${C.body};}
        .sch-type code{font-family:'JetBrains Mono';font-size:11px;color:${C.blue};font-weight:500;}

.sch-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:18px;align-items:start;}
        @media(max-width:900px){.sch-grid{grid-template-columns:1fr;}}
        .sch-card{background:${C.white};border:1px solid ${C.line};border-radius:18px;padding:20px;}
        .sch-ptitle{font-family:'Onest';font-weight:600;color:${C.dark};font-size:13px;letter-spacing:.04em;
          text-transform:uppercase;margin:0 0 4px;display:flex;align-items:center;justify-content:space-between;}

.sch-field{display:block;margin-top:14px;}
        .sch-flabel{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;
          color:${C.dark};font-size:13px;margin-bottom:5px;}
        .sch-flabel em{font-style:normal;font-weight:500;color:${C.body};font-size:11px;}
        .sch input,.sch textarea{width:100%;border:1px solid ${C.line};border-radius:9px;padding:9px 11px;
          font-family:'Satoshi',sans-serif;font-size:14px;color:${C.dark};background:#fcfcfe;outline:none;
          transition:border-color .15s ease;resize:vertical;}
        .sch input:focus,.sch textarea:focus{border-color:${C.blue};}
        .sch-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
        .sch-three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}

.sch-faq{border:1px solid ${C.line};border-radius:12px;padding:13px;margin-top:12px;position:relative;
          background:#fcfcfe;}
        .sch-rm{position:absolute;top:10px;right:10px;border:none;background:transparent;color:${C.body};
          cursor:pointer;padding:3px;border-radius:6px;display:inline-flex;}
        .sch-rm:hover{color:${C.orange};background:#ff4e4410;}
        .sch-add{margin-top:13px;border:1.5px dashed ${C.line};background:transparent;color:${C.blue};
          font-family:'Onest';font-weight:600;font-size:13px;padding:9px;border-radius:10px;width:100%;
          cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:all .15s;}
        .sch-add:hover{border-color:${C.blue};background:${C.blueLight}30;}

.sch-days{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px;}
        .sch-day{width:34px;height:32px;border:1px solid ${C.line};border-radius:8px;background:#fff;cursor:pointer;
          font-family:'Onest';font-weight:600;font-size:12px;color:${C.body};transition:all .12s;}
        .sch-day.on{background:${C.blue};color:#fff;border-color:${C.blue};}
        .sch-hrow{border:1px solid ${C.line};border-radius:12px;padding:12px;margin-top:12px;background:#fcfcfe;position:relative;}
        .sch-htimes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px;}

.sch-out{background:${C.ink};border-radius:18px;padding:0;overflow:hidden;border:1px solid #1e3a57;}
        .sch-outbar{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;
          background:#0a1b2e;border-bottom:1px solid #1e3a57;}
        .sch-outbar .lbl{font-family:'JetBrains Mono';font-size:12px;color:${C.blueLight};font-weight:500;}
        .sch-actions{display:flex;gap:8px;}
        .sch-btn{font-family:'Onest';font-weight:600;font-size:12.5px;border:none;border-radius:8px;cursor:pointer;
          padding:7px 12px;display:inline-flex;align-items:center;gap:6px;transition:transform .12s ease;}
        .sch-btn:hover{transform:translateY(-1px);}
        .sch-btn.prim{background:${C.orange};color:#fff;}
        .sch-btn.ghost{background:#16314b;color:${C.blueLight};}
        .sch-code{margin:0;padding:16px;font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.65;
          color:#cdd9ea;white-space:pre;overflow-x:auto;max-height:460px;tab-size:2;}
        .sch-code .k{color:#7fd6ff;} .sch-code .s{color:#86e8b9;}

.sch-checks{margin-top:16px;}
        .sch-check{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;padding:5px 0;color:${C.dark};}
        .sch-check .ico{flex:none;width:17px;height:17px;margin-top:1px;}
        .sch-check.ok .ico{color:${C.green};} .sch-check.warn .ico{color:#e09600;} .sch-check.err .ico{color:${C.orange};}
        .sch-check.warn,.sch-check.err{color:${C.body};}

.sch-tools{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;}
        .sch-tools a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
          color:${C.blue};text-decoration:none;}
        .sch-tools a:hover{text-decoration:underline;}

.sch-foot{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
          margin-top:24px;padding-top:20px;border-top:1px solid ${C.line};}
        .sch-note{font-size:12px;color:${C.body};max-width:540px;line-height:1.55;}
        a.sch-cta{background:${C.orange}!important;color:#fff!important;text-decoration:none;font-family:'Onest';
          font-weight:600;font-size:15px;padding:13px 22px;border-radius:10px;display:inline-flex;align-items:center;
          gap:9px;white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease;}
        a.sch-cta:hover,a.sch-cta:visited,a.sch-cta:active{color:#fff!important;}
        a.sch-cta:hover{transform:translateY(-1px);box-shadow:0 8px 22px #ff4e4438;}
        .ic{width:15px;height:15px;}
        .sch-reveal{animation:schUp .5s cubic-bezier(.2,.7,.3,1) both;}
        @keyframes schUp{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}
      `}</style>

<div className="sch-reveal">
        <div className="sch-kicker">Refmax · Outil gratuit</div>
        <h1>Générateur de Schema JSON-LD</h1>
        <p className="sch-lede">
          Le balisage qui rend vos pages <b>éligibles aux résultats enrichis Google</b> et plus
          facilement <b>citables par les IA</b>. Remplissez, copiez, collez dans votre <code style={{ fontFamily: "'JetBrains Mono'", fontSize: 13 }}><head></code>. Sans inscription.
        </p>
      </div>

<div className="sch-types sch-reveal" style={{ animationDelay: ".05s" }}>
        {TYPES.map((t) => (
          <button key={t.id} className={"sch-type" + (type === t.id ? " on" : "")} onClick={() => setType(t.id)}>
            <b>{t.label}</b>
            <span>{t.hint}</span><br />
            <code>{t.id}</code>
          </button>
        ))}
      </div>

<div className="sch-grid">
        {/* ---------- FORMULAIRE ---------- */}
        <div className="sch-card sch-reveal" style={{ animationDelay: ".1s" }}>
          <h3 className="sch-ptitle">Vos données</h3>

{type === "FAQPage" ? (
            <>
              {faqs.map((f, i) => (
                <div className="sch-faq" key={i}>
                  {faqs.length > 1 && (
                    <button className="sch-rm" onClick={() => setFaqs(faqs.filter((_, j) => j !== i))} aria-label="Supprimer">
                      <Trash2 className="ic" />
                    </button>
                  )}
                  <Field label={`Question ${i + 1}`} value={f.q} placeholder="Une question fréquente…"
                    set={(v) => setFaqs(faqs.map((x, j) => j === i ? { ...x, q: v } : x))} />
                  <Field label="Réponse" area value={f.a} placeholder="La réponse, en clair…"
                    set={(v) => setFaqs(faqs.map((x, j) => j === i ? { ...x, a: v } : x))} />
                </div>
              ))}
              <button className="sch-add" onClick={() => setFaqs([...faqs, { q: "", a: "" }])}>
                <Plus className="ic" /> Ajouter une question
              </button>
            </>
          ) : (
            <>
              <Field label="Nom" value={biz.name} set={setB("name")} placeholder="Nom de l’entité" />
              <Field label="Description" area value={biz.description} set={setB("description")} />
              <div className="sch-two">
                <Field label="Site web (URL)" value={biz.url} set={setB("url")} placeholder="https://…" />
                <Field label="Image / logo (URL)" value={biz.image} set={setB("image")} placeholder="https://…/logo.png" />
              </div>
              <div className="sch-two">
                <Field label="Téléphone" value={biz.telephone} set={setB("telephone")} placeholder="+33 …" />
                <Field label="Email" value={biz.email} set={setB("email")} />
              </div>
              {type === "LegalService" && (
                <Field label="Zone desservie" hint="areaServed" value={biz.areaServed} set={setB("areaServed")} />
              )}
              <Field label="Adresse" hint="streetAddress" value={biz.street} set={setB("street")} />
              <div className="sch-three">
                <Field label="Code postal" value={biz.postalCode} set={setB("postalCode")} />
                <Field label="Ville" value={biz.locality} set={setB("locality")} />
                <Field label="Pays" hint="ex. FR" value={biz.country} set={setB("country")} />
              </div>
              <div className="sch-two">
                <Field label="Région" hint="addressRegion" value={biz.region} set={setB("region")} />
                <Field label="Tarification" hint="priceRange" value={biz.priceRange} set={setB("priceRange")} placeholder="€€" />
              </div>
              <div className="sch-two">
                <Field label="Latitude" hint="optionnel" value={biz.lat} set={setB("lat")} placeholder="48.8709" />
                <Field label="Longitude" hint="optionnel" value={biz.lng} set={setB("lng")} placeholder="2.3270" />
              </div>

<div style={{ marginTop: 18 }}>
                <span className="sch-flabel" style={{ marginBottom: 0 }}>Horaires d’ouverture<em>optionnel</em></span>
                {hours.map((h, i) => (
                  <div className="sch-hrow" key={i}>
                    {hours.length > 1 && (
                      <button className="sch-rm" onClick={() => setHours(hours.filter((_, j) => j !== i))} aria-label="Supprimer">
                        <Trash2 className="ic" />
                      </button>
                    )}
                    <div className="sch-days">
                      {DAYS.map(([fr, en]) => (
                        <button key={en} className={"sch-day" + (h.days.includes(en) ? " on" : "")}
                          onClick={() => toggleDay(i, en)}>{fr}</button>
                      ))}
                    </div>
                    <div className="sch-htimes">
                      <Field label="Ouvre à" type="time" value={h.opens} set={(v) => updateHours(i, { opens: v })} />
                      <Field label="Ferme à" type="time" value={h.closes} set={(v) => updateHours(i, { closes: v })} />
                    </div>
                  </div>
                ))}
                <button className="sch-add" onClick={() => setHours([...hours, { days: [], opens: "09:00", closes: "18:00" }])}>
                  <Plus className="ic" /> Ajouter une plage horaire
                </button>
              </div>

<div style={{ marginTop: 18 }}>
                <span className="sch-flabel" style={{ marginBottom: 0 }}>Profils & réseaux<em>sameAs</em></span>
                {sameAs.map((s, i) => (
                  <div key={i} style={{ display: "flex", gap: 8, marginTop: 8 }}>
                    <input value={s} placeholder="https://www.linkedin.com/…"
                      onChange={(e) => setSameAs(sameAs.map((x, j) => j === i ? e.target.value : x))} />
                    {sameAs.length > 1 && (
                      <button className="sch-rm" style={{ position: "static" }} onClick={() => setSameAs(sameAs.filter((_, j) => j !== i))}>
                        <Trash2 className="ic" />
                      </button>
                    )}
                  </div>
                ))}
                <button className="sch-add" onClick={() => setSameAs([...sameAs, ""])}>
                  <Plus className="ic" /> Ajouter un profil
                </button>
              </div>
            </>
          )}
        </div>

{/* ---------- SORTIE ---------- */}
        <div className="sch-reveal" style={{ animationDelay: ".15s" }}>
          <div className="sch-out">
            <div className="sch-outbar">
              <span className="lbl">{`<script type="application/ld+json">`}</span>
              <div className="sch-actions">
                <button className="sch-btn ghost" onClick={() => copy(json, "json")}>
                  {copied === "json" ? <Check className="ic" /> : <Copy className="ic" />} JSON
                </button>
                <button className="sch-btn prim" onClick={() => copy(scriptTag, "tag")}>
                  {copied === "tag" ? <Check className="ic" /> : <Copy className="ic" />}
                  {copied === "tag" ? "Copié !" : "Copier le <script>"}
                </button>
              </div>
            </div>
            <pre className="sch-code" dangerouslySetInnerHTML={{ __html: html }} />
          </div>

<div className="sch-checks">
            {checks.map((c, i) => (
              <div className={"sch-check " + c.s} key={i}>
                {c.s === "ok" ? <Check className="ico" /> : c.s === "warn" ? <AlertTriangle className="ico" /> : <X className="ico" />}
                <span>{c.l}</span>
              </div>
            ))}
            {!hasError && (
              <div className="sch-check ok" style={{ marginTop: 6, fontWeight: 600, color: C.dark }}>
                <Check className="ico" /><span>Markup prêt à coller dans le <code style={{ fontFamily: "'JetBrains Mono'" }}><head></code> de votre page.</span>
              </div>
            )}
          </div>

<div className="sch-tools">
            <a href="https://search.google.com/test/rich-results" target="_blank" rel="noopener noreferrer">
              Tester (Rich Results de Google) <ExternalLink className="ic" />
            </a>
            <a href="https://validator.schema.org/" target="_blank" rel="noopener noreferrer">
              Valider (Schema.org) <ExternalLink className="ic" />
            </a>
          </div>
        </div>
      </div>

<div className="sch-foot sch-reveal" style={{ animationDelay: ".2s" }}>
        <p className="sch-note">
          Le JSON-LD est généré dans votre navigateur — rien n’est envoyé ni stocké. Collez le bloc dans
          le <code style={{ fontFamily: "'JetBrains Mono'" }}><head></code> (ou via Google Tag Manager), puis vérifiez-le avec les outils ci-dessus
          avant publication.
        </p>
        <a className="sch-cta" href="https://calendly.com/tristan-refmax/cadrage_web_30_min"
          target="_blank" rel="noopener noreferrer">
          Audit structured data — 30 min <ArrowRight className="ic" />
        </a>
      </div>
    </div>
  );
}</article></body></html>