/* global React */

// ============================================================
// Categories — Beauty & Plastic Surgery led
// ============================================================
function Categories() {
  const cats = [
    {
      num: "I",
      title: "Injectables & dermal fillers",
      desc: "Hyaluronic acid fillers, neuromodulators, biostimulators. Cold-chain validated and lot-traced from authorised United States distribution.",
    },
    {
      num: "II",
      title: "Plastic surgery implants",
      desc: "Breast, gluteal, facial, and pectoral implants. Sterile, FDA-cleared, with full traceability cards.",
    },
    {
      num: "III",
      title: "Energy-based devices",
      desc: "Laser, RF, HIFU, cryolipolysis, and IPL platforms. New and certified pre-owned with installation and clinical training.",
    },
    {
      num: "IV",
      title: "Cosmeceuticals & post-procedure",
      desc: "Medical-grade serums, peels, and post-procedure care from American clinical brands, in commercial volumes.",
    },
    {
      num: "V",
      title: "Surgical instruments",
      desc: "Liposuction systems, electrosurgical units, surgical lighting, OR tables, autoclaves, and sterilisation.",
    },
    {
      num: "VI",
      title: "Adjacent medical",
      desc: "Imaging, cardiac, disposables, PPE, and laboratory equipment for hospitals and ministries of health.",
    },
  ];

  return (
    <section className="section section-champagne" id="categories">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="num">§ 02 · Specialty</div>
            <h2>Aesthetic-led,<br/><em>medical-wide.</em></h2>
          </div>
          <p className="desc">
            Our specialty is beauty and plastic surgery. We curate fillers, implants, energy-based devices, and cosmeceuticals from authorised United States distribution — and we extend the catalogue to cover the broader medical needs of the clinics and hospitals we serve.
          </p>
        </div>

        <div className="cat-grid">
          {cats.map((c) => (
            <div key={c.num} className="cat-card">
              <CatGlyph kind={c.num} />
              <div className="cat-num">
                <span>{c.num}</span>
                <span className="cat-arrow">→</span>
              </div>
              <h3>{c.title}</h3>
              <p className="cat-desc">{c.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CatGlyph({ kind }) {
  const map = {
    "I":   <g stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round"><path d="M30 130 L100 60"/><path d="M90 50 L120 80 L110 90 L80 60 Z"/><path d="M115 75 L140 100"/><path d="M50 110 L60 120"/></g>,
    "II":  <g stroke="currentColor" strokeWidth="1.4" fill="none"><ellipse cx="80" cy="80" rx="50" ry="38"/><ellipse cx="80" cy="80" rx="30" ry="22"/><path d="M30 80 Q80 40 130 80"/></g>,
    "III": <g stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round"><rect x="30" y="60" width="80" height="30" rx="3"/><path d="M110 75 L150 75"/><path d="M40 100 L40 130 M60 100 L60 130 M80 100 L80 130 M100 100 L100 130"/></g>,
    "IV":  <g stroke="currentColor" strokeWidth="1.4" fill="none"><rect x="55" y="40" width="50" height="20" rx="2"/><path d="M60 60 L60 130 L100 130 L100 60"/><path d="M60 80 L100 80"/><path d="M70 100 L90 100"/></g>,
    "V":   <g stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round"><path d="M30 130 L90 70 L110 90 L50 150 Z" transform="translate(0 -20)"/><path d="M90 50 L130 30"/><circle cx="125" cy="35" r="3"/></g>,
    "VI":  <g stroke="currentColor" strokeWidth="1.4" fill="none"><circle cx="80" cy="80" r="50"/><path d="M80 50 L80 110 M50 80 L110 80"/></g>,
  };
  return <svg className="cat-glyph" viewBox="0 0 160 160">{map[kind]}</svg>;
}

// ============================================================
// Process / How it works
// ============================================================
function Process() {
  const steps = [
    { n: "I",   t: "Enquiry", d: "Send your list — purchase order, parts list, or a brief from your clinical team. Model numbers, quantities, and destination." },
    { n: "II",  t: "Sourcing", d: "We source through authorised United States distribution and verify every lot, expiry, and FDA registration before purchase." },
    { n: "III", t: "Logistics", d: "Validated cold chain for biologics. Air or ocean freight from Los Angeles. We prepare the export and customs documentation." },
    { n: "IV",  t: "Delivery", d: "Customs cleared, last-mile arranged. We hand off at your clinic or hospital — refrigerated where required." },
  ];
  return (
    <section className="section" id="process">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="num">§ 03 · Process</div>
            <h2>From enquiry<br/><em>to treatment room.</em></h2>
          </div>
          <p className="desc">
            Most freight forwarders stop at the port. We don't. Each engagement is held by a single account manager — one point of contact, from purchase order to handover.
          </p>
        </div>
        <div className="process">
          {steps.map((s) => (
            <div key={s.n} className="step">
              <div className="step-num">{s.n}<small>step</small></div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Categories, Process });