/* ─────────────────────────────────────────────────────
   Equipment Balkans — Service detail pages + Marketplace / Categories / About
───────────────────────────────────────────────────── */
const { useState: useX } = React;

// ════════════════════════════════════════════════════
// SERVICE DETAIL CONFIG
// ════════════════════════════════════════════════════
const SERVICE_DETAILS = {
  inspection: {
    icon: "search-check", color: "#22C55E", tag: "Our difference",
    title: "Independent Inspection",
    lede: "Before any high-value machine changes hands, a certified EB inspector assesses it on-site — so buyers bid on facts, not photos.",
    hero: "https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=1800&h=600&fit=crop&auto=format&q=80",
    stats: [["152", "point checklist"], ["35+", "photos & video"], ["24–48h", "report turnaround"], ["€0", "to buyers"]],
    perspectives: [
      { who: "seller", label: "I'm selling", icon: "tag", intro: "Request an inspection on your machine to unlock EB certification, the 90-day guarantee and stronger bids.",
        steps: [
          ["calendar-clock", "Request & schedule", "Book an inspection from your listing or the sell wizard. We arrange a certified inspector at your yard, usually within 3–5 days."],
          ["clipboard-check", "On-site assessment", "152-point check of engine, hydraulics, drivetrain, undercarriage, electrics, structure and attachments, with fluid samples and function tests."],
          ["badge-check", "Certification", "Pass and your lot carries the EB Certified badge plus the full report — and becomes eligible for the 90-day guarantee."],
          ["trending-up", "Sell for more", "Certified, guaranteed machines attract more bidders and higher hammer prices, with fewer post-sale disputes."],
        ] },
      { who: "buyer", label: "I'm buying", icon: "gavel", intro: "Want extra certainty? Request your own independent inspection on any lot — even one the seller didn't certify.",
        steps: [
          ["hand", "Request on any lot", "Order an independent inspection from the lot page before the auction closes, or as a condition of a marketplace purchase."],
          ["user-check", "Independent inspector", "An EB-certified, independent inspector attends — no connection to the seller — and files the same 152-point report."],
          ["shield-check", "Approved = good to go", "Once our independent inspection is approved the machine is cleared to buy, and the 90-day guarantee and extended-warranty options apply."],
          ["umbrella", "Add protection", "From there you can extend cover with an insurance-backed 1 or 2-year warranty at checkout."],
        ] },
    ],
    pricing: [["Seller-requested inspection", "From €350 (waived on lots over €25,000)"], ["Buyer-requested independent inspection", "From €420"], ["Re-inspection / dispute visit", "From €250"]],
    faqs: [
      ["What does the inspection cover?", "All major systems — engine & emissions, hydraulics, transmission & drivetrain, undercarriage/tyres, electrical, cab & safety, structure/chassis and attachments — each rated and photographed."],
      ["Is the inspector really independent?", "Yes. EB inspectors are certified and assigned by us, with no commercial interest in the sale. Buyer-requested inspections are explicitly independent of the seller."],
      ["What if the machine fails?", "You receive the full report regardless. Sellers can remedy and re-inspect; buyers can walk away or renegotiate before committing."],
    ],
    related: ["guarantee", "warranty"],
  },
  guarantee: {
    icon: "shield-check", color: "#2563EB", tag: "Included",
    title: "90-Day Guarantee & Seller Indemnification",
    lede: "Every inspected machine carries a 90-day guarantee on its major systems — underwritten by a seller indemnity held safely in escrow.",
    hero: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1800&h=600&fit=crop&auto=format&q=80",
    stats: [["90", "days cover"], ["10%", "seller indemnity held"], ["3", "core systems"], ["€0", "buyer cost"]],
    perspectives: [
      { who: "buyer", label: "I'm buying", icon: "gavel", intro: "Buy an inspected lot and you're covered for 90 days from delivery — no extra cost.",
        steps: [
          ["truck", "Cover starts at delivery", "Your 90-day guarantee on engine, hydraulics and drivetrain begins the day you take delivery of the machine."],
          ["wrench", "Something fails? Claim in-house", "If a covered system fails within 90 days, open a claim. EB assesses and arranges remedy — funded first from the seller's retained indemnity."],
          ["umbrella", "Extend if you want", "Convert peace of mind into 1 or 2 years with an insurance-backed extended warranty at checkout."],
        ] },
      { who: "seller", label: "I'm selling", icon: "tag", intro: "The guarantee is backed by a seller indemnity — a holdback that protects buyers and gets released to you when the machine performs.",
        steps: [
          ["percent", "10% held in escrow", "On settlement we release 90% of proceeds to you and retain 10% as an indemnity against the 90-day guarantee."],
          ["calendar-check", "90-day clear period", "If no covered fault is reported and remedied in 90 days, the full 10% is released to you automatically."],
          ["scale", "If there's a valid claim", "Legitimate claims are remedied from the holdback first; any remainder is released to you. You're protected from open-ended liability."],
          ["arrow-up-right", "Extend the policy", "Sellers can pre-attach an extended insurance-backed warranty to make a machine even more attractive."],
        ] },
    ],
    callout: { icon: "lock", title: "How the indemnity works", body: "The 10% holdback sits in the same escrow that protects the buyer's funds. It is never a charge to the buyer and is released to the seller in full after 90 clear days. It exists only to guarantee the machine performs as inspected." },
    pricing: [["90-day guarantee", "Included on every inspected lot"], ["Seller indemnity", "10% of hammer price, held 90 days, then released"], ["Claim handling", "Managed in-house by EB"]],
    faqs: [
      ["What's covered?", "The major systems verified at inspection: engine, hydraulics and drivetrain. Wear items and consumables are excluded."],
      ["Why hold 10% from the seller?", "It aligns incentives: sellers list honestly, buyers are protected, and the guarantee is funded without inflating prices. It's released to the seller after 90 clean days."],
      ["What if the holdback isn't enough?", "On inspected lots, major-system risk is low. For larger exposure the extended insurance-backed warranty (underwritten at Lloyd's) carries the cover beyond the indemnity."],
    ],
    related: ["inspection", "warranty"],
  },
  warranty: {
    icon: "umbrella", color: "#8B5CF6", tag: "Insurance-backed",
    title: "Extended Warranty",
    lede: "Extend cover to 1 or 2 years with an insurance-backed warranty underwritten at Lloyd's of London — protection that travels with the machine.",
    hero: "https://images.unsplash.com/photo-1599707367072-cd6ada2bc375?w=1800&h=600&fit=crop&auto=format&q=80",
    stats: [["1–2 yr", "cover terms"], ["Lloyd's", "underwritten"], ["+4% / +7%", "of hammer price"], ["EU-wide", "claims network"]],
    perspectives: [
      { who: "buyer", label: "Add at checkout", icon: "shopping-bag", intro: "Turn the included 90 days into long-term certainty on powertrain and hydraulics.",
        steps: [
          ["list-checks", "Eligible after inspection", "Any EB-inspected machine qualifies. Choose 1-year (+4%) or 2-year (+7%) cover at checkout."],
          ["umbrella", "Insurance-backed policy", "Cover is provided under a policy underwritten at Lloyd's of London — not just an EB promise — so claims are honoured by a regulated insurer."],
          ["wrench", "Repairs across the region", "Approved repairs are handled through our EU-wide service network; parts and labour for covered components are included."],
          ["repeat", "Transferable", "The policy travels with the machine if you resell within the term, adding resale value."],
        ] },
    ],
    callout: { icon: "shield", title: "Underwriting & backing", body: "Extended warranties are insurance products underwritten at Lloyd's of London (or an equivalent A-rated general insurer), administered by Equipment Balkans. This means cover is ring-fenced and regulated — independent of EB's own balance sheet." },
    pricing: [["1-year extended warranty", "+4% of hammer price"], ["2-year extended warranty", "+7% of hammer price"], ["Coverage", "Powertrain & hydraulics, parts & labour"], ["Underwriter", "Lloyd's of London / A-rated insurer"]],
    faqs: [
      ["What does it cover vs the 90-day guarantee?", "The guarantee is EB's included 90-day cover funded by the seller indemnity. The extended warranty is a separate insurance policy that continues powertrain & hydraulics cover for 1–2 years."],
      ["Who pays a claim?", "The underwriter, via EB administration. Because it's insurance-backed, payouts don't depend on EB or the original seller."],
      ["Can I add it later?", "Best added at checkout. Post-purchase enrolment may require a fresh inspection within the eligibility window."],
    ],
    related: ["inspection", "guarantee"],
  },
  transport: {
    icon: "truck", color: "#F97316", tag: "EU-wide",
    title: "Transport & Logistics",
    lede: "Managed heavy haulage across the Balkans and EU — low-loaders, permits, route planning, customs and transit insurance, handled end to end.",
    hero: "https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?w=1800&h=600&fit=crop&auto=format&q=80",
    stats: [["32", "countries served"], ["Door-to-door", "tracking"], ["Abnormal", "load permits"], ["Insured", "in transit"]],
    perspectives: [
      { who: "buyer", label: "How it works", icon: "route", intro: "Get your machine from the seller's yard to your site without lifting a finger.",
        steps: [
          ["calculator", "Instant estimate", "Add managed transport at checkout for an instant estimate based on machine weight and distance."],
          ["file-badge", "Permits & route", "We plan the route and secure abnormal-load permits and escorts where required."],
          ["ship", "Customs & cross-border", "For cross-border moves we handle customs clearance and the paperwork (see Title & Export)."],
          ["map-pin", "Door-to-door tracking", "Track the load from collection to delivery, fully insured in transit."],
        ] },
    ],
    pricing: [["Estimate", "≈ 1.5% of value + €450 base (distance-based)"], ["Abnormal loads", "Quoted on dimensions & route"], ["Transit insurance", "Included on managed moves"]],
    faqs: [
      ["Do you move cross-border?", "Yes — across 32 countries, with customs handled in partnership with our Title & Export service."],
      ["Is the machine insured while moving?", "Yes, managed transport includes transit insurance for the declared value."],
      ["Can I use my own hauler?", "Of course. Managed transport is optional; arrange your own collection if you prefer."],
    ],
    related: ["title-export", "guarantee"],
  },
  financing: {
    icon: "landmark", color: "#0EA5E9", tag: "Partner network",
    title: "Financing & Leasing",
    lede: "Spread the cost with equipment finance and leasing through vetted lending partners — pre-approval in as little as 48 hours.",
    hero: "https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=1800&h=600&fit=crop&auto=format&q=80",
    stats: [["From 5.9%", "APR"], ["≤ 60 mo", "terms"], ["48h", "pre-approval"], ["HP & lease", "options"]],
    perspectives: [
      { who: "buyer", label: "How it works", icon: "wallet", intro: "Pre-qualify before you bid, so you can buy with confidence.",
        steps: [
          ["file-text", "Pre-qualify", "Submit a short application; our partners assess and return an indicative limit, usually within 48 hours."],
          ["gavel", "Bid or buy within your limit", "Use the approval to bid or buy up to your limit on auctions or marketplace listings."],
          ["landmark", "Structure the deal", "Choose hire purchase or lease, terms up to 60 months, with VAT-deferral options where eligible."],
          ["check", "Funds to escrow", "On agreement, the lender settles into EB escrow and your repayment schedule begins."],
        ] },
    ],
    pricing: [["Hire purchase", "From 5.9% APR, up to 60 months"], ["Finance lease", "Tax-efficient, balance-sheet options"], ["Pre-approval", "Free, ~48 hours"]],
    faqs: [
      ["Who are the lenders?", "Vetted regional and EU asset-finance partners specialising in heavy equipment."],
      ["Does pre-approval affect bidding?", "It strengthens it — funds-verified buyers can bid on higher-value lots without delay."],
      ["VAT?", "VAT-deferral and reclaim structures are available depending on jurisdiction and buyer status."],
    ],
    related: ["valuation", "guarantee"],
  },
  "title-export": {
    icon: "file-check", color: "#64748B", tag: "Documentation & due diligence",
    title: "Title, Theft Check & Export",
    lede: "We verify the machine isn't stolen or encumbered, transfer clean title, and prepare every export and customs document.",
    hero: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1800&h=600&fit=crop&auto=format&q=80",
    stats: [["Theft & lien", "checks"], ["EUR.1", "& customs docs"], ["Clean title", "transfer"], ["CE", "conformity"]],
    perspectives: [
      { who: "buyer", label: "How it works", icon: "shield-check", intro: "Buy knowing the machine is legally clean and yours to own and move.",
        steps: [
          ["search", "Theft & lien check", "We verify serial/PIN against stolen-equipment registries and check for outstanding finance or liens before completion."],
          ["file-signature", "Clean title transfer", "Ownership is transferred and the machine de-registered/re-registered as required in the buyer's jurisdiction."],
          ["ship", "Export & customs", "For cross-border buyers we issue EUR.1 / customs documentation and conformity (CE) paperwork."],
          ["languages", "Multi-language", "Documents prepared in the languages you and the authorities need."],
        ] },
    ],
    callout: { icon: "shield-alert", title: "Stolen-equipment due diligence", body: "Every machine's serial number / PIN is screened against international stolen-plant and finance registries. If anything is flagged, the sale is paused and funds stay in escrow until it's resolved — protecting buyers from unknowingly purchasing stolen or financed equipment." },
    pricing: [["Title & theft check", "Included on completed sales"], ["Export documentation", "From €180 per machine"], ["Registration assistance", "Quoted by jurisdiction"]],
    faqs: [
      ["How do you know it isn't stolen?", "We screen serial/PIN numbers against stolen-plant and asset-finance registries, and verify the seller's ownership documents before releasing escrow."],
      ["Can you handle export outside the EU?", "Yes — customs documentation and conformity paperwork are prepared for most destinations."],
      ["What if a lien is found?", "Completion pauses and escrow holds funds until the lien is cleared or the sale is unwound."],
    ],
    related: ["transport", "valuation"],
  },
  valuation: {
    icon: "calculator", color: "#F59E0B", tag: "For buyers & sellers",
    title: "Valuation & Appraisal",
    lede: "Know what a machine is worth. Certified, market-based appraisals for sale, finance, insurance or fleet accounting.",
    hero: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=1800&h=600&fit=crop&auto=format&q=80",
    stats: [["Certified", "appraisal report"], ["Market", "comparables"], ["Finance & insurance", "accepted"], ["Fleet", "options"]],
    perspectives: [
      { who: "seller", label: "I'm selling", icon: "tag", intro: "Price with confidence and set a credible reserve.",
        steps: [
          ["clipboard-list", "Submit details", "Provide make, model, year, hours and condition — or pair it with an inspection for a verified valuation."],
          ["bar-chart-3", "Market analysis", "We benchmark against recent regional sale and auction comparables."],
          ["file-check", "Certified report", "Receive a certified appraisal you can use to set a reserve or asking price."],
        ] },
      { who: "buyer", label: "I'm buying / financing", icon: "wallet", intro: "Independent value evidence for finance, insurance or accounting.",
        steps: [
          ["landmark", "For finance & insurance", "Lenders and insurers accept EB certified appraisals as independent value evidence."],
          ["calculator", "Bid smarter", "Know fair market value before you bid or make an offer."],
          ["layers", "Fleet valuations", "Value whole fleets for refinancing, sale or balance-sheet purposes."],
        ] },
    ],
    pricing: [["Single-machine appraisal", "From €120"], ["Inspection + valuation bundle", "Discounted when combined"], ["Fleet valuation", "Quoted by fleet size"]],
    faqs: [
      ["Will banks accept it?", "Yes — our certified appraisals are recognised by finance and insurance partners."],
      ["How accurate is it?", "Valuations use live regional comparables; pairing with an inspection gives a verified, condition-adjusted figure."],
      ["Do you value whole fleets?", "Yes, with per-asset breakdowns for accounting or refinancing."],
    ],
    related: ["inspection", "financing"],
  },
  maintenance: {
    icon: "wrench", color: "#EF4444", tag: "Aftercare",
    title: "Maintenance & Parts",
    lede: "Keep machines running after the sale — servicing, OEM and aftermarket parts, and scheduled maintenance plans through our regional network.",
    hero: "https://images.unsplash.com/photo-1597844808175-77b06e7a5a39?w=1800&h=600&fit=crop&auto=format&q=80",
    stats: [["Regional", "service network"], ["OEM & aftermarket", "parts"], ["Scheduled", "plans"], ["Telematics", "setup"]],
    perspectives: [
      { who: "buyer", label: "How it works", icon: "wrench", intro: "Protect your investment with aftercare that fits how hard you work the machine.",
        steps: [
          ["map-pin", "Find a service partner", "Book servicing and repairs through our vetted regional workshop network."],
          ["package", "Source parts", "Order OEM and quality aftermarket parts, matched to your machine's serial number."],
          ["calendar-clock", "Maintenance plans", "Set up scheduled servicing to keep warranty cover valid and uptime high."],
          ["activity", "Telematics", "Optional telematics setup for hours, location and health monitoring."],
        ] },
    ],
    pricing: [["Service & repair", "Quoted by the workshop"], ["Parts", "OEM & aftermarket, priced per part"], ["Maintenance plan", "From €90/month per machine"]],
    faqs: [
      ["Does servicing keep my warranty valid?", "Yes — following a scheduled maintenance plan keeps your extended warranty cover in force."],
      ["Genuine or aftermarket parts?", "Both are available; we match parts to your serial number and advise on warranty implications."],
      ["Do you cover older machines?", "Yes, the network services a wide range of makes and ages."],
    ],
    related: ["warranty", "valuation"],
  },
};

