/* SeaVin — Surveyors directory */

function Surveyors() {
  const [cfg, setCfg] = useConfig({palette:"cream",theme:"light",typeset:"editorial",heroLayout:"split",tone:"reassuring",lang:"it"});
  const t = window.SEAVIN_I18N[cfg.lang];
  const it = cfg.lang === "it";
  const [filter, setFilter] = useState("all");
  const [selected, setSelected] = useState(null);

  const surveyors = [
    { n: "Marco Lombardi", loc: "La Spezia", reg: "Liguria", specs: ["Scafo", "Impianti", "Motori"], rating: 4.9, rev: 128, years: 18, fee: "€ 750", avail: it ? "Disponibile" : "Available" },
    { n: "Alessia Conti", loc: "Napoli", reg: "Campania", specs: ["Elettronica", "GPS", "AIS"], rating: 4.8, rev: 87, years: 12, fee: "€ 620", avail: it ? "2 settimane" : "2 weeks" },
    { n: "Giovanni Rossi", loc: "Trieste", reg: "FVG", specs: ["Motori", "Trasmissione"], rating: 5.0, rev: 214, years: 25, fee: "€ 890", avail: it ? "Disponibile" : "Available" },
    { n: "Paola Barbieri", loc: "Viareggio", reg: "Toscana", specs: ["Vele", "Armo", "Scafo"], rating: 4.9, rev: 156, years: 20, fee: "€ 720", avail: it ? "1 settimana" : "1 week" },
    { n: "Luca Greco", loc: "Olbia", reg: "Sardegna", specs: ["Scafo", "Vetroresina"], rating: 4.7, rev: 92, years: 14, fee: "€ 680", avail: it ? "3 giorni" : "3 days" },
    { n: "Francesca Moretti", loc: "Venezia", reg: "Veneto", specs: ["Legno", "Restauro", "Classiche"], rating: 4.9, rev: 67, years: 22, fee: "€ 850", avail: it ? "Disponibile" : "Available" },
    { n: "Davide Ferrari", loc: "Cagliari", reg: "Sardegna", specs: ["Elettronica", "Impianti"], rating: 4.8, rev: 103, years: 15, fee: "€ 640", avail: it ? "1 settimana" : "1 week" },
    { n: "Chiara Bianchi", loc: "Imperia", reg: "Liguria", specs: ["Scafo", "Vetroresina", "Osmosi"], rating: 4.9, rev: 178, years: 19, fee: "€ 790", avail: it ? "Disponibile" : "Available" },
    { n: "Roberto Esposito", loc: "Bari", reg: "Puglia", specs: ["Scafo", "Motori", "Elica"], rating: 4.8, rev: 74, years: 16, fee: "€ 660", avail: it ? "Disponibile" : "Available" },
    { n: "Silvia Martinelli", loc: "Reggio Calabria", reg: "Calabria", specs: ["Vetroresina", "Osmosi", "Coperta"], rating: 4.7, rev: 51, years: 11, fee: "€ 590", avail: it ? "4 giorni" : "4 days" },
    { n: "Andrea Ricci", loc: "Palermo", reg: "Sicilia", specs: ["Scafo", "Impianti", "AIS"], rating: 4.9, rev: 139, years: 21, fee: "€ 730", avail: it ? "Disponibile" : "Available" },
    { n: "Valeria Gallo", loc: "Ancona", reg: "Marche", specs: ["Vele", "Armo", "Strutture"], rating: 4.8, rev: 88, years: 13, fee: "€ 670", avail: it ? "2 giorni" : "2 days" },
    { n: "Matteo De Luca", loc: "Genova", reg: "Liguria", specs: ["Motori", "Trasmissione", "Diesel"], rating: 4.9, rev: 195, years: 23, fee: "€ 810", avail: it ? "1 settimana" : "1 week" },
    { n: "Elena Fontana", loc: "Brindisi", reg: "Puglia", specs: ["Elettronica", "Navigazione", "Radar"], rating: 4.7, rev: 62, years: 12, fee: "€ 610", avail: it ? "Disponibile" : "Available" },
    { n: "Stefano Mancini", loc: "Livorno", reg: "Toscana", specs: ["Legno", "Scafo", "Coperta"], rating: 4.8, rev: 114, years: 17, fee: "€ 740", avail: it ? "3 giorni" : "3 days" },
    { n: "Carla Riva", loc: "Messina", reg: "Sicilia", specs: ["Impianti", "Antincendio", "Safety"], rating: 4.9, rev: 97, years: 18, fee: "€ 700", avail: it ? "Disponibile" : "Available" },
    { n: "Pietro Amato", loc: "Pescara", reg: "Abruzzo", specs: ["Scafo", "Motori", "Antifouling"], rating: 4.6, rev: 43, years: 10, fee: "€ 570", avail: it ? "5 giorni" : "5 days" },
    { n: "Laura Cattaneo", loc: "Trieste", reg: "FVG", specs: ["Strutture", "Acciaio", "Saldatura"], rating: 5.0, rev: 88, years: 20, fee: "€ 870", avail: it ? "Disponibile" : "Available" },
  ];
  const filtered = filter === "all" ? surveyors : surveyors.filter(s => s.reg === filter);

  return (
    <Page active="surveyors" cfg={cfg} setCfg={setCfg} t={t}>
      <section style={{ paddingTop: "var(--s-8)", paddingBottom: "var(--s-7)" }}>
        <div className="shell">
          <div style={{ paddingBottom: "var(--s-5)", borderBottom: "2px solid var(--ink)", textAlign: "center" }}>
            <h1 style={{ fontSize: "var(--step-5)", letterSpacing: "-0.035em", lineHeight: 0.98, margin: 0 }}>
              {it ? "Trova il tuo" : "Find the right"} <em style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>{it ? "Perito" : "surveyor."}</em>
            </h1>
          </div>
          <p style={{ marginTop: 32, fontSize: "var(--step-1)", color: "var(--ink-soft)", maxWidth: "56ch", lineHeight: 1.5 }}>
            {it ? "Ogni perito della rete SeaVin è verificato per iscrizione all'Albo, assicurazione professionale e almeno 10 anni di esperienza. Filtra per area, specializzazione e disponibilità." : "Every SeaVin network surveyor is vetted for Albo registration, professional insurance and at least 10 years of experience. Filter by area, specialty and availability."}
          </p>
        </div>
      </section>

      {/* Filters */}
      <section style={{ paddingBottom: "var(--s-6)", borderBottom: "1px solid var(--rule)" }}>
        <div className="shell">
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {["all", "Liguria", "Toscana", "Sardegna", "Campania", "Veneto", "FVG", "Puglia", "Sicilia", "Calabria", "Marche", "Abruzzo"].map(f => (
              <button key={f} onClick={() => setFilter(f)} style={{
                padding: "8px 14px", border: "1px solid " + (filter === f ? "var(--ink)" : "var(--rule)"),
                background: filter === f ? "var(--ink)" : "transparent",
                color: filter === f ? "var(--bg)" : "var(--ink-mute)",
                fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase"
              }}>{f === "all" ? (it ? "Tutti" : "All") : f}</button>
            ))}
          </div>
        </div>
      </section>

      {/* Grid */}
      <section style={{ paddingTop: "var(--s-6)", paddingBottom: "var(--s-9)" }}>
        <div className="shell">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 1, background: "var(--rule)", border: "1px solid var(--rule)" }}>
            {filtered.map((s, i) => (
              <button key={i} onClick={() => setSelected(s)} style={{ background: "var(--bg-card)", padding: 24, textAlign: "left", cursor: "pointer", transition: "background 0.15s" }}
                onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-elev)"}
                onMouseLeave={(e) => e.currentTarget.style.background = "var(--bg-card)"}>
                <div style={{ display: "grid", gridTemplateColumns: "56px 1fr auto", gap: 16, alignItems: "start" }}>
                  <div style={{ width: 56, height: 56, background: "var(--bg-elev)", border: "1px solid var(--rule)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-display)", fontSize: 22, color: "var(--ink-mute)", borderRadius: "50%", flexShrink: 0 }}>
                    {s.n.split(" ").map(x => x[0]).join("")}
                  </div>
                  <div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 22, letterSpacing: "-0.02em" }}>{s.n}</div>
                    <div className="mono" style={{ fontSize: 11, color: "var(--ink-mute)", letterSpacing: "0.08em", marginTop: 4, textTransform: "uppercase" }}>
                      {s.loc} · {s.reg}
                    </div>
                    <div style={{ marginTop: 12, display: "flex", gap: 6, flexWrap: "wrap" }}>
                      {s.specs.map((sp, j) => (
                        <span key={j} className="mono" style={{ fontSize: 10.5, padding: "3px 8px", border: "1px solid var(--rule)", letterSpacing: "0.06em" }}>{sp}</span>
                      ))}
                    </div>
                  </div>
                  <div style={{ textAlign: "right" }}>
                    <div className="mono tabular" style={{ fontSize: 18 }}>★ {s.rating}</div>
                    <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-mute)", letterSpacing: "0.1em", marginTop: 2 }}>{s.rev} rev.</div>
                  </div>
                </div>
                <div style={{ marginTop: 16, paddingTop: 16, borderTop: "1px dotted var(--rule)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span className="mono" style={{ fontSize: 10.5, letterSpacing: "0.1em", color: s.avail === "Disponibile" || s.avail === "Available" ? "var(--success)" : "var(--accent-deep)", textTransform: "uppercase" }}>● {s.avail}</span>
                  <span style={{ fontFamily: "var(--font-display)", fontSize: 18 }}>{s.fee}</span>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* CTA — Sei un perito? Candidati */}
      <section style={{ paddingBottom: "var(--s-9)" }}>
        <div className="shell">
          <div className="srv-join">
            <div className="srv-join__left">
              <span className="eyebrow">{it ? "Sei un perito navale?" : "Are you a marine surveyor?"}</span>
              <div className="mono" style={{ marginTop: 12, fontSize: 11, letterSpacing: "0.18em", color: "var(--ink-mute)" }}>§ B2B · {it ? "ENTRA NELLA RETE" : "JOIN THE NETWORK"}</div>
              <h2 className="srv-join__h">
                {it ? "Iscriviti alla" : "Join the"} <em style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>{it ? "rete SeaVin." : "SeaVin network."}</em>
              </h2>
              <p className="srv-join__p">
                {it
                  ? "Compila la candidatura: foto, città base, iscrizione CCIAA, specializzazioni e strumentazione. Verifichiamo entro 3 giorni e attiviamo il tuo profilo pubblico."
                  : "Fill in the application: photo, home port, CCIAA registration, specialties and instruments. We verify within 3 days and activate your public profile."}
              </p>
              <div className="srv-join__cta">
                <button type="button" className="btn btn--accent" onClick={() => {
                  const u = window.SeaVAuth?.currentUser();
                  if (u) location.href = "surveyor-signup.html";
                  else location.href = "login.html?intent=surveyor&mode=signup&next=" + encodeURIComponent("surveyor-signup.html");
                }}>{it ? "Candidati ora" : "Apply now"} →</button>
                <a href="login.html?intent=surveyor&mode=login&next=surveyor-signup.html" className="btn btn--ghost">{it ? "Ho già un account" : "I have an account"}</a>
              </div>
            </div>
            <div className="srv-join__right">
              {[
                { n: "01", t: it ? "Profilo verificato" : "Verified profile", d: it ? "Badge dopo controllo CCIAA, RC e referenze." : "Badge after CCIAA, insurance and reference checks." },
                { n: "02", t: it ? "Lead qualificati" : "Qualified leads", d: it ? "Compratori già SeaVin-check, report pronto." : "Buyers already SeaVin-checked, report ready." },
                { n: "03", t: it ? "Posizionamento geografico" : "Geographic ranking", d: it ? "Priorità per la tua area + raggio operativo." : "Priority for your area + operating radius." },
                { n: "04", t: it ? "Recensioni verificate" : "Verified reviews", d: it ? "Solo da clienti reali con fattura emessa." : "Only from real clients with invoice issued." },
              ].map(b => (
                <div key={b.n} className="srv-join__bullet">
                  <span className="mono srv-join__bnum">§ {b.n}</span>
                  <div>
                    <div className="srv-join__bt">{b.t}</div>
                    <p className="srv-join__bd">{b.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {selected && (
        <div className="modal-backdrop" onClick={() => setSelected(null)}>
          <div className="modal" onClick={(e) => e.stopPropagation()}>
            <div className="modal__head">
              <span className="mono" style={{ fontSize: 11, letterSpacing: "0.18em" }}>{it ? "PROFILO PERITO" : "SURVEYOR PROFILE"}</span>
              <button className="modal__close" onClick={() => setSelected(null)}>×</button>
            </div>
            <div className="modal__body">
              <div style={{ display: "grid", gridTemplateColumns: "80px 1fr", gap: 20, alignItems: "center", marginBottom: 24 }}>
                <div style={{ width: 80, height: 80, background: "var(--bg-elev)", border: "1px solid var(--rule)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-display)", fontSize: 34, color: "var(--ink-mute)", borderRadius: "50%", flexShrink: 0 }}>
                  {selected.n.split(" ").map(x => x[0]).join("")}
                </div>
                <div>
                  <h2 style={{ fontSize: "var(--step-3)", letterSpacing: "-0.02em", lineHeight: 1 }}>{selected.n}</h2>
                  <div className="mono" style={{ fontSize: 12, color: "var(--ink-mute)", letterSpacing: "0.1em", marginTop: 8, textTransform: "uppercase" }}>{selected.loc} · {selected.reg}</div>
                </div>
              </div>
              <div className="spec"><span className="spec__k">{it ? "Anni di esperienza" : "Years of experience"}</span><span className="spec__v">{selected.years}</span></div>
              <div className="spec"><span className="spec__k">{it ? "Valutazione" : "Rating"}</span><span className="spec__v">★ {selected.rating} ({selected.rev} rev.)</span></div>
              <div className="spec"><span className="spec__k">{it ? "Specializzazioni" : "Specialties"}</span><span className="spec__v">{selected.specs.join(", ")}</span></div>
              <div className="spec"><span className="spec__k">{it ? "Tariffa base" : "Base fee"}</span><span className="spec__v">{selected.fee}</span></div>
              <div className="spec"><span className="spec__k">{it ? "Disponibilità" : "Availability"}</span><span className="spec__v">{selected.avail}</span></div>
              <div className="spec"><span className="spec__k">{it ? "Iscrizione Albo" : "Albo member"}</span><span className="spec__v">✓ {it ? "Verificato" : "Verified"}</span></div>
              <div className="spec" style={{ borderBottom: 0 }}><span className="spec__k">{it ? "Assicurazione RC" : "Professional insurance"}</span><span className="spec__v">✓ Lloyd's</span></div>
              <div style={{ marginTop: 24, display: "flex", gap: 10 }}>
                <button className="btn btn--accent" style={{ flex: 1 }}>{it ? "Richiedi preventivo" : "Request quote"}</button>
                <button className="btn btn--ghost">{it ? "Leggi recensioni" : "Read reviews"}</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </Page>
  );
}

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