/* global React */

// ============================================================
// Coverage / map — no fake $ volumes
// ============================================================
function Coverage() {
  const regions = [
    {
      key: "gulf",
      kicker: "Region 01",
      title: "The Gulf",
      lede: "Six member nations of the Gulf Cooperation Council, served from Pacific origin via authorised United States distribution.",
      countries: [
        { code: "KSA", name: "Saudi Arabia",         sub: "Riyadh · Jeddah · Dammam" },
        { code: "UAE", name: "United Arab Emirates", sub: "Dubai · Abu Dhabi · Sharjah" },
        { code: "QAT", name: "Qatar",                sub: "Doha · Al Wakrah" },
        { code: "KWT", name: "Kuwait",               sub: "Kuwait City · Hawalli" },
        { code: "OMN", name: "Oman",                 sub: "Muscat · Salalah" },
        { code: "BHR", name: "Bahrain",              sub: "Manama · Riffa" },
      ],
    },
    {
      key: "latam",
      kicker: "Region 02",
      title: "Latin America",
      lede: "Aesthetic and surgical clinics across the corridor we serve directly from Los Angeles.",
      countries: [
        { code: "MEX", name: "Mexico",   sub: "Mexico City · Guadalajara · Monterrey" },
        { code: "COL", name: "Colombia", sub: "Bogotá · Medellín · Cali" },
        { code: "PAN", name: "Panama",   sub: "Panama City · Colón" },
      ],
    },
  ];

  return (
    <section className="section section-clean" id="coverage">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="num">§ 04 · Coverage</div>
            <h2>Two regions,<br/><em>one consignor.</em></h2>
          </div>
          <p className="desc">
            Top Medical operates from Los Angeles — the Pacific gateway for American aesthetic and medical product. From a single point of consignment, we serve clinics, hospitals, and ministries across the Gulf and Latin America.
          </p>
        </div>

        <div className="coverage-board">
          <div className="cv-origin">
            <div className="cv-origin-tag">— Origin</div>
            <div className="cv-origin-name">Los Angeles<br/><em>California</em></div>
            <div className="cv-origin-meta">
              <span>33.94° N</span>
              <span>118.40° W</span>
            </div>
            <div className="cv-origin-rule"></div>
            <div className="cv-origin-foot">Pacific gateway · Established 2021</div>
          </div>

          <div className="cv-regions">
            {regions.map((r) => (
              <div key={r.key} className="cv-region">
                <div className="cv-region-head">
                  <span className="cv-region-kicker">{r.kicker}</span>
                  <h3 className="cv-region-title">{r.title}</h3>
                  <p className="cv-region-lede">{r.lede}</p>
                </div>
                <div className="cv-country-list">
                  {r.countries.map((c) => (
                    <div key={c.code} className="cv-country">
                      <span className="cv-country-code">{c.code}</span>
                      <span className="cv-country-body">
                        <span className="cv-country-name">{c.name}</span>
                        <span className="cv-country-sub">{c.sub}</span>
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}


// ============================================================
// Editorial / why us — no fake quote attribution
// ============================================================
function Editorial() {
  const features = [
    { n: "i",   t: "Authorised & authentic", d: "Every filler, neuromodulator, implant, and device is sourced through authorised United States distribution. Lots are verified against manufacturer registries before purchase." },
    { n: "ii",  t: "Cold chain for biologics", d: "Validated 2–8°C lanes for fillers and toxins, with continuous data loggers and deviation reporting. Good distribution practice from Los Angeles to your refrigerator." },
    { n: "iii", t: "Documentation that clears customs", d: "Commercial invoice, FDA registration, free-sale certification, SFDA and MoH dossiers — prepared in-house and formatted for the receiving authority." },
    { n: "iv",  t: "One account, one point of contact", d: "A single account manager holds your engagement end to end. We work Pacific hours and remain available on the channels your team already uses." },
  ];
  return (
    <section className="section section-sage" id="why">
      <div className="wrap">
        <div className="editorial-grid">
          <div>
            <div className="num eyebrow" style={{ marginBottom: 24 }}>§ 05 · Approach</div>
            <p className="editorial-quote">
              The best aesthetic clinics in the Gulf and Latin America should not have to choose between authentic American product and a delivery date that fits their schedule. We make sure they do not.
            </p>
            <div className="editorial-attr">
              <span className="ea-rule"></span>
              <span>Top Medical · Los Angeles · Established 2021</span>
            </div>
          </div>
          <div className="feature-list">
            {features.map((f) => (
              <div key={f.n} className="feature-row">
                <div className="fr-num">{f.n}</div>
                <div>
                  <h5>{f.t}</h5>
                  <p>{f.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Coverage, Editorial });