const SERVICE_ORDER = ["inspection", "guarantee", "warranty", "transport", "financing", "title-export", "valuation", "maintenance"];

// ════════════════════════════════════════════════════
// SERVICE DETAIL SCREEN
// ════════════════════════════════════════════════════
function ServiceDetailScreen({ id, user, onNav }) {
  const s = SERVICE_DETAILS[id];
  const [persp, setPersp] = useX(0);
  if (!s) {
    return <div style={{ maxWidth: 800, margin: "0 auto", padding: "80px 24px", textAlign: "center", color: "var(--text-3)" }}>Service not found. <button onClick={() => onNav({ name: "services" })} style={{ color: "var(--cobalt)", fontWeight: 700 }}>All services</button></div>;
  }
  const hasTabs = s.perspectives.length > 1;
  const cur = s.perspectives[Math.min(persp, s.perspectives.length - 1)];

  return (
    <div>
      {/* Hero */}
      <div style={{ position: "relative", overflow: "hidden", borderBottom: "1px solid var(--border)" }}>
        <EquipImage src={s.hero} 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.8) 45%, rgba(15,23,42,0.30) 100%)" }}></div>
        <div style={{ position: "relative", maxWidth: 1100, margin: "0 auto", padding: "30px 24px 40px", width: "100%" }}>
          <button onClick={() => onNav({ name: "services" })} style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "rgba(248,250,252,0.8)", fontSize: 12.5, fontWeight: 600, marginBottom: 22 }}>
            <i data-lucide="arrow-left" style={{ width: 15, height: 15 }}></i> All services
          </button>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
            <span style={{ width: 50, height: 50, borderRadius: 13, background: s.color + "26", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <i data-lucide={s.icon} style={{ width: 24, height: 24, color: s.color }}></i>
            </span>
            <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: ".12em", textTransform: "uppercase", color: s.color, background: "rgba(15,23,42,0.5)", padding: "5px 11px", borderRadius: 5 }}>{s.tag}</span>
          </div>
          <h1 style={{ fontFamily: "var(--ff-display)", fontSize: 46, fontWeight: 900, lineHeight: 1.02, color: "#fff", textTransform: "uppercase", margin: 0, maxWidth: 720 }}>{s.title}</h1>
          <p style={{ fontSize: 16, color: "rgba(248,250,252,0.82)", marginTop: 14, maxWidth: 600, lineHeight: 1.55 }}>{s.lede}</p>
        </div>
      </div>

      <div style={{ maxWidth: 1100, margin: "0 auto", padding: "30px 24px 50px" }}>
        {/* Stats */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12, marginBottom: 30 }} className="eb-stat-grid">
          {s.stats.map(([v, l]) => (
            <div key={l} style={{ background: "var(--card-bg)", border: "1px solid var(--border)", borderRadius: 12, padding: "16px 18px" }}>
              <div style={{ fontFamily: "var(--ff-mono)", fontSize: 22, fontWeight: 700, color: s.color }}>{v}</div>
              <div style={{ fontSize: 11.5, color: "var(--text-3)", marginTop: 3 }}>{l}</div>
            </div>
          ))}
        </div>

        {/* Perspective tabs */}
        {hasTabs && (
          <div style={{ display: "inline-flex", gap: 4, background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 9, padding: 4, marginBottom: 22 }}>
            {s.perspectives.map((p, i) => (
              <button key={p.who} onClick={() => setPersp(i)} style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "9px 16px", borderRadius: 6, fontSize: 13, fontWeight: 700, color: persp === i ? "#fff" : "var(--text-2)", background: persp === i ? s.color : "transparent" }}>
                <i data-lucide={p.icon} style={{ width: 15, height: 15 }}></i> {p.label}
              </button>
            ))}
          </div>
        )}

        {/* How it works */}
        <div style={{ marginBottom: 30 }}>
          <p style={{ fontSize: 15, color: "var(--text-2)", lineHeight: 1.6, marginBottom: 22, maxWidth: 680 }}>{cur.intro}</p>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 14 }}>
            {cur.steps.map((st, i) => (
              <div key={i} style={{ background: "var(--card-bg)", border: "1px solid var(--border)", borderRadius: 12, padding: 20, position: "relative" }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
                  <span style={{ width: 40, height: 40, borderRadius: 10, background: s.color + "1f", display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <i data-lucide={st[0]} style={{ width: 19, height: 19, color: s.color }}></i>
                  </span>
                  <span style={{ fontFamily: "var(--ff-mono)", fontSize: 13, fontWeight: 700, color: "var(--text-3)" }}>0{i + 1}</span>
                </div>
                <div style={{ fontFamily: "var(--ff-display)", fontSize: 17, fontWeight: 800, color: "var(--text)", textTransform: "uppercase", marginBottom: 6, lineHeight: 1.1 }}>{st[1]}</div>
                <p style={{ fontSize: 12.5, color: "var(--text-2)", lineHeight: 1.55, margin: 0 }}>{st[2]}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Callout */}
        {s.callout && (
          <div style={{ display: "flex", gap: 14, background: s.color + "12", border: `1px solid ${s.color}40`, borderRadius: 14, padding: "20px 22px", marginBottom: 30 }}>
            <span style={{ width: 44, height: 44, borderRadius: 11, background: s.color + "26", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              <i data-lucide={s.callout.icon} style={{ width: 22, height: 22, color: s.color }}></i>
            </span>
            <div>
              <div style={{ fontFamily: "var(--ff-display)", fontSize: 18, fontWeight: 800, color: "var(--text)", textTransform: "uppercase", marginBottom: 5 }}>{s.callout.title}</div>
              <p style={{ fontSize: 13.5, color: "var(--text-2)", lineHeight: 1.6, margin: 0 }}>{s.callout.body}</p>
            </div>
          </div>
        )}

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22, marginBottom: 30 }} className="eb-form-2">
          {/* Pricing */}
          <div>
            <h2 style={{ fontFamily: "var(--ff-display)", fontSize: 19, fontWeight: 800, color: "var(--text)", textTransform: "uppercase", marginBottom: 14 }}>Pricing</h2>
            <div style={{ background: "var(--card-bg)", border: "1px solid var(--border)", borderRadius: 12, overflow: "hidden" }}>
              {s.pricing.map(([k, v], i) => (
                <div key={k} style={{ display: "flex", justifyContent: "space-between", gap: 14, padding: "13px 16px", borderBottom: i < s.pricing.length - 1 ? "1px solid var(--border)" : "none" }}>
                  <span style={{ fontSize: 13, color: "var(--text-2)" }}>{k}</span>
                  <span style={{ fontSize: 13, fontWeight: 700, color: "var(--text)", textAlign: "right", maxWidth: 200 }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
          {/* FAQ */}
          <div>
            <h2 style={{ fontFamily: "var(--ff-display)", fontSize: 19, fontWeight: 800, color: "var(--text)", textTransform: "uppercase", marginBottom: 14 }}>FAQ</h2>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {s.faqs.map(([q, a]) => (
                <div key={q} style={{ background: "var(--card-bg)", border: "1px solid var(--border)", borderRadius: 10, padding: "13px 15px" }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: "var(--text)", marginBottom: 5 }}>{q}</div>
                  <p style={{ fontSize: 12.5, color: "var(--text-2)", lineHeight: 1.55, margin: 0 }}>{a}</p>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Related + CTA */}
        <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap", justifyContent: "space-between", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 14, padding: "20px 22px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
            <span style={{ fontSize: 12.5, color: "var(--text-3)", fontWeight: 700, textTransform: "uppercase", letterSpacing: ".06em" }}>Related</span>
            {(s.related || []).map((rid) => (
              <button key={rid} onClick={() => { setPersp(0); onNav({ name: "service", id: rid }); }} style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5, fontWeight: 700, color: SERVICE_DETAILS[rid].color, border: `1px solid ${SERVICE_DETAILS[rid].color}40`, borderRadius: 7, padding: "7px 12px" }}>
                <i data-lucide={SERVICE_DETAILS[rid].icon} style={{ width: 14, height: 14 }}></i> {SERVICE_DETAILS[rid].title.split(" ")[0]}
              </button>
            ))}
          </div>
          <div style={{ display: "flex", gap: 10 }}>
            <button onClick={() => onNav({ name: "auctions" })} style={ghostBtn}>Browse auctions</button>
            <button onClick={() => onNav(user ? { name: "sell" } : { name: "signin", redirect: { name: "sell" } })} style={{ ...primaryBtn, background: s.color }}>
              {id === "inspection" || id === "valuation" ? "Request this service" : id === "guarantee" || id === "warranty" ? "See covered lots" : "Get started"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════
// MARKETPLACE SCREEN (fixed-price listings)
// ════════════════════════════════════════════════════
function MarketplaceScreen({ store, onNav, onWatch, watchlist }) {
  const [q, setQ] = useX("");
  const [cat, setCat] = useX("All");
  const listings = store.auctions.filter((a) => a.channel === "marketplace");
  const cats = ["All", ...Array.from(new Set(listings.map((a) => a.category)))];
  const filtered = listings.filter((a) => (cat === "All" || a.category === cat) && (!q || a.title.toLowerCase().includes(q.toLowerCase())));

  return (
    <div>
      <div style={{ position: "relative", overflow: "hidden", borderBottom: "1px solid var(--border)" }}>
        <EquipImage src={"https://images.unsplash.com/photo-1565043666747-69f6646db940?w=1800&h=500&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.2) 100%)" }}></div>
        <div style={{ position: "relative", maxWidth: 1440, margin: "0 auto", padding: "46px 24px 38px" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 11, fontWeight: 800, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--cobalt)", marginBottom: 14 }}>
            <i data-lucide="store" style={{ width: 14, height: 14 }}></i> Marketplace · Fixed price
          </span>
          <h1 style={{ fontFamily: "var(--ff-display)", fontSize: 48, fontWeight: 900, lineHeight: 1.02, color: "#fff", textTransform: "uppercase", margin: 0, maxWidth: 680 }}>Buy equipment outright.</h1>
          <p style={{ fontSize: 15.5, color: "rgba(248,250,252,0.72)", marginTop: 14, maxWidth: 520, lineHeight: 1.6 }}>Browse fixed-price listings — buy now or make an offer. Inspection, guarantee and transport available on every machine.</p>
        </div>
      </div>

      <div style={{ position: "sticky", top: "calc(64px + var(--eb-statusbar-h, 0px))", zIndex: 30, background: "var(--header-bg)", backdropFilter: "blur(10px)", borderBottom: "1px solid var(--border)" }}>
        <div style={{ maxWidth: 1440, margin: "0 auto", padding: "14px 24px", display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
          <div style={{ position: "relative", flex: 1, minWidth: 200, maxWidth: 360 }}>
            <i data-lucide="search" style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", width: 15, height: 15, color: "var(--text-3)" }}></i>
            <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search marketplace…" style={{ width: "100%", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 8, padding: "9px 12px 9px 34px", fontSize: 13, color: "var(--text)", outline: "none" }} />
          </div>
          <select value={cat} onChange={(e) => setCat(e.target.value)} style={{ background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 8, padding: "9px 12px", fontSize: 12.5, fontWeight: 600, color: "var(--text-2)", outline: "none", cursor: "pointer", marginLeft: "auto" }}>
            {cats.map((c) => <option key={c} value={c}>{c === "All" ? "All categories" : c}</option>)}
          </select>
        </div>
      </div>

      <div style={{ maxWidth: 1440, margin: "0 auto", padding: "28px 24px 20px" }}>
        <div style={{ fontSize: 13, color: "var(--text-3)", marginBottom: 18 }}>{filtered.length} listing{filtered.length !== 1 ? "s" : ""}</div>
        {filtered.length === 0 ? (
          <div style={{ textAlign: "center", padding: "70px 0", color: "var(--text-3)" }}><i data-lucide="store" style={{ width: 40, height: 40, opacity: 0.4 }}></i><p style={{ marginTop: 12, fontSize: 14 }}>No listings match your search.</p></div>
        ) : (
          <div className="eb-card-grid">
            {filtered.map((a) => <MarketplaceCard key={a.id} listing={a} onOpen={(id) => onNav({ name: "detail", id })} />)}
          </div>
        )}
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════
// CATEGORIES SCREEN
// ════════════════════════════════════════════════════
function CategoriesScreen({ store, onNav }) {
  const CAT_ICONS = { Excavator: "shovel", "Wheel Loader": "truck", Bulldozer: "wrench", Forklift: "package", "CNC Machine": "cog", Generator: "zap", Crane: "construction", "Dump Truck": "truck", Telehandler: "move-vertical", "Backhoe Loader": "shovel", Attachments: "wrench" };
  const counts = {};
  store.auctions.forEach((a) => { counts[a.category] = (counts[a.category] || 0) + 1; });
  const cats = Object.keys(counts).sort();
  const heroFor = (c) => (store.auctions.find((a) => a.category === c) || {}).images?.[0];

  return (
    <div style={{ maxWidth: 1440, margin: "0 auto", padding: "36px 24px 40px" }}>
      <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 11, fontWeight: 800, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--ignite)", marginBottom: 12 }}>
        <i data-lucide="layout-grid" style={{ width: 14, height: 14 }}></i> Browse by category
      </span>
      <h1 style={{ fontFamily: "var(--ff-display)", fontSize: 40, fontWeight: 900, color: "var(--text)", textTransform: "uppercase", margin: "0 0 26px" }}>Equipment categories</h1>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))", gap: 16 }}>
        {cats.map((c) => (
          <button key={c} onClick={() => onNav({ name: "auctions", category: c })} style={{ position: "relative", aspectRatio: "16/10", borderRadius: 14, overflow: "hidden", border: "1px solid var(--border)", textAlign: "left", cursor: "pointer" }}>
            <EquipImage src={heroFor(c)} alt={c} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(15,23,42,0.92), rgba(15,23,42,0.25) 70%)" }}></div>
            <div style={{ position: "absolute", left: 16, top: 14, width: 40, height: 40, borderRadius: 10, background: "rgba(15,23,42,0.6)", backdropFilter: "blur(4px)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <i data-lucide={CAT_ICONS[c] || "package"} style={{ width: 20, height: 20, color: "#fff" }}></i>
            </div>
            <div style={{ position: "absolute", left: 16, bottom: 14, right: 16 }}>
              <div style={{ fontFamily: "var(--ff-display)", fontSize: 20, fontWeight: 800, color: "#fff", textTransform: "uppercase", lineHeight: 1.1 }}>{c}</div>
              <div style={{ fontSize: 11.5, color: "rgba(248,250,252,0.7)", marginTop: 3 }}>{counts[c]} listing{counts[c] !== 1 ? "s" : ""}</div>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════
// ABOUT SCREEN
// ════════════════════════════════════════════════════
function AboutScreen({ onNav }) {
  return (
    <div>
      <div style={{ position: "relative", overflow: "hidden", borderBottom: "1px solid var(--border)" }}>
        <EquipImage src={"https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1800&h=520&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.2) 100%)" }}></div>
        <div style={{ position: "relative", maxWidth: 1100, 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="building-2" style={{ width: 14, height: 14 }}></i> About us
          </span>
          <h1 style={{ fontFamily: "var(--ff-display)", fontSize: 48, fontWeight: 900, lineHeight: 1.02, color: "#fff", textTransform: "uppercase", margin: 0, maxWidth: 720 }}>The trusted way to trade heavy equipment.</h1>
          <p style={{ fontSize: 16, color: "rgba(248,250,252,0.82)", marginTop: 14, maxWidth: 600, lineHeight: 1.55 }}>Equipment Balkans is the marketplace and auction house for the region's industrial machinery — built on inspection, guarantees and escrow so buyers and sellers can deal with confidence.</p>
        </div>
      </div>
      <div style={{ maxWidth: 1100, margin: "0 auto", padding: "36px 24px 40px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12, marginBottom: 32 }} className="eb-stat-grid">
          {[["680+", "Verified sellers"], ["32", "Countries served"], ["€120M+", "Transacted"], ["98%", "Buyer satisfaction"]].map(([v, l]) => (
            <div key={l} style={{ background: "var(--card-bg)", border: "1px solid var(--border)", borderRadius: 12, padding: "18px 20px" }}>
              <div style={{ fontFamily: "var(--ff-mono)", fontSize: 26, fontWeight: 700, color: "var(--ignite)" }}>{v}</div>
              <div style={{ fontSize: 12, color: "var(--text-3)", marginTop: 4 }}>{l}</div>
            </div>
          ))}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(240px,1fr))", gap: 16, marginBottom: 32 }}>
          {[
            ["search-check", "Inspected first", "Independent, certified inspections on high-value machines before they sell."],
            ["shield-check", "Guaranteed & insured", "A 90-day guarantee plus Lloyd's-backed extended warranties."],
            ["lock", "Escrow protected", "Funds held safely and released only on delivery — for every deal."],
          ].map(([ic, t, d]) => (
            <div key={t} style={{ background: "var(--card-bg)", border: "1px solid var(--border)", borderRadius: 12, padding: 22 }}>
              <span style={{ width: 44, height: 44, borderRadius: 11, background: "rgba(249,115,22,0.12)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 13 }}><i data-lucide={ic} style={{ width: 22, height: 22, color: "var(--ignite)" }}></i></span>
              <div style={{ fontFamily: "var(--ff-display)", fontSize: 19, fontWeight: 800, color: "var(--text)", textTransform: "uppercase", marginBottom: 6 }}>{t}</div>
              <p style={{ fontSize: 13, color: "var(--text-2)", lineHeight: 1.6, margin: 0 }}>{d}</p>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <button onClick={() => onNav({ name: "auctions" })} style={primaryBtn}><i data-lucide="gavel" style={{ width: 16, height: 16 }}></i> Browse auctions</button>
          <button onClick={() => onNav({ name: "services" })} style={ghostBtn}>Explore services</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ServiceDetailScreen, MarketplaceScreen, CategoriesScreen, AboutScreen, SERVICE_DETAILS, SERVICE_ORDER });
