/* ─────────────────────────────────────────────────────
   Equipment Balkans — Services
   Independent inspection · 90-day guarantee · extended warranty
   + transport, financing, title/export, valuation
───────────────────────────────────────────────────── */
const { useState: useSvc } = React;

function svcEur(n) { return "€" + Number(n || 0).toLocaleString("en-US"); }

// ════════════════════════════════════════════════════
// SERVICES SCREEN
// ════════════════════════════════════════════════════
function ServicesScreen({ onNav }) {
  const meta = window.EB_SERVICES_META || { INSPECTION_THRESHOLD: 25000 };
  const services = [
    { id: "inspection", icon: "search-check", color: "#22C55E", title: "Independent Inspection", tag: "Our difference", from: "Included over " + svcEur(meta.INSPECTION_THRESHOLD),
      blurb: "Before any high-value machine sells, we dispatch a certified EB inspector. A 152-point report covers every major system, with fluid samples, function tests and 35+ photos.",
      points: ["Certified, independent inspectors", "152-point condition report", "Components rated & photographed", "Report attached to the listing"] },
    { id: "guarantee", icon: "shield-check", color: "#2563EB", title: "90-Day Guarantee", tag: "Included", from: "Included",
      blurb: "Every inspected lot comes with a 90-day guarantee on major systems — engine, hydraulics and drivetrain — so you buy with confidence.",
      points: ["Engine, hydraulics & drivetrain", "Starts the day you take delivery", "Backed by Equipment Balkans", "Claims handled in-house"] },
    { id: "warranty", icon: "umbrella", color: "#8B5CF6", title: "Extended Warranty", tag: "Insurance-backed", from: "From 4% of price",
      blurb: "Extend cover to 1 or 2 years with an insurance-backed warranty. Powertrain and hydraulics protection that travels with the machine.",
      points: ["1-year and 2-year cover", "Insurance-backed policy", "Powertrain & hydraulics", "Add at checkout"] },
    { id: "transport", icon: "truck", color: "#F97316", title: "Transport & Logistics", tag: "EU-wide", from: "Instant quote",
      blurb: "Managed heavy haulage across the Balkans and EU — low-loaders, permits, route planning and customs handled end to end.",
      points: ["Low-loader & abnormal loads", "Customs & cross-border", "Door-to-door tracking", "Transit insurance available"] },
    { id: "financing", icon: "landmark", color: "#0EA5E9", title: "Financing & Leasing", tag: "Partners", from: "From 5.9% APR",
      blurb: "Spread the cost with equipment finance and leasing through our vetted lending partners — decisions in as little as 48 hours.",
      points: ["Hire purchase & leasing", "Up to 60-month terms", "Fast pre-approval", "VAT-deferral options"] },
    { id: "title-export", icon: "file-check", color: "#64748B", title: "Title & Export", tag: "Documentation", from: "Handled for you",
      blurb: "Ownership transfer, de-registration and export paperwork — including EUR.1 / customs documents for cross-border buyers.",
      points: ["Title & ownership transfer", "Export & customs docs", "CE / conformity checks", "Multi-language paperwork"] },
    { id: "valuation", icon: "calculator", color: "#F59E0B", title: "Valuation & Appraisal", tag: "For sellers", from: "From €120",
      blurb: "Know what your machine is worth. Certified appraisals for sale, finance, insurance or fleet accounting.",
      points: ["Market-based valuation", "Certified appraisal report", "For finance & insurance", "Fleet-wide options"] },
    { id: "maintenance", icon: "wrench", color: "#EF4444", title: "Maintenance & Parts", tag: "Aftercare", from: "On request",
      blurb: "Post-purchase servicing, OEM and aftermarket parts, and scheduled maintenance plans through our regional service network.",
      points: ["Service & repair network", "OEM & aftermarket parts", "Scheduled maintenance plans", "Telematics setup"] },
  ];

  return (
    <div>
      {/* Hero */}
      <div style={{ position: "relative", overflow: "hidden", borderBottom: "1px solid var(--border)" }}>
        <EquipImage src={"https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=1800&h=600&fit=crop&auto=format&q=80"} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, rgba(15,23,42,1) 0%, rgba(15,23,42,0.78) 42%, rgba(15,23,42,0.20) 100%)" }}></div>
        <div style={{ position: "relative", maxWidth: 1440, margin: "0 auto", padding: "52px 24px 44px" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 11, fontWeight: 800, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--ignite)", marginBottom: 14 }}>
            <i data-lucide="badge-check" style={{ width: 14, height: 14 }}></i> Buy with confidence
          </span>
          <h1 style={{ fontFamily: "var(--ff-display)", fontSize: 50, fontWeight: 900, lineHeight: 1.02, color: "#fff", textTransform: "uppercase", margin: 0, maxWidth: 760 }}>
            Every machine,<br />inspected & guaranteed.
          </h1>
          <p style={{ fontSize: 15.5, color: "rgba(248,250,252,0.72)", marginTop: 16, maxWidth: 540, lineHeight: 1.6 }}>
            We don't just list equipment — we stand behind it. Independent inspection, a 90-day guarantee and insurance-backed warranties on every high-value lot.
          </p>
        </div>
      </div>

      {/* Flagship: inspection → guarantee → warranty pipeline */}
      <div style={{ maxWidth: 1440, margin: "0 auto", padding: "36px 24px 0" }}>
        <div style={{ background: "var(--card-bg)", border: "1px solid var(--border)", borderRadius: 16, padding: 28 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 8 }}>
            <i data-lucide="sparkles" style={{ width: 16, height: 16, color: "var(--ignite)" }}></i>
            <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--ignite)" }}>What makes us different</span>
          </div>
          <h2 style={{ fontFamily: "var(--ff-display)", fontSize: 26, fontWeight: 800, color: "var(--text)", textTransform: "uppercase", margin: "0 0 22px" }}>Inspected, guaranteed, insured</h2>
          <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr auto 1fr", gap: 14, alignItems: "stretch" }} className="eb-pipeline">
            {[
              { n: 1, id: "inspection", icon: "search-check", color: "#22C55E", t: "We inspect", d: "A certified inspector assesses the machine on-site — 152 points, photos and fluid samples — before it sells." },
              { n: 2, id: "guarantee", icon: "shield-check", color: "#2563EB", t: "You're guaranteed", d: "Inspected lots include a 90-day guarantee on engine, hydraulics and drivetrain at no extra cost." },
              { n: 3, id: "warranty", icon: "umbrella", color: "#8B5CF6", t: "Extend if you want", d: "Add an insurance-backed 1 or 2-year warranty at checkout for long-term peace of mind." },
            ].map((s, i) => (
              <React.Fragment key={s.n}>
                <div onClick={() => onNav({ name: "service", id: s.id })} style={{ background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 12, padding: 20, cursor: "pointer" }}>
                  <span style={{ width: 42, height: 42, borderRadius: 11, background: s.color + "22", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 13 }}>
                    <i data-lucide={s.icon} style={{ width: 21, height: 21, color: s.color }}></i>
                  </span>
                  <div style={{ fontSize: 10.5, fontWeight: 800, color: s.color, letterSpacing: ".06em" }}>STEP {s.n}</div>
                  <div style={{ fontFamily: "var(--ff-display)", fontSize: 19, fontWeight: 800, color: "var(--text)", textTransform: "uppercase", margin: "3px 0 7px" }}>{s.t}</div>
                  <p style={{ fontSize: 12.5, color: "var(--text-2)", lineHeight: 1.55, margin: 0 }}>{s.d}</p>
                </div>
                {i < 2 && <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }} className="eb-pipe-arrow"><i data-lucide="arrow-right" style={{ width: 20, height: 20, color: "var(--text-3)" }}></i></div>}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>

      {/* All services */}
      <div style={{ maxWidth: 1440, margin: "0 auto", padding: "32px 24px 20px" }}>
        <h2 style={{ fontFamily: "var(--ff-display)", fontSize: 22, fontWeight: 800, color: "var(--text)", textTransform: "uppercase", marginBottom: 18 }}>Full service line</h2>
        <div className="eb-card-grid">
          {services.map((s) => (
            <div key={s.title} onClick={() => onNav({ name: "service", id: s.id })} style={{ background: "var(--card-bg)", border: "1px solid var(--border)", borderRadius: 14, padding: 22, display: "flex", flexDirection: "column", cursor: "pointer" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
                <span style={{ width: 46, height: 46, borderRadius: 12, background: s.color + "22", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <i data-lucide={s.icon} style={{ width: 22, height: 22, color: s.color }}></i>
                </span>
                <span style={{ fontSize: 9.5, fontWeight: 800, letterSpacing: ".07em", textTransform: "uppercase", color: s.color, background: s.color + "1a", padding: "4px 9px", borderRadius: 5 }}>{s.tag}</span>
              </div>
              <h3 style={{ fontFamily: "var(--ff-display)", fontSize: 19, fontWeight: 800, color: "var(--text)", textTransform: "uppercase", margin: "0 0 7px" }}>{s.title}</h3>
              <p style={{ fontSize: 12.5, color: "var(--text-2)", lineHeight: 1.55, marginBottom: 14 }}>{s.blurb}</p>
              <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 7, margin: "0 0 16px", flex: 1 }}>
                {s.points.map((p) => (
                  <li key={p} style={{ display: "flex", gap: 8, fontSize: 12, color: "var(--text-2)", alignItems: "flex-start" }}>
                    <i data-lucide="check" style={{ width: 14, height: 14, color: s.color, flexShrink: 0, marginTop: 1 }}></i>{p}
                  </li>
                ))}
              </ul>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: 14, borderTop: "1px solid var(--border)" }}>
                <span style={{ fontSize: 12.5, fontWeight: 700, color: "var(--text)", fontFamily: "var(--ff-mono)" }}>{s.from}</span>
                <button onClick={() => onNav({ name: "service", id: s.id })} style={{ fontSize: 12, fontWeight: 700, color: "var(--cobalt)", display: "inline-flex", alignItems: "center", gap: 4 }}>Learn more <i data-lucide="chevron-right" style={{ width: 13, height: 13 }}></i></button>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* CTA */}
      <div style={{ maxWidth: 1440, margin: "0 auto", padding: "20px 24px 10px" }}>
        <div style={{ background: "linear-gradient(135deg, rgba(249,115,22,0.12), rgba(37,99,235,0.1))", border: "1px solid var(--border)", borderRadius: 16, padding: "30px 28px", display: "flex", alignItems: "center", gap: 20, flexWrap: "wrap" }}>
          <div style={{ flex: 1, minWidth: 260 }}>
            <h2 style={{ fontFamily: "var(--ff-display)", fontSize: 24, fontWeight: 800, color: "var(--text)", textTransform: "uppercase", margin: "0 0 6px" }}>Bid knowing exactly what you're getting</h2>
            <p style={{ fontSize: 14, color: "var(--text-2)", margin: 0 }}>Browse live auctions — inspection reports and guarantees are built in.</p>
          </div>
          <button onClick={() => onNav({ name: "auctions" })} style={{ ...primaryBtn, fontSize: 14, padding: "13px 24px" }}><i data-lucide="gavel" style={{ width: 16, height: 16 }}></i> Browse auctions</button>
        </div>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════
// INSPECTION REPORT MODAL
// ════════════════════════════════════════════════════
function InspectionReportModal({ auction, onClose }) {
  const insp = window.getInspection ? window.getInspection(auction) : null;
  if (!insp) return null;
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 150, background: "rgba(8,12,22,0.62)", backdropFilter: "blur(4px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: "100%", maxWidth: 580, background: "var(--surface)", border: "1px solid var(--border-s)", borderRadius: 16, boxShadow: "0 24px 60px rgba(0,0,0,0.5)", maxHeight: "92vh", overflowY: "auto" }}>
        {/* Head */}
        <div style={{ padding: "22px 22px 18px", borderBottom: "1px solid var(--border)" }}>
          <div style={{ display: "flex", alignItems: "flex-start", gap: 13 }}>
            <span style={{ width: 44, height: 44, borderRadius: 11, background: "rgba(34,197,94,0.14)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              <i data-lucide="search-check" style={{ width: 22, height: 22, color: "#22C55E" }}></i>
            </span>
            <div style={{ flex: 1 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <h2 style={{ fontFamily: "var(--ff-display)", fontSize: 20, fontWeight: 800, color: "var(--text)", textTransform: "uppercase", margin: 0 }}>EB Certified Inspection</h2>
              </div>
              <div style={{ fontSize: 12, color: "var(--text-3)", marginTop: 3 }}>{auction.title}</div>
            </div>
            <button onClick={onClose} style={{ width: 30, height: 30, borderRadius: 7, color: "var(--text-3)", display: "flex", alignItems: "center", justifyContent: "center" }}><i data-lucide="x" style={{ width: 17, height: 17 }}></i></button>
          </div>
          <div style={{ display: "flex", gap: 10, marginTop: 16, flexWrap: "wrap" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "rgba(34,197,94,0.12)", color: "#22C55E", fontWeight: 800, fontSize: 12.5, padding: "6px 12px", borderRadius: 6 }}><i data-lucide="award" style={{ width: 14, height: 14 }}></i>{insp.grade} · {insp.avg}/5</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "var(--bg)", border: "1px solid var(--border)", color: "var(--text-2)", fontSize: 12, padding: "6px 12px", borderRadius: 6 }}><i data-lucide="list-checks" style={{ width: 13, height: 13 }}></i>{insp.points}-point</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "var(--bg)", border: "1px solid var(--border)", color: "var(--text-2)", fontSize: 12, padding: "6px 12px", borderRadius: 6 }}><i data-lucide="camera" style={{ width: 13, height: 13 }}></i>{insp.photos} photos</span>
          </div>
        </div>
        {/* Body */}
        <div style={{ padding: 22 }}>
          <p style={{ fontSize: 13, color: "var(--text-2)", lineHeight: 1.6, marginBottom: 18 }}>{insp.summary}</p>
          <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
            {insp.components.map((c) => (
              <div key={c.name} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <i data-lucide={c.icon} style={{ width: 16, height: 16, color: "var(--text-3)", flexShrink: 0 }}></i>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: "var(--text)" }}>{c.name}</div>
                  <div style={{ fontSize: 11, color: "var(--text-3)" }}>{c.note}</div>
                </div>
                <Stars value={c.rating} size={13} />
                <span style={{ fontFamily: "var(--ff-mono)", fontSize: 13, fontWeight: 700, color: "var(--text)", width: 30, textAlign: "right" }}>{c.rating.toFixed(1)}</span>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 9, marginTop: 18, padding: "12px 14px", background: "rgba(37,99,235,0.07)", border: "1px solid rgba(37,99,235,0.2)", borderRadius: 8 }}>
            <i data-lucide="shield-check" style={{ width: 16, height: 16, color: "var(--cobalt)", flexShrink: 0 }}></i>
            <span style={{ fontSize: 12.5, color: "var(--text-2)", lineHeight: 1.5 }}>This inspected lot includes a <strong style={{ color: "var(--text)" }}>90-day guarantee</strong>. Extend to 1 or 2 years at checkout.</span>
          </div>
          <div style={{ fontSize: 11, color: "var(--text-3)", marginTop: 12, display: "flex", alignItems: "center", gap: 6 }}>
            <i data-lucide="user-check" style={{ width: 12, height: 12 }}></i>{insp.inspector} · {insp.date}
          </div>
        </div>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════
// INSPECTION PANEL (detail page section)
// ════════════════════════════════════════════════════
function InspectionPanel({ auction, onOpenReport }) {
  const insp = window.getInspection ? window.getInspection(auction) : null;
  const meta = window.EB_SERVICES_META || { INSPECTION_THRESHOLD: 25000 };

  if (!insp) {
    return (
      <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", background: "var(--surface)", border: "1px dashed var(--border-s)", borderRadius: 10 }}>
        <i data-lucide="search" style={{ width: 17, height: 17, color: "var(--text-3)" }}></i>
        <span style={{ fontSize: 12.5, color: "var(--text-2)" }}>Independent inspection available on request for this lot.</span>
      </div>
    );
  }

  return (
    <div style={{ background: "var(--card-bg)", border: "1px solid rgba(34,197,94,0.3)", borderRadius: 12, overflow: "hidden" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "16px 18px", background: "rgba(34,197,94,0.07)" }}>
        <span style={{ width: 40, height: 40, borderRadius: 10, background: "rgba(34,197,94,0.16)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
          <i data-lucide="search-check" style={{ width: 20, height: 20, color: "#22C55E" }}></i>
        </span>
        <div style={{ flex: 1 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ fontSize: 14, fontWeight: 800, color: "var(--text)", fontFamily: "var(--ff-display)", textTransform: "uppercase" }}>EB Certified Inspection</span>
            <span style={{ fontSize: 11, fontWeight: 800, color: "#16A34A", background: "rgba(34,197,94,0.14)", padding: "2px 8px", borderRadius: 4 }}>{insp.grade}</span>
          </div>
          <div style={{ fontSize: 11.5, color: "var(--text-3)", marginTop: 2 }}>{insp.points}-point report · {insp.photos} photos · {insp.date}</div>
        </div>
        <button onClick={onOpenReport} style={{ ...ghostBtn, fontSize: 12.5, whiteSpace: "nowrap" }}>View report</button>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 16, padding: "13px 18px", flexWrap: "wrap" }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 12.5, color: "var(--text-2)" }}>
          <i data-lucide="shield-check" style={{ width: 15, height: 15, color: "var(--cobalt)" }}></i>
          <strong style={{ color: "var(--text)" }}>90-day guarantee</strong> included
        </span>
        <span style={{ width: 1, height: 16, background: "var(--border)" }}></span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 12.5, color: "var(--text-2)" }}>
          <i data-lucide="umbrella" style={{ width: 15, height: 15, color: "#8B5CF6" }}></i>
          1 &amp; 2-year warranty at checkout
        </span>
      </div>
    </div>
  );
}

Object.assign(window, { ServicesScreen, InspectionReportModal, InspectionPanel, svcEur });
