/* global React */
const { useState, useEffect, useRef } = React;

// ============================================================
// Brand mark — elegant monogram
// ============================================================
function BrandMark({ size = 40 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="20" cy="20" r="19" fill="none" stroke="var(--ink)" strokeWidth="1"/>
      <text x="20" y="26" textAnchor="middle" fontFamily="Fraunces, serif" fontSize="20"
            fontWeight="500" fill="var(--ink)" fontStyle="italic">tm</text>
      <circle cx="32" cy="9" r="2" fill="var(--signal)"/>
    </svg>
  );
}

// ============================================================
// Slim eyebrow strip — no fake shipment data
// ============================================================
function UtilityBar() {
  return (
    <div className="utility-bar">
      <div className="utility-inner">
        <span className="ub-item"><span className="ub-dash"></span>Los Angeles · Established 2021</span>
        <span className="ub-item">Serving the GCC: KSA · UAE · Qatar · Kuwait · Oman · Bahrain</span>
        <span className="ub-item ub-end">Authorized US distribution · FDA-registered facility</span>
      </div>
    </div>
  );
}

// ============================================================
// Nav
// ============================================================
function Nav() {
  return (
    <nav className="nav">
      <div className="color-strip" aria-hidden="true">
        <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
      </div>
      <div className="wrap nav-inner">
        <a href="#top" className="brand">
          <BrandMark />
          <div className="brand-name"><em>Top</em> Medical<small>Los Angeles</small></div>
        </a>
        <div className="nav-links">
          <a href="#categories">Specialty</a>
          <a href="#process">Process</a>
          <a href="#coverage">Coverage</a>
          <a href="#why">Approach</a>
          <a href="#quote">Enquire</a>
        </div>
        <div className="nav-cta">
          <a className="btn btn-ghost" href="#quote">Request consultation</a>
        </div>
      </div>
    </nav>
  );
}

// ============================================================
// Hero — elegant editorial composition, no fake manifest
// ============================================================
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="wrap hero-grid">
        <div className="hero-text">
          <div className="hero-eyebrow">
            <span className="rule"></span>
            <span>Aesthetic supply, sourced in Los Angeles</span>
          </div>
          <h1 className="headline">
            American beauty,<br/>
            <em>sourced with</em><br/>
            discretion.
          </h1>
          <p className="hero-lede">
            Top Medical is a Los Angeles supplier specialising in beauty and plastic surgery — fillers, implants, energy-based devices, and cosmeceuticals — sourced from authorised United States distributors and delivered to clinics, hospitals, and ministries across the Gulf and Latin America.
          </p>
          <div className="hero-cta">
            <a className="btn btn-primary" href="#quote">
              Request a consultation
              <svg className="btn-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
                <path d="M5 12h14M13 5l7 7-7 7"/>
              </svg>
            </a>
            <a className="btn btn-ghost" href="#categories">View specialty</a>
          </div>
        </div>
        <HeroVisual />
      </div>
    </section>
  );
}

function HeroVisual() {
  // an elegant editorial composition: large serif "tm" monogram with thin gold line work
  return (
    <div className="hero-visual">
      <svg viewBox="0 0 480 600" className="hv-svg" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="goldShine" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="oklch(76% 0.085 75)"/>
            <stop offset="50%" stopColor="oklch(68% 0.085 75)"/>
            <stop offset="100%" stopColor="oklch(56% 0.090 65)"/>
          </linearGradient>
        </defs>

        {/* corner registration marks */}
        <g stroke="var(--ink)" strokeWidth="0.6" fill="none" opacity="0.4">
          <path d="M20 20 L20 50 M20 20 L50 20"/>
          <path d="M460 20 L460 50 M460 20 L430 20"/>
          <path d="M20 580 L20 550 M20 580 L50 580"/>
          <path d="M460 580 L460 550 M460 580 L430 580"/>
        </g>

        {/* thin oval frame */}
        <ellipse cx="240" cy="300" rx="180" ry="240" fill="none" stroke="var(--ink)" strokeWidth="0.6" opacity="0.5"/>
        <ellipse cx="240" cy="300" rx="186" ry="246" fill="none" stroke="url(#goldShine)" strokeWidth="0.6" opacity="0.7"/>

        {/* horizontal hairlines */}
        <line x1="40" y1="120" x2="440" y2="120" stroke="var(--ink)" strokeWidth="0.4" opacity="0.25"/>
        <line x1="40" y1="480" x2="440" y2="480" stroke="var(--ink)" strokeWidth="0.4" opacity="0.25"/>

        {/* eyebrow text */}
        <text x="240" y="108" textAnchor="middle" fontFamily="JetBrains Mono, monospace"
              fontSize="9" letterSpacing="0.3em" fill="var(--ink-3)">— ESTD · MMXXI —</text>

        {/* monogram */}
        <text x="240" y="380" textAnchor="middle" fontFamily="Fraunces, serif"
              fontSize="280" fontWeight="300" fontStyle="italic" fill="var(--ink)">tm</text>

        {/* tiny gold dot */}
        <circle cx="320" cy="180" r="4" fill="url(#goldShine)"/>

        {/* footer text */}
        <text x="240" y="498" textAnchor="middle" fontFamily="Fraunces, serif"
              fontSize="13" fontStyle="italic" fill="var(--ink-2)">Top Medical · Los Angeles</text>
        <text x="240" y="520" textAnchor="middle" fontFamily="JetBrains Mono, monospace"
              fontSize="8" letterSpacing="0.3em" fill="var(--ink-3)">AESTHETIC · MEDICAL · LOGISTICS</text>
      </svg>
    </div>
  );
}

// ============================================================
// Trust strip — generic categories, no fake partner names
// ============================================================
function Trust() {
  const items = [
    "Injectables",
    "Implants",
    "Lasers & devices",
    "Cosmeceuticals",
    "Surgical",
    "Cold chain",
  ];
  return (
    <section className="trust">
      <div className="wrap trust-inner">
        <div className="trust-label">A specialty house for the modern aesthetic clinic</div>
        <div className="trust-logos">
          {items.map((p, i) => (
            <span key={p} className="logo">
              <span className="logo-num">{String(i+1).padStart(2,"0")}</span>
              <span>{p}</span>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { BrandMark, UtilityBar, Nav, Hero, Trust });
