// Client view — UK sender booking a shipment to Nigeria + my shipments
const { useState: useStateClient, useMemo: useMemoClient } = React;

const CL_PRICING = window.FOLFEM_DATA.pricing;
const CL_COMPANY = window.FOLFEM_DATA.company;

// Folfem services available to UK senders — each maps to a real rate model
const SERVICE_OPTIONS = [
  { key: "Air Freight", mode: "Air", model: "airPerKg", icon: "plane", desc: "3–5 days · per kg", note: "£6.50/kg plus a £20 service charge. Fastest — best for urgent or high-value goods." },
  { key: "Sea Freight (LCL)", mode: "Sea", model: "seaLcl", icon: "ship", desc: "4–6 weeks · per cu ft", note: "£18 per cubic foot. Most economical for bulky, non-urgent cargo." },
  { key: "Barrel Shipping", mode: "Sea", model: "barrel", icon: "barrel", desc: "Diaspora barrels", note: "£55 per barrel. Send foodstuff, clothing & gifts to family." },
  { key: "Pallet", mode: "Sea", model: "pallet", icon: "pallet", desc: "Half or full pallet", note: "£180 half · £300 full. Palletised commercial consignments." },
  { key: "Full Container (20ft)", mode: "Sea", model: "container", icon: "hub", desc: "20ft FCL · from £1,100", note: "From £1,100. Final quote depends on route & contents — we'll confirm." },
];

// Folfem delivers door-to-door across Nigeria
const DEST_CITIES = ["Lagos", "Abuja", "Port Harcourt", "Ibadan", "Kano", "Other (interstate)"];
const LOCAL_CITIES = ["Lagos", "Abuja"]; // £20 door-step; everywhere else £30

// Full granular detail for one shipment — opened from "Your shipments".
const CL_STAGE_HINT = {
  Booked: "Booked — awaiting UK collection.",
  Collected: "Picked up in the UK, heading to our export hub.",
  Export: "At our UK export hub, being consolidated for departure.",
  Transit: "In transit to Nigeria.",
  Arrived: "Landed in Nigeria, awaiting customs clearance.",
  Customs: "Clearing import customs with Folfem brokerage.",
  OutForDelivery: "Out for delivery to your recipient's door.",
  Delivered: "Delivered and confirmed.",
};

const DetailRow = ({ k, v, mono }) => (
  <div className="summary-row"><span className="k">{k}</span><span className={"v" + (mono ? " mono" : "")}>{v}</span></div>
);

const LegCard = ({ icon, tag, name, addr, contact, phone, time, accent }) => (
  <div className={"leg-card" + (accent ? " " + accent : "")}>
    <div className="leg-ic"><FFIcon name={icon} size={16} /></div>
    <div className="leg-body">
      <div className="leg-tag">{tag}</div>
      {name && <div className="leg-name">{name}</div>}
      {addr && <div className="leg-line">{addr}</div>}
      {contact && <div className="leg-line">{contact}{phone ? " · " + phone : ""}</div>}
      {!contact && phone && <div className="leg-line">{phone}</div>}
      {time && <div className="leg-time">{time}</div>}
    </div>
  </div>
);

