import { useState, useEffect } from "react";

const COURT_TYPES = ["Indoor", "Outdoor", "Both indoor & outdoor"];
const SURFACES = ["Artificial turf", "Panoramic glass", "Standard glass", "No preference yet"];
const LIGHTING = ["LED competition", "LED standard", "Natural light only", "Not sure yet"];
const TIMELINES = ["ASAP (< 3 months)", "3–6 months", "6–12 months", "12+ months / exploring"];
const BUDGETS = ["< €100K", "€100K – €250K", "€250K – €500K", "€500K – €1M", "> €1M", "Not sure yet"];
const SERVICES = ["Court construction (turnkey)", "Court surfaces only", "Steel structures / canopy", "Glass walls", "Lighting systems", "Flooring / foundation", "Architecture & planning", "Financing / investment", "Consulting / feasibility"];

const CALC = { courts: 6, type: "Indoor (rented hall)", totalInvestment: "€285,000", monthlyRevenue: "€18,750", monthlyCosts: "€12,400", monthlyCashFlow: "€6,350", paybackYears: "3.7", irr: "22.4%", cashOnCash: "26.8%" };

export default function App() {
  const [view, setView] = useState("results");
  const [bStep, setBStep] = useState(1);
  const [anim, setAnim] = useState(true);
  const [brief, setBrief] = useState({ courtType: "", courts: 6, surface: "", lighting: "", location: "", country: "Germany", timeline: "", budget: "", services: [], info: "", name: "", email: "", phone: "", company: "" });

  useEffect(() => { setAnim(false); const t = setTimeout(() => setAnim(true), 50); return () => clearTimeout(t); }, [view, bStep]);

  const $ = {
    bg: "#FFFFFF", soft: "#F8FAFC", muted: "#F1F5F9",
    border: "#E2E8F0", borderDark: "#CBD5E1",
    text: "#0F172A", sub: "#334155", dim: "#64748B", faint: "#94A3B8",
    blue: "#1D4ED8", blueLight: "#3B82F6", bluePale: "#DBEAFE", blueGhost: "#EFF6FF", blueDark: "#1E40AF",
    green: "#16A34A", greenPale: "#DCFCE7",
    gold: "#D97706", goldPale: "#FEF3C7",
  };
  const font = "'Inter', -apple-system, BlinkMacSystemFont, sans-serif";
  const mono = "'JetBrains Mono', 'SF Mono', monospace";

  const Pill = ({ options, value, onChange, multi }) => (
    <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
      {options.map(o => {
        const a = multi ? value.includes(o) : value === o;
        return <button key={o} onClick={() => onChange(o)} style={{ background: a ? $.blueGhost : $.bg, border: `1.5px solid ${a ? $.blue : $.border}`, borderRadius: "999px", padding: "8px 16px", fontSize: "13px", fontWeight: a ? 600 : 400, color: a ? $.blue : $.dim, cursor: "pointer", fontFamily: font }}>{o}</button>;
      })}
    </div>
  );

  const Stat = ({ label, value, highlight, sub }) => (
    <div style={{ background: $.bg, border: `1px solid ${$.border}`, borderRadius: "14px", padding: "18px", flex: "1 1 140px", boxShadow: "0 1px 3px rgba(0,0,0,0.04)" }}>
      <div style={{ fontSize: "11px", color: $.faint, marginBottom: "5px", textTransform: "uppercase", letterSpacing: "0.05em", fontWeight: 600 }}>{label}</div>
      <div style={{ fontSize: "22px", fontWeight: 700, fontFamily: mono, color: highlight ? $.blue : $.text, letterSpacing: "-0.02em" }}>{value}</div>
      {sub && <div style={{ fontSize: "12px", color: $.dim, marginTop: "3px" }}>{sub}</div>}
    </div>
  );

  return (
    <div style={{ minHeight: "100vh", background: $.soft, color: $.text, fontFamily: font }}>
      <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
      <div style={{ maxWidth: "800px", margin: "0 auto", padding: "32px 20px 80px" }}>

        {/* Header */}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "32px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
            <div style={{ width: "32px", height: "32px", borderRadius: "9px", background: $.blue, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "16px", fontWeight: 700, color: "#fff" }}>P</div>
            <span style={{ fontSize: "18px", fontWeight: 700, letterSpacing: "-0.02em" }}>padelnomics</span>
          </div>
          {view !== "results" && <button onClick={() => { setView("results"); setBStep(1); }} style={{ background: $.bg, border: `1px solid ${$.border}`, borderRadius: "8px", padding: "6px 14px", fontSize: "13px", color: $.dim, cursor: "pointer", fontFamily: font }}>← Back to calculator</button>}
        </div>

        <div style={{ opacity: anim ? 1 : 0, transform: anim ? "translateY(0)" : "translateY(10px)", transition: "all 0.3s cubic-bezier(0.16,1,0.3,1)" }}>

          {/* ─── RESULTS ─── */}
          {view === "results" && (<div>
            <div style={{ marginBottom: "24px" }}>
              <div style={{ fontSize: "12px", color: $.blue, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: "5px" }}>Your Projection</div>
              <h1 style={{ fontSize: "clamp(22px, 4vw, 30px)", fontWeight: 700, letterSpacing: "-0.03em", margin: "0 0 4px" }}>{CALC.courts}-Court Indoor Padel Hall</h1>
              <p style={{ color: $.dim, fontSize: "14px", margin: 0 }}>Based on your inputs — {CALC.type}</p>
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: "12px", marginBottom: "12px" }}>
              <Stat label="Total Investment" value={CALC.totalInvestment} sub="CAPEX (rent model)" />
              <Stat label="Monthly Revenue" value={CALC.monthlyRevenue} sub="At 40% utilization" />
              <Stat label="Monthly Cash Flow" value={CALC.monthlyCashFlow} highlight sub="After debt service" />
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: "12px", marginBottom: "32px" }}>
              <Stat label="Payback Period" value={`${CALC.paybackYears} yrs`} sub="Equity recovery" />
              <Stat label="IRR" value={CALC.irr} highlight sub="10-year horizon" />
              <Stat label="Cash-on-Cash" value={CALC.cashOnCash} sub="Annual return on equity" />
            </div>

            {/* CTA */}
            <div style={{ background: $.blueGhost, border: `2px solid ${$.blue}`, borderRadius: "20px", padding: "30px", position: "relative", overflow: "hidden", boxShadow: "0 4px 24px rgba(29,78,216,0.10)" }}>
              <div style={{ position: "relative" }}>
                <div style={{ fontSize: "12px", color: $.blue, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: "8px" }}>Next Step</div>
                <h2 style={{ fontSize: "22px", fontWeight: 700, margin: "0 0 8px" }}>Get quotes from verified court suppliers</h2>
                <p style={{ color: $.dim, fontSize: "14px", lineHeight: 1.6, margin: "0 0 18px", maxWidth: "540px" }}>Share your project specs and we'll connect you with pre-vetted suppliers who match your requirements. They'll reach out directly with tailored proposals — typically within 48 hours.</p>
                <div style={{ display: "flex", flexWrap: "wrap", gap: "12px", marginBottom: "20px" }}>
                  {["2–5 matched suppliers", "Direct contact, no middleman", "Free, no commitment", "Your data stays private"].map(t => (
                    <div key={t} style={{ display: "flex", alignItems: "center", gap: "5px", fontSize: "13px" }}><span style={{ color: $.green, fontWeight: 700 }}>✓</span><span style={{ color: $.dim }}>{t}</span></div>
                  ))}
                </div>
                <div style={{ display: "flex", gap: "12px", alignItems: "center" }}>
                  <button onClick={() => setView("brief")} style={{ background: $.blue, color: "#fff", border: "none", borderRadius: "10px", padding: "13px 26px", fontSize: "15px", fontWeight: 700, cursor: "pointer", fontFamily: font, boxShadow: "0 2px 10px rgba(29,78,216,0.25)" }}>Get Supplier Quotes →</button>
                  <span style={{ fontSize: "12px", color: $.faint }}>Takes ~2 minutes</span>
                </div>
              </div>
            </div>

            <div style={{ marginTop: "20px", display: "flex", gap: "24px", justifyContent: "center" }}>
              {[["540+", "projects matched"], ["48h", "avg. response"], ["35+", "verified suppliers"]].map(([n, l]) => (
                <div key={l} style={{ textAlign: "center" }}><div style={{ fontSize: "18px", fontWeight: 700, fontFamily: mono, color: $.blue }}>{n}</div><div style={{ fontSize: "12px", color: $.faint }}>{l}</div></div>
              ))}
            </div>
          </div>)}

          {/* ─── BRIEF ─── */}
          {view === "brief" && (<div>
            <div style={{ display: "flex", gap: "8px", marginBottom: "28px" }}>
              {["Project", "Details", "Contact"].map((l, i) => {
                const n = i + 1, on = bStep === n, done = bStep > n;
                return (<div key={l} style={{ flex: 1 }}><div style={{ height: "3px", borderRadius: "999px", background: done || on ? $.blue : $.border, marginBottom: "7px" }} /><div style={{ fontSize: "12px", fontWeight: on ? 600 : 400, color: on ? $.text : done ? $.dim : $.faint }}>{l}</div></div>);
              })}
            </div>

            {/* Brief 1 */}
            {bStep === 1 && (<div>
              <h2 style={{ fontSize: "22px", fontWeight: 700, margin: "0 0 5px" }}>Tell us about your project</h2>
              <p style={{ color: $.dim, fontSize: "14px", marginBottom: "24px" }}>This helps us match you with the right suppliers. All fields optional.</p>
              <div style={{ display: "flex", flexDirection: "column", gap: "22px" }}>
                <div><label style={{ display: "block", fontSize: "13px", fontWeight: 500, color: $.dim, marginBottom: "8px" }}>Facility type</label><Pill options={COURT_TYPES} value={brief.courtType} onChange={v => setBrief(p => ({ ...p, courtType: v }))} /></div>
                <div><label style={{ display: "block", fontSize: "13px", fontWeight: 500, color: $.dim, marginBottom: "8px" }}>Number of courts</label>
                  <div style={{ display: "flex", alignItems: "center", gap: "16px" }}><input type="range" min={1} max={16} value={brief.courts} onChange={e => setBrief(p => ({ ...p, courts: +e.target.value }))} style={{ flex: 1, accentColor: $.blue }} /><div style={{ fontSize: "24px", fontWeight: 700, fontFamily: mono, color: $.blue, minWidth: "36px", textAlign: "center" }}>{brief.courts}</div></div>
                </div>
                <div><label style={{ display: "block", fontSize: "13px", fontWeight: 500, color: $.dim, marginBottom: "8px" }}>Court surface preference</label><Pill options={SURFACES} value={brief.surface} onChange={v => setBrief(p => ({ ...p, surface: v }))} /></div>
                <div><label style={{ display: "block", fontSize: "13px", fontWeight: 500, color: $.dim, marginBottom: "8px" }}>Lighting</label><Pill options={LIGHTING} value={brief.lighting} onChange={v => setBrief(p => ({ ...p, lighting: v }))} /></div>
              </div>
              <div style={{ display: "flex", justifyContent: "flex-end", marginTop: "28px" }}>
                <button onClick={() => setBStep(2)} style={{ background: $.blue, color: "#fff", border: "none", borderRadius: "10px", padding: "12px 24px", fontSize: "14px", fontWeight: 600, cursor: "pointer", fontFamily: font, boxShadow: "0 2px 8px rgba(29,78,216,0.25)" }}>Continue →</button>
              </div>
            </div>)}

            {/* Brief 2 */}
            {bStep === 2 && (<div>
              <h2 style={{ fontSize: "22px", fontWeight: 700, margin: "0 0 5px" }}>Project details</h2>
              <p style={{ color: $.dim, fontSize: "14px", marginBottom: "24px" }}>Help suppliers understand your timeline and scope.</p>
              <div style={{ display: "flex", flexDirection: "column", gap: "22px" }}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px" }}>
                  <div><label style={{ display: "block", fontSize: "13px", fontWeight: 500, color: $.dim, marginBottom: "6px" }}>City / Region</label><input placeholder="e.g. Göttingen" value={brief.location} onChange={e => setBrief(p => ({ ...p, location: e.target.value }))} style={{ width: "100%", background: $.bg, border: `1.5px solid ${$.border}`, borderRadius: "10px", padding: "11px 14px", fontSize: "14px", color: $.text, fontFamily: font, outline: "none", boxSizing: "border-box" }} onFocus={e => e.target.style.borderColor = $.blue} onBlur={e => e.target.style.borderColor = $.border} /></div>
                  <div><label style={{ display: "block", fontSize: "13px", fontWeight: 500, color: $.dim, marginBottom: "6px" }}>Country</label><select value={brief.country} onChange={e => setBrief(p => ({ ...p, country: e.target.value }))} style={{ width: "100%", background: $.bg, border: `1.5px solid ${$.border}`, borderRadius: "10px", padding: "11px 14px", fontSize: "14px", color: $.text, fontFamily: font, outline: "none", boxSizing: "border-box" }}>{["Germany", "Netherlands", "France", "Italy", "Spain", "UK", "Sweden", "Belgium", "Austria", "Switzerland", "Portugal", "UAE", "USA", "Other"].map(c => <option key={c}>{c}</option>)}</select></div>
                </div>
                <div><label style={{ display: "block", fontSize: "13px", fontWeight: 500, color: $.dim, marginBottom: "8px" }}>Timeline</label><Pill options={TIMELINES} value={brief.timeline} onChange={v => setBrief(p => ({ ...p, timeline: v }))} /></div>
                <div><label style={{ display: "block", fontSize: "13px", fontWeight: 500, color: $.dim, marginBottom: "8px" }}>Estimated budget</label><Pill options={BUDGETS} value={brief.budget} onChange={v => setBrief(p => ({ ...p, budget: v }))} /></div>
                <div><label style={{ display: "block", fontSize: "13px", fontWeight: 500, color: $.dim, marginBottom: "8px" }}>What do you need? (select all)</label><Pill options={SERVICES} value={brief.services} onChange={s => setBrief(p => ({ ...p, services: p.services.includes(s) ? p.services.filter(x => x !== s) : [...p.services, s] }))} multi /></div>
                <div><label style={{ display: "block", fontSize: "13px", fontWeight: 500, color: $.dim, marginBottom: "6px" }}>Anything else?</label><textarea placeholder="E.g. converting a warehouse, need planning support..." value={brief.info} onChange={e => setBrief(p => ({ ...p, info: e.target.value }))} rows={3} style={{ width: "100%", background: $.bg, border: `1.5px solid ${$.border}`, borderRadius: "10px", padding: "11px 14px", fontSize: "14px", color: $.text, fontFamily: font, outline: "none", resize: "vertical", boxSizing: "border-box" }} /></div>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", marginTop: "28px" }}>
                <button onClick={() => setBStep(1)} style={{ background: $.bg, color: $.dim, border: `1px solid ${$.border}`, borderRadius: "10px", padding: "12px 22px", fontSize: "14px", cursor: "pointer", fontFamily: font }}>← Back</button>
                <button onClick={() => setBStep(3)} style={{ background: $.blue, color: "#fff", border: "none", borderRadius: "10px", padding: "12px 24px", fontSize: "14px", fontWeight: 600, cursor: "pointer", fontFamily: font, boxShadow: "0 2px 8px rgba(29,78,216,0.25)" }}>Continue →</button>
              </div>
            </div>)}

            {/* Brief 3 */}
            {bStep === 3 && (<div>
              <h2 style={{ fontSize: "22px", fontWeight: 700, margin: "0 0 5px" }}>How should suppliers reach you?</h2>
              <p style={{ color: $.dim, fontSize: "14px", marginBottom: "24px" }}>Your details are only shared with matched suppliers — never published publicly.</p>

              <div style={{ background: $.blueGhost, border: `1px solid ${$.bluePale}`, borderRadius: "12px", padding: "14px 18px", marginBottom: "22px", display: "flex", gap: "12px", alignItems: "flex-start" }}>
                <span style={{ fontSize: "18px" }}>🔒</span>
                <div><div style={{ fontSize: "13px", fontWeight: 600, color: $.blue, marginBottom: "3px" }}>Your privacy matters</div><div style={{ fontSize: "12px", color: $.dim, lineHeight: 1.5 }}>Contact details go to 2–5 pre-vetted suppliers only. They pay to access your brief — so only serious companies reach out.</div></div>
              </div>

              <div style={{ display: "flex", flexDirection: "column", gap: "14px", maxWidth: "460px" }}>
                {[["name", "Your name *", "Full name"], ["email", "Email *", "you@company.com"], ["phone", "Phone (optional)", "+49 170 1234567"], ["company", "Company (optional)", "e.g. Padel Club Göttingen"]].map(([k, l, p]) => (
                  <div key={k}><label style={{ display: "block", fontSize: "13px", fontWeight: 500, color: $.dim, marginBottom: "6px" }}>{l}</label><input placeholder={p} value={brief[k]} onChange={e => setBrief(f => ({ ...f, [k]: e.target.value }))} style={{ width: "100%", background: $.bg, border: `1.5px solid ${$.border}`, borderRadius: "10px", padding: "11px 14px", fontSize: "14px", color: $.text, fontFamily: font, outline: "none", boxSizing: "border-box" }} onFocus={e => e.target.style.borderColor = $.blue} onBlur={e => e.target.style.borderColor = $.border} /></div>
                ))}
              </div>

              <div style={{ background: $.bg, border: `1px solid ${$.border}`, borderRadius: "14px", padding: "18px 20px", marginTop: "24px", boxShadow: "0 1px 3px rgba(0,0,0,0.04)" }}>
                <div style={{ fontSize: "12px", fontWeight: 700, color: $.faint, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: "10px" }}>Your project brief</div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px 20px" }}>
                  {[["Type", brief.courtType || "—"], ["Courts", brief.courts], ["Surface", brief.surface || "—"], ["Lighting", brief.lighting || "—"], ["Location", brief.location ? `${brief.location}, ${brief.country}` : brief.country], ["Timeline", brief.timeline || "—"], ["Budget", brief.budget || "—"], ["Services", brief.services.length ? `${brief.services.length} selected` : "—"]].map(([l, v]) => (
                    <div key={l} style={{ display: "flex", justifyContent: "space-between", padding: "5px 0", borderBottom: `1px solid ${$.muted}` }}><span style={{ fontSize: "12px", color: $.faint }}>{l}</span><span style={{ fontSize: "13px", fontWeight: 500, color: $.dim }}>{v}</span></div>
                  ))}
                </div>
              </div>

              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: "24px" }}>
                <button onClick={() => setBStep(2)} style={{ background: $.bg, color: $.dim, border: `1px solid ${$.border}`, borderRadius: "10px", padding: "12px 22px", fontSize: "14px", cursor: "pointer", fontFamily: font }}>← Back</button>
                <button onClick={() => setView("submitted")} style={{ background: $.blue, color: "#fff", border: "none", borderRadius: "10px", padding: "13px 26px", fontSize: "15px", fontWeight: 700, cursor: "pointer", fontFamily: font, boxShadow: "0 2px 10px rgba(29,78,216,0.25)" }}>Submit & Get Matched →</button>
              </div>
              <div style={{ textAlign: "center", fontSize: "11px", color: $.faint, marginTop: "10px" }}>By submitting you agree to our Terms & Privacy Policy. Free, no obligation.</div>
            </div>)}
          </div>)}

          {/* ─── SUBMITTED ─── */}
          {view === "submitted" && (<div style={{ textAlign: "center", paddingTop: "36px" }}>
            <div style={{ width: "68px", height: "68px", borderRadius: "50%", background: $.blueGhost, border: `2px solid ${$.blue}`, display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 20px", fontSize: "28px", color: $.blue }}>✓</div>
            <h2 style={{ fontSize: "26px", fontWeight: 700, marginBottom: "8px" }}>You're matched!</h2>
            <p style={{ color: $.dim, fontSize: "15px", maxWidth: "440px", margin: "0 auto 28px", lineHeight: 1.6 }}>We've matched your {brief.courts}-court {brief.courtType.toLowerCase() || "padel"} project with <strong style={{ color: $.blue }}>3 verified suppliers</strong> in {brief.country}. They'll reach out within 48 hours.</p>

            <div style={{ background: $.bg, border: `1px solid ${$.border}`, borderRadius: "16px", padding: "26px", maxWidth: "500px", margin: "0 auto 28px", textAlign: "left", boxShadow: "0 1px 6px rgba(0,0,0,0.06)" }}>
              <div style={{ fontSize: "14px", fontWeight: 700, marginBottom: "18px" }}>What happens next</div>
              {[["1", "Suppliers review your brief", "Matched suppliers receive your project specs and assess fit.", "Now"], ["2", "They contact you directly", "Expect calls or emails within 24–48 hours.", "1–2 days"], ["3", "Compare proposals", "Review quotes, ask questions, visit references.", "1–2 weeks"], ["4", "Choose your supplier", "Pick the best fit. We're here if you need help.", "Your pace"]].map(([n, t, d, time], i) => (
                <div key={n} style={{ display: "flex", gap: "14px", marginBottom: i < 3 ? "18px" : 0 }}>
                  <div style={{ width: "26px", height: "26px", borderRadius: "50%", background: $.blueGhost, border: `1.5px solid ${$.bluePale}`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "12px", fontWeight: 700, fontFamily: mono, color: $.blue, flexShrink: 0 }}>{n}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "2px" }}><span style={{ fontSize: "14px", fontWeight: 600 }}>{t}</span><span style={{ fontSize: "11px", fontFamily: mono, color: $.faint }}>{time}</span></div>
                    <div style={{ fontSize: "13px", color: $.dim, lineHeight: 1.4 }}>{d}</div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ background: $.blueGhost, border: `1px solid ${$.bluePale}`, borderRadius: "12px", padding: "14px 18px", maxWidth: "500px", margin: "0 auto 20px", display: "flex", gap: "12px", alignItems: "center" }}>
              <span style={{ fontSize: "20px" }}>📧</span>
              <div style={{ textAlign: "left" }}><div style={{ fontSize: "13px", fontWeight: 600, color: $.blue }}>Check your email</div><div style={{ fontSize: "12px", color: $.dim }}>Confirmation sent to <strong style={{ color: $.text }}>{brief.email || "your email"}</strong></div></div>
            </div>

            <button onClick={() => setView("dashboard")} style={{ background: $.bg, border: `1px solid ${$.border}`, borderRadius: "10px", padding: "10px 22px", fontSize: "14px", color: $.dim, cursor: "pointer", fontFamily: font, marginTop: "4px" }}>View your project dashboard →</button>
          </div>)}

          {/* ─── DASHBOARD ─── */}
          {view === "dashboard" && (<div>
            <div style={{ marginBottom: "24px" }}>
              <div style={{ fontSize: "12px", color: $.blue, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: "3px" }}>Your Project</div>
              <h2 style={{ fontSize: "24px", fontWeight: 700, margin: "0 0 4px" }}>{brief.courts}-Court {brief.courtType || "Padel"} Facility</h2>
              <p style={{ color: $.dim, fontSize: "14px", margin: 0 }}>{brief.location ? `${brief.location}, ` : ""}{brief.country} · Submitted just now</p>
            </div>

            <div style={{ background: $.blueGhost, border: `1px solid ${$.bluePale}`, borderRadius: "14px", padding: "18px 22px", marginBottom: "22px", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: "12px" }}>
              <div><div style={{ fontSize: "15px", fontWeight: 600, marginBottom: "3px" }}>3 suppliers matched</div><div style={{ fontSize: "13px", color: $.dim }}>Waiting for their first response — typically 24–48 hours</div></div>
              <div style={{ display: "flex" }}>
                {["P", "M", "C"].map((l, i) => <div key={i} style={{ width: "34px", height: "34px", borderRadius: "50%", background: [$.blue, $.blueLight, $.gold][i], display: "flex", alignItems: "center", justifyContent: "center", fontSize: "14px", fontWeight: 700, color: "#fff", border: `2px solid ${$.bg}`, marginLeft: i > 0 ? "-8px" : 0, position: "relative", zIndex: 3 - i }}>{l}</div>)}
              </div>
            </div>

            <div style={{ fontSize: "14px", fontWeight: 700, marginBottom: "14px" }}>Matched Suppliers</div>
            {[
              { name: "PadelCourt Europe", loc: "Cologne, Germany", spec: "Full turnkey", rating: 4.9, projects: "150+", avatar: "P", color: $.blue },
              { name: "Mondo Padel", loc: "Milan, Italy", spec: "Court surfaces & glass", rating: 4.8, projects: "200+", avatar: "M", color: $.blueLight },
              { name: "CourtTech Solutions", loc: "Amsterdam, Netherlands", spec: "Steel & lighting", rating: 4.7, projects: "85+", avatar: "C", color: $.gold },
            ].map((sup, i) => (
              <div key={i} style={{ background: $.bg, border: `1px solid ${$.border}`, borderRadius: "14px", padding: "18px", marginBottom: "10px", display: "flex", gap: "14px", boxShadow: "0 1px 3px rgba(0,0,0,0.04)" }}>
                <div style={{ width: "42px", height: "42px", borderRadius: "12px", background: sup.color + "14", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "17px", fontWeight: 700, color: sup.color, flexShrink: 0 }}>{sup.avatar}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "5px", flexWrap: "wrap", gap: "8px" }}>
                    <div>
                      <div style={{ fontSize: "15px", fontWeight: 600, marginBottom: "1px" }}>{sup.name}</div>
                      <div style={{ fontSize: "12px", color: $.dim }}>{sup.loc} · {sup.spec}</div>
                    </div>
                    <div style={{ background: $.goldPale, borderRadius: "999px", padding: "3px 10px", fontSize: "11px", fontWeight: 600, color: $.gold }}>⏳ Reviewing your brief</div>
                  </div>
                  <div style={{ display: "flex", gap: "14px", fontSize: "12px", color: $.faint, marginTop: "6px" }}><span>⭐ {sup.rating}</span><span>{sup.projects} projects</span><span style={{ color: $.green }}>✓ Verified</span></div>
                </div>
              </div>
            ))}

            <div style={{ textAlign: "center", fontSize: "12px", color: $.faint, marginTop: "18px", lineHeight: 1.6 }}>Suppliers contact you directly by email or phone once they've reviewed your brief.<br />Reply to the confirmation email to update your specs.</div>
          </div>)}

        </div>
      </div>
    </div>
  );
}