// Client — Services page. Air, sea & land cargo between the UK and Nigeria.
const CS_DATA = window.FOLFEM_DATA;
const CS_SERVICES = CS_DATA.pricing.services;
const CS_COMPANY = CS_DATA.company;

// Presentation meta per service mode (lead-time + booking key for the form)
const CS_META = {
  Air: { cls: "air", lead: "3–5 days · charged per kg", bookKey: "Air Freight", cta: "Book air shipment" },
  Sea: { cls: "sea", lead: "4–6 weeks · FCL & LCL", bookKey: "Sea Freight (LCL)", cta: "Book sea shipment" },
  Land: { cls: "land", lead: "UK & Nigeria distribution", bookKey: null, cta: "Request a quote" },
};

const ServiceBlock = ({ svc, index, onBook }) => {
  const meta = CS_META[svc.mode] || CS_META.Air;
  return (
    <div className="card svc-block">
      <div className="svc-block-grid">
        <div className="svc-aside">
          <div className="svc-aside-top">
            <span className={"svc-icon " + meta.cls}><FFIcon name={svc.icon} size={26} /></span>
            <span className="svc-num">{String(index + 1).padStart(2, "0")}</span>
          </div>
          <h2>{svc.title}</h2>
          <div className="svc-lead"><FFIcon name="clock" size={13} /><span>{meta.lead}</span></div>
          <p>{svc.desc}</p>
          <div className="svc-cta">
            {meta.bookKey ? (
              <button className="btn btn-primary btn-block" onClick={() => onBook(meta.bookKey)}>
                <FFIcon name="arrow" size={15} />
                {meta.cta}
              </button>
            ) : (
              <a className="btn btn-block" href={"mailto:" + CS_COMPANY.email + "?subject=Land%20cargo%20enquiry"}>
                <FFIcon name="mail" size={15} />
                {meta.cta}
              </a>
            )}
          </div>
        </div>

        <div className="svc-feats">
          <div className="feat-label">What's included</div>
          {svc.features.map(f => (
            <div className="svc-feat" key={f}>
              <span className="tick"><FFIcon name="check" size={12} stroke={2.6} /></span>
              <span>{f}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const ClientServices = ({ onBook }) => {
  return (
    <div className="svc-wrap">
      <div className="svc-shell">
        <div className="svc-hero">
          <div className="svc-eyebrow">Services offered</div>
          <h1>Air, sea &amp; land cargo between the UK and Nigeria.</h1>
          <p>{CS_COMPANY.blurb} From a single barrel to a full container, we handle freight, customs clearance and last-mile delivery so your goods reach the right door.</p>
        </div>

        <div className="svc-list">
          {CS_SERVICES.map((svc, i) => (
            <ServiceBlock key={svc.title} svc={svc} index={i} onBook={onBook} />
          ))}
        </div>

        <div className="svc-cta-band">
          <div>
            <h3>Ready to ship?</h3>
            <p>Get an instant GBP quote and book a UK collection in minutes.</p>
          </div>
          <button className="btn svc-band-btn" onClick={() => onBook(null)}>
            Book a shipment
            <FFIcon name="arrow" size={15} />
          </button>
        </div>

        <div className="svc-contact">
          <div className="svc-contact-col">
            <h4>Talk to us</h4>
            <a href={"tel:" + CS_COMPANY.phoneUK.replace(/\s/g, "")}>UK · {CS_COMPANY.phoneUK}</a>
            <a href={"tel:" + CS_COMPANY.phoneNG.replace(/\s/g, "")}>NG · {CS_COMPANY.phoneNG}</a>
          </div>
          <div className="svc-contact-col">
            <h4>Email</h4>
            <a href={"mailto:" + CS_COMPANY.email}>{CS_COMPANY.email}</a>
          </div>
          <div className="svc-contact-col">
            <h4>Customs</h4>
            <p>Import duties &amp; clearance handled end-to-end by Folfem brokers — quoted separately on declared value.</p>
          </div>
        </div>
      </div>
    </div>
  );
};

window.ClientServices = ClientServices;