const ShipmentDetail = ({ job, onBack }) => {
  const j = job;
  const delivered = j.stage === "Delivered";
  return (
    <div className="detail-wrap">
      <div className="detail-shell">
        <button className="detail-back" onClick={onBack}>
          <FFIcon name="arrow" size={15} style={{ transform: "rotate(180deg)" }} />
          Your shipments
        </button>

        <div className="detail-head">
          <div>
            <div className="detail-id">{j.id} <ModeBadge mode={j.mode} service={j.service} size="lg" /></div>
            <div className="detail-route">{j.origin.name} <span className="sep">→</span> {j.delivery.name}</div>
            <div className="detail-hint">{CL_STAGE_HINT[j.stage] || ""}</div>
          </div>
          <div className="detail-head-right">
            <StageChip stage={j.stage} />
            <div className="detail-eta"><span>ETA</span><strong>{j.eta}</strong></div>
          </div>
        </div>

        <div className="card detail-journey-card">
          <JourneyTracker stage={j.stage} mode={j.mode} eta={j.eta} />
        </div>

        <div className="detail-grid">
          <div>
            <div className="detail-section-label">Route</div>
            <div className="leg-stack">
              <LegCard icon="home" tag="🇬🇧 Collected from (UK)" name={j.origin.name} addr={j.origin.addr} contact={j.origin.contact} phone={j.origin.phone} time={j.origin.time} accent="uk" />
              <LegCard icon="hub" tag="Folfem hub" name={j.hub && j.hub.name} addr={j.hub && j.hub.addr} accent="hub" />
              <LegCard icon="pin" tag="🇳🇬 Deliver to (Nigeria)" name={j.delivery.name} addr={j.delivery.addr} phone={j.delivery.phone} time={j.delivery.time} accent="ng" />
            </div>

            {j.otp && (
              <div className={"otp-callout" + (j.otpDelivered ? " done" : "")}>
                <div className="otp-ic"><FFIcon name="shield" size={18} /></div>
                <div>
                  <div className="otp-k">Delivery OTP</div>
                  <div className="otp-v">{j.otp}</div>
                  <div className="otp-note">{j.otpDelivered ? "Verified on delivery." : "Your recipient gives this code to the Folfem driver to confirm receipt."}</div>
                </div>
              </div>
            )}
          </div>

          <div>
            <div className="detail-section-label">Shipment details</div>
            <div className="card detail-facts">
              <DetailRow k="Service" v={j.service || j.cargoType} />
              <DetailRow k="Mode" v={j.mode === "Sea" ? "Sea freight" : "Air freight"} />
              <DetailRow k="Carrier / routing" v={j.mode_carrier || "—"} />
              <DetailRow k="Contents" v={j.contents} />
              <DetailRow k="Declared value" v={j.declaredValue ? formatGBP(j.declaredValue) : "—"} mono />
              <DetailRow k="Booked" v={j.createdAt} />
              <DetailRow k="ETA" v={j.eta} />
              <div className="summary-total">
                <span className="k">Amount paid</span>
                <span className="v">{formatGBP(j.price)}</span>
              </div>
            </div>

            <div className="detail-section-label" style={{ marginTop: 20 }}>Tracking history</div>
            <div className="card detail-timeline">
              {[...j.events].slice().reverse().map((e, i) => {
                const isLatest = i === 0;
                return (
                  <div className={"tl-row" + (isLatest ? " latest" : "")} key={i}>
                    <div className="tl-rail">
                      <span className="tl-dot">{isLatest && !delivered ? <span className="tl-pulse" /> : <FFIcon name="check" size={9} stroke={3} />}</span>
                      {i < j.events.length - 1 && <span className="tl-line" />}
                    </div>
                    <div className="tl-body">
                      <div className="tl-top"><span className="tl-stage">{stageMeta(e.k).short}</span><span className="tl-time">{e.t}</span></div>
                      <div className="tl-text">{e.text}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        <div className="detail-footer">
          <span>Questions about this shipment?</span>
          <a className="btn" href={"tel:" + CL_COMPANY.phoneNG.replace(/\s/g, "")}><FFIcon name="phone" size={14} /> Call Folfem NG</a>
          <a className="btn" href={"mailto:" + CL_COMPANY.email + "?subject=" + encodeURIComponent("Shipment " + j.id)}><FFIcon name="mail" size={14} /> Email support</a>
        </div>
      </div>
    </div>
  );
};

const ClientView = ({ jobs, addJob, currentClient, initialService }) => {
  const [selectedId, setSelectedId] = useStateClient(null);
  const [form, setForm] = useStateClient({
    service: initialService || "Air Freight",
    // Collection (UK)
    ukCollection: true,
    pickupName: "", pickupAddr: "", pickupPostcode: "", pickupContact: "", pickupPhone: "",
    // Delivery (Nigeria)
    destCity: "Lagos",
    deliveryName: "", deliveryAddr: "", deliveryPhone: "",
    // Cargo measures (used per rate model)
    weight: "",        // air, kg
    volume: "",        // sea LCL, cubic feet
    barrels: "",       // barrel shipping
    palletType: "half",
    palletQty: "1",
    // Contents / customs
    contents: "",
    declaredValue: "",
    insurance: false,
    notes: "",
  });

  const myJobs = useMemoClient(
    () => jobs.filter(j => j.client === currentClient).slice(0, 6),
    [jobs, currentClient]
  );

  const selectedJob = useMemoClient(
    () => myJobs.find(j => j.id === selectedId) || null,
    [myJobs, selectedId]
  );

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const svc = SERVICE_OPTIONS.find(s => s.key === form.service) || SERVICE_OPTIONS[0];
  const isInterstate = !LOCAL_CITIES.includes(form.destCity);

  const valid =
    form.pickupAddr && form.pickupPostcode && form.pickupContact &&
    form.deliveryAddr && form.deliveryName && form.deliveryPhone && form.contents;

  // Live GBP quote from Folfem's real rate card
  const quote = useMemoClient(() => {
    const R = CL_PRICING.rates;
    const kg = parseFloat(form.weight) || 0;
    const cuft = parseFloat(form.volume) || 0;
    const barrels = parseInt(form.barrels, 10) || 0;
    const palletQty = parseInt(form.palletQty, 10) || 0;
    const dv = parseFloat(form.declaredValue) || 0;

    let freight = 0;
    let freightLabel = "—";
    switch (svc.model) {
      case "airPerKg":
        freight = kg * R.airPerKg;
        freightLabel = kg ? `${kg} kg × £${R.airPerKg.toFixed(2)}` : "—";
        break;
      case "seaLcl":
        freight = cuft * R.seaLclPerCuFt;
        freightLabel = cuft ? `${cuft} cu ft × £${R.seaLclPerCuFt}` : "—";
        break;
      case "barrel":
        freight = barrels * R.barrel;
        freightLabel = barrels ? `${barrels} × £${R.barrel}` : "—";
        break;
      case "pallet":
        freight = palletQty * (form.palletType === "full" ? R.fullPallet : R.halfPallet);
        freightLabel = `${palletQty || 0} × ${form.palletType === "full" ? "full" : "half"} (£${form.palletType === "full" ? R.fullPallet : R.halfPallet})`;
        break;
      case "container":
        freight = R.container20ft;
        freightLabel = `20ft FCL · from £${R.container20ft.toLocaleString()}`;
        break;
      default: break;
    }

    const serviceFee = R.serviceFee;
    const collection = form.ukCollection ? CL_PRICING.collection.default : 0;
    const delivery = isInterstate ? CL_PRICING.delivery.interstate : CL_PRICING.delivery.lagosAbuja;
    const insurance = form.insurance ? Math.max(25, Math.round(dv * 0.02)) : 0;
    const total = Math.round(freight + serviceFee + collection + delivery + insurance);
    return { freight: Math.round(freight), freightLabel, serviceFee, collection, delivery, insurance, total, fromPrice: svc.model === "container" };
  }, [form.service, form.weight, form.volume, form.barrels, form.palletType, form.palletQty, form.declaredValue, form.insurance, form.ukCollection, form.destCity]);

  const estPrice = quote.total;

  const newId = () => "FF-" + (80428 + Math.floor(Math.random() * 400));

  const submit = () => {
    if (!valid) return;
    const id = newId();
    const hubByCity = {
      Lagos: "Folfem Lagos Hub", Abuja: "Folfem Abuja Hub", "Port Harcourt": "Folfem Lagos Hub",
      Ibadan: "Folfem Lagos Hub", Kano: "Folfem Abuja Hub", "Other (interstate)": "Folfem Lagos Hub",
    };
    const measure =
      svc.model === "airPerKg" ? (form.weight ? ` • ${form.weight} kg` : "")
      : svc.model === "seaLcl" ? (form.volume ? ` • ${form.volume} cu ft` : "")
      : svc.model === "barrel" ? (form.barrels ? ` • ${form.barrels} barrel(s)` : "")
      : svc.model === "pallet" ? ` • ${form.palletQty} ${form.palletType} pallet(s)`
      : svc.model === "container" ? " • 20ft container" : "";
    addJob({
      id,
      client: currentClient,
      mode: svc.mode,
      service: form.service,
      contents: form.contents + measure,
      cargoType: form.service,
      cargoDetail: form.contents + measure,
      declaredValue: parseFloat(form.declaredValue) || 0,
      origin: { name: form.pickupName || form.pickupAddr.split(",")[0], addr: `${form.pickupAddr}, ${form.pickupPostcode}`, contact: form.pickupContact, phone: form.pickupPhone, time: form.ukCollection ? "Awaiting collection" : "Awaiting drop-off" },
      hub: { name: hubByCity[form.destCity] || "Folfem Lagos Hub", addr: form.destCity },
      delivery: { name: form.deliveryName, addr: `${form.deliveryAddr}, ${form.destCity}, Nigeria`, contact: form.deliveryName, phone: form.deliveryPhone, time: "Est. on arrival" },
      driverId: null,
      status: "Pending",
      stage: "Booked",
      otp: null,
      mode_carrier: svc.mode === "Sea" ? "Sea — routing TBC" : "Air — routing TBC",
      eta: svc.mode === "Sea" ? "4–6 weeks" : "3–5 days",
      price: estPrice,
      createdAt: new Date().toISOString().slice(0, 16).replace("T", " "),
      events: [{ t: new Date().toTimeString().slice(0, 5), k: "Booked", text: `Shipment booked by ${currentClient} — ${form.ukCollection ? "awaiting UK collection" : "awaiting UK drop-off"}` }],
    });
    setForm(f => ({ ...f, pickupAddr: "", pickupPostcode: "", pickupContact: "", pickupPhone: "", deliveryName: "", deliveryAddr: "", deliveryPhone: "", contents: "", weight: "", volume: "", barrels: "", declaredValue: "", notes: "" }));
  };

  if (selectedJob) {
    return <ShipmentDetail job={selectedJob} onBack={() => setSelectedId(null)} />;
  }

  return (
    <div className="client-wrap">
      <div className="client-shell">
        <div>
          <div className="client-hero">
            <h1>Ship to Nigeria</h1>
            <p>Logged in as <strong>{currentClient}</strong>. Book a UK collection and we'll handle freight, customs and last-mile delivery to your recipient's door in Nigeria.</p>
          </div>

          <div className="card" style={{ marginBottom: 20 }}>
            <div className="form-section">
              <div className="section-head">
                <div>
                  <h3>Service</h3>
                  <div className="card-sub">How should we move it from the UK?</div>
                </div>
                <span className="section-num">01</span>
              </div>

              <div className="cargo-grid">
                {SERVICE_OPTIONS.map(o => (
                  <button key={o.key} className={"cargo-card" + (form.service === o.key ? " selected" : "")} onClick={() => set("service", o.key)} type="button">
                    <span className="glyph"><FFIcon name={o.icon} size={20} /></span>
                    <span className="name">{o.key}</span>
                    <span className="desc">{o.desc}</span>
                  </button>
                ))}
              </div>
              <div className="svc-note"><FFIcon name="globe" size={14} /><span>{svc.note}</span></div>
            </div>

            <div className="form-section">
              <div className="section-head">
                <div>
                  <h3>Collection &amp; delivery</h3>
                  <div className="card-sub">UK pickup and your Nigeria recipient</div>
                </div>
                <span className="section-num">02</span>
              </div>

              <div className="route-stack">
                <div className="route-row">
                  <div className="route-rail">
                    <span className="route-pin" />
                    <span className="route-line" />
                  </div>
                  <div className="route-fields">
                    <span className="label">🇬🇧 Collect from (UK)</span>
                    <label className="check-row" style={{ margin: "8px 0 2px" }}>
                      <input type="checkbox" checked={form.ukCollection} onChange={e => set("ukCollection", e.target.checked)} />
                      <span><strong>Folfem UK collection</strong> — we pick up from your door (+{formatGBP(CL_PRICING.collection.default)}). Untick to drop off at our UK office.</span>
                    </label>
                    <div style={{ display: "grid", gap: 10, marginTop: 6 }}>
                      <input className="input" placeholder="Pickup address (e.g. Unit 4, Barking Industrial Park, London)" value={form.pickupAddr} onChange={e => set("pickupAddr", e.target.value)} />
                      <div className="row">
                        <input className="input" placeholder="Postcode (e.g. IG11 8BL)" value={form.pickupPostcode} onChange={e => set("pickupPostcode", e.target.value)} />
                        <input className="input" placeholder="Contact name" value={form.pickupContact} onChange={e => set("pickupContact", e.target.value)} />
                      </div>
                      <input className="input" placeholder="UK phone (+44…)" value={form.pickupPhone} onChange={e => set("pickupPhone", e.target.value)} />
                    </div>
                  </div>
                </div>

                <div className="route-row">
                  <div className="route-rail">
                    <span className="route-pin dest" />
                  </div>
                  <div className="route-fields">
                    <span className="label">🇳🇬 Deliver to (Nigeria)</span>
                    <div style={{ display: "grid", gap: 10, marginTop: 6 }}>
                      <select className="select" value={form.destCity} onChange={e => set("destCity", e.target.value)}>
                        {DEST_CITIES.map(c => <option key={c} value={c}>{c}</option>)}
                      </select>
                      <div style={{ fontSize: 11, color: "var(--muted)" }}>
                        Door-step delivery: {isInterstate ? `interstate ${formatGBP(CL_PRICING.delivery.interstate)}` : `Lagos & Abuja ${formatGBP(CL_PRICING.delivery.lagosAbuja)}`}
                      </div>
                      <input className="input" placeholder="Recipient name" value={form.deliveryName} onChange={e => set("deliveryName", e.target.value)} />
                      <input className="input" placeholder="Delivery address (street, area)" value={form.deliveryAddr} onChange={e => set("deliveryAddr", e.target.value)} />
                      <input className="input" placeholder="Recipient phone (+234…)" value={form.deliveryPhone} onChange={e => set("deliveryPhone", e.target.value)} />
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className="form-section">
              <div className="section-head">
                <div>
                  <h3>Contents &amp; customs</h3>
                  <div className="card-sub">Declared value drives import duty &amp; insurance</div>
                </div>
                <span className="section-num">03</span>
              </div>

              <div style={{ display: "grid", gap: 12 }}>
                <div className="field">
                  <label>What's inside?</label>
                  <textarea className="textarea" placeholder="Describe the goods — e.g. 1 barrel foodstuff & clothing, 2 cartons cosmetics…" value={form.contents} onChange={e => set("contents", e.target.value)} />
                </div>
                <div className="row">
                  {svc.model === "airPerKg" && (
                    <div className="field">
                      <label>Total weight (kg) · £{CL_PRICING.rates.airPerKg.toFixed(2)}/kg</label>
                      <input className="input" placeholder="e.g. 64" value={form.weight} onChange={e => set("weight", e.target.value)} />
                    </div>
                  )}
                  {svc.model === "seaLcl" && (
                    <div className="field">
                      <label>Volume (cubic feet) · £{CL_PRICING.rates.seaLclPerCuFt}/cu ft</label>
                      <input className="input" placeholder="e.g. 30" value={form.volume} onChange={e => set("volume", e.target.value)} />
                    </div>
                  )}
                  {svc.model === "barrel" && (
                    <div className="field">
                      <label>Number of barrels · £{CL_PRICING.rates.barrel} each</label>
                      <input className="input" placeholder="e.g. 3" value={form.barrels} onChange={e => set("barrels", e.target.value)} />
                    </div>
                  )}
                  {svc.model === "pallet" && (
                    <div className="field">
                      <label>Pallets</label>
                      <div style={{ display: "flex", gap: 8 }}>
                        <select className="select" value={form.palletType} onChange={e => set("palletType", e.target.value)} style={{ flex: 1 }}>
                          <option value="half">Half pallet (£{CL_PRICING.rates.halfPallet})</option>
                          <option value="full">Full pallet (£{CL_PRICING.rates.fullPallet})</option>
                        </select>
                        <input className="input" style={{ width: 72 }} placeholder="Qty" value={form.palletQty} onChange={e => set("palletQty", e.target.value)} />
                      </div>
                    </div>
                  )}
                  {svc.model === "container" && (
                    <div className="field">
                      <label>Container</label>
                      <div className="input" style={{ display: "flex", alignItems: "center", color: "var(--muted)" }}>20ft FCL — from £{CL_PRICING.rates.container20ft.toLocaleString()}</div>
                    </div>
                  )}
                  <div className="field">
                    <label>Declared value (£)</label>
                    <input className="input" placeholder="e.g. 720" value={form.declaredValue} onChange={e => set("declaredValue", e.target.value)} />
                  </div>
                </div>
                <label className="check-row">
                  <input type="checkbox" checked={form.insurance} onChange={e => set("insurance", e.target.checked)} />
                  <span><strong>Transit insurance</strong> — cover against loss or damage (2% of declared value, min £25)</span>
                </label>
                <div className="svc-note"><FFIcon name="shield" size={14} /><span>Customs clearance is handled by Folfem brokerage and <strong>quoted separately</strong> based on declared value.</span></div>
              </div>
            </div>
          </div>

          {myJobs.length > 0 && (
            <div className="card my-jobs">
              <div className="card-head">
                <div>
                  <div className="card-title">Your shipments</div>
                  <div className="card-sub">{myJobs.length} in progress or delivered · tap to view details</div>
                </div>
              </div>
              {myJobs.map(j => (
                <button key={j.id} className="my-job ship clickable" onClick={() => setSelectedId(j.id)} type="button">
                  <div className="my-job-top">
                    <div>
                      <div className="jid">{j.id} <ModeBadge mode={j.mode} service={j.service} /></div>
                      <div className="jroute">{j.origin.name} <span style={{ color: "var(--muted)", fontWeight: 400 }}>→</span> {j.delivery.name}</div>
                      <div className="jmeta">{j.contents} • {formatGBP(j.price)} • ETA {j.eta}</div>
                    </div>
                    <span className="my-job-act"><StageChip stage={j.stage} /><FFIcon name="chev" size={16} style={{ color: "var(--soft)" }} /></span>
                  </div>
                  <JourneyTracker stage={j.stage} mode={j.mode} compact />
                </button>
              ))}
            </div>
          )}
        </div>

        <div>
          <div className="card summary-card">
            <div className="card-head">
              <div>
                <div className="card-title">Quote</div>
                <div className="card-sub">Estimated, in GBP</div>
              </div>
            </div>
            <div style={{ padding: "14px 18px 18px" }}>
              <div className="summary-row"><span className="k">Service</span><span className="v">{form.service}</span></div>
              <div className="summary-row"><span className="k">Route</span><span className="v">UK → {form.destCity}</span></div>
              <div className="summary-row"><span className="k">Freight {quote.freightLabel !== "—" ? `(${quote.freightLabel})` : ""}</span><span className="v mono">{quote.freight ? formatGBP(quote.freight) : "—"}</span></div>
              <div className="summary-row"><span className="k">Service charge</span><span className="v mono">{formatGBP(quote.serviceFee)}</span></div>
              <div className="summary-row"><span className="k">UK collection</span><span className="v mono">{quote.collection ? formatGBP(quote.collection) : "—"}</span></div>
              <div className="summary-row"><span className="k">Door-step delivery</span><span className="v mono">{formatGBP(quote.delivery)}</span></div>
              <div className="summary-row"><span className="k">Insurance</span><span className="v mono">{quote.insurance ? formatGBP(quote.insurance) : "—"}</span></div>
              <div className="summary-row"><span className="k">Customs clearance</span><span className="v" style={{ fontSize: 11, color: "var(--muted)" }}>Quoted separately</span></div>
              <div className="summary-total">
                <span className="k">Estimated total</span>
                <span className="v">{quote.fromPrice ? "from " : ""}{formatGBP(estPrice)}</span>
              </div>
              <button className="btn btn-primary btn-block btn-lg" style={{ marginTop: 14 }} onClick={submit} disabled={!valid}>
                <FFIcon name="check" size={16} />
                Book shipment
              </button>
              <p style={{ fontSize: 11, color: "var(--muted)", textAlign: "center", marginTop: 10 }}>
                Estimate excludes customs duties. We'll confirm UK collection and email a tracking link.
              </p>
            </div>
          </div>

          <div className="card trust-card">
            <div className="trust-row"><span className="trust-ic"><FFIcon name="shield" size={16} /></span><div><strong>Customs handled end-to-end</strong><span>Import duties cleared by Folfem brokers in Nigeria.</span></div></div>
            <div className="trust-row"><span className="trust-ic"><FFIcon name="hub" size={16} /></span><div><strong>Offices in Birmingham, Ikeja &amp; Alaba</strong><span>Local teams for final-mile to the recipient's door.</span></div></div>
            <div className="trust-row"><span className="trust-ic"><FFIcon name="phone" size={16} /></span><div><strong>Talk to us</strong><span>UK {CL_COMPANY.phoneUK} · NG {CL_COMPANY.phoneNG}</span></div></div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.ClientView = ClientView;