// Biolite — shared components: Nav, Footer, BookingModal, marks

const { useState, useEffect, useRef } = React;

// Small inline SVG of the brand fan mark (reproduces media/biolite-icon-gradient.svg colors)
function BrandMark({ size = 44, monotone = false }) {
  const fill = monotone ? "currentColor" : "url(#bm-grad)";
  return (
    <svg width={size} height={size} viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
      {!monotone && (
        <defs>
          <linearGradient id="bm-grad" x1="14.9" y1="0" x2="22.3" y2="50.6" gradientUnits="userSpaceOnUse">
            <stop stopColor="#FCEDC9" />
            <stop offset="1" stopColor="#EAC175" />
          </linearGradient>
        </defs>
      )}
      <path fillRule="evenodd" clipRule="evenodd" d="M24.5183 0H24.9511H25.4431C25.6284 1.22471 25.8501 2.44261 26.1083 3.6537C28.9598 17.123 36.0715 29.3248 46.3977 38.4648C47.3134 39.2793 48.2542 40.065 49.22 40.8219C49.0674 41.0967 48.9125 41.3692 48.7508 41.6394C47.6058 41.1913 46.4531 40.7757 45.2929 40.3927C32.1293 36.0693 17.916 36.1068 4.77557 40.4995C3.58802 40.8946 2.4111 41.3275 1.2448 41.7983C1.08307 41.5349 0.928175 41.2692 0.777832 40.999C1.75734 40.2042 2.71102 39.3845 3.6389 38.5398C13.8195 29.2693 20.87 17.083 23.8213 3.65597C24.0855 2.44791 24.3201 1.22622 24.5183 0ZM24.9488 8.22024C21.8443 19.0922 16.101 29.0344 8.22663 37.1682C19.187 34.2886 30.7034 34.2464 41.6847 37.0456C33.7479 29.0046 27.9893 19.0862 24.9488 8.22024ZM32.7438 9.93241C36.1807 11.4379 39.1041 13.9076 41.1576 17.0405C43.2111 20.1733 44.306 23.8341 44.3088 27.5764C44.3091 28.2529 44.2748 28.9289 44.2063 29.602C39.153 23.8406 35.2612 17.1623 32.7438 9.93241ZM29.3884 6.57393C32.2344 17.0237 37.7841 26.545 45.4819 34.1844C46.4093 31.3183 46.7216 28.2899 46.3985 25.2957C46.0754 22.3014 45.1241 19.4085 43.6063 16.8046C42.0886 14.2008 40.0384 11.9443 37.5889 10.1817C35.1395 8.41919 32.3455 7.18997 29.3884 6.57393ZM5.79155 29.577C10.7418 23.798 14.5819 17.1595 17.1196 9.99372C13.718 11.5154 10.8298 13.9844 8.80231 17.1036C6.77487 20.2229 5.69456 23.8596 5.69132 27.5764C5.69284 28.2486 5.72625 28.9154 5.79155 29.577ZM12.3435 10.2287C14.78 8.4591 17.5618 7.21866 20.5092 6.58754C17.6056 16.9919 12.1085 26.4949 4.52959 34.2116C3.60118 31.3525 3.28474 28.3311 3.60072 25.3424C3.9167 22.3538 4.85807 19.4645 6.36402 16.8612C7.86996 14.2578 9.90698 11.9984 12.3435 10.2287ZM36.5821 42.9746C32.8297 42.2454 29.0156 41.8781 25.1925 41.8778H25.1857C21.2572 41.8775 17.3383 42.2647 13.4863 43.0336C14.1588 43.5333 14.8634 43.9884 15.5957 44.3961C18.8581 46.2038 22.5758 47.0315 26.2998 46.7792C30.0238 46.527 33.5949 45.2056 36.5821 42.9746ZM8.93048 41.846C14.2275 40.4029 19.6944 39.6728 25.1857 39.6751C30.5694 39.6737 35.9302 40.3753 41.1311 41.762C39.1202 44.0405 36.6467 45.8671 33.8743 47.121C31.102 48.3749 28.0941 49.0274 25.0498 49.0353C22.0055 49.0433 18.9942 48.4065 16.2153 47.1671C13.4364 45.9277 10.9534 44.114 8.93048 41.846Z" fill={fill}/>
    </svg>
  );
}

function Logo({ height = 44, dark = false }) {
  return (
    <div className="nav-logo" style={{ alignItems: "baseline" }}>
      <BrandMark size={height * 0.95} monotone={dark ? false : false} />
      <span
        className="serif"
        style={{
          fontSize: height * 0.62,
          letterSpacing: "0.16em",
          color: dark ? "var(--paper)" : "var(--ink)",
          textTransform: "uppercase",
          fontWeight: 400,
          marginLeft: 4,
        }}
      >
        Biolite
      </span>
    </div>
  );
}

function Nav({ route, setRoute, openBooking }) {
  const items = [
    { id: "home", label: "Home" },
    { id: "treatments", label: "Treatments" },
    { id: "doctors", label: "Our Team" },
    { id: "wellness", label: "Wellness & Longevity" },
    { id: "ba", label: "Before & After" },
    { id: "about", label: "About" },
    { id: "contact", label: "Contact" },
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <div onClick={() => setRoute({ page: "home" })} style={{ cursor: "pointer" }}>
          <Logo />
        </div>
        <div className="nav-items">
          {items.map((it) => (
            <span
              key={it.id}
              className={"nav-item " + (route.page === it.id || (route.page === "treatment" && it.id === "treatments") ? "active" : "")}
              onClick={() => setRoute({ page: it.id })}
            >
              {it.label}
            </span>
          ))}
        </div>
        <div className="nav-right">
          <div className="nav-meta" style={{ display: "none" }}>
            <span>+971 4 346 6641</span>
          </div>
          <div className="nav-locale">
            <span className="active">EN</span>
            <span>AR</span>
            <span>RU</span>
            <span>ZH</span>
          </div>
          <button className="btn btn-sm" onClick={openBooking}>
            Book a consultation
          </button>
        </div>
      </div>
    </nav>
  );
}

function Footer({ setRoute, openBooking }) {
  return (
    <footer className="footer">
      <div className="wide">
        <div className="row row-12" style={{ alignItems: "start", gap: 32 }}>
          <div className="col-span-5">
            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
              <BrandMark size={48} />
              <span className="serif" style={{ fontSize: 32, letterSpacing: "0.16em", color: "var(--paper)", textTransform: "uppercase" }}>
                Biolite
              </span>
            </div>
            <p className="serif" style={{ fontSize: 24, lineHeight: 1.3, color: "var(--paper)", marginTop: 28, maxWidth: 460 }}>
              <em style={{ color: "var(--gold-2)" }}>Doctor-led aesthetic medicine</em> and supervised longevity care — Dubai since 2007.
            </p>
            <div style={{ marginTop: 28 }}>
              <button className="btn btn-light" onClick={openBooking}>Book a consultation</button>
            </div>
          </div>
          <div className="col-span-2" style={{ gridColumn: "span 2" }}>
            <h4>Treatments</h4>
            {TREATMENT_AREAS.map(a => (
              <a key={a.id} onClick={() => setRoute({ page: "treatments", area: a.id })} style={{ cursor: "pointer" }}>
                {a.name}
              </a>
            ))}
          </div>
          <div className="col-span-2" style={{ gridColumn: "span 2" }}>
            <h4>Clinic</h4>
            <a onClick={() => setRoute({ page: "doctors" })} style={{ cursor: "pointer" }}>Our team</a>
            <a onClick={() => setRoute({ page: "wellness" })} style={{ cursor: "pointer" }}>Wellness & longevity</a>
            <a onClick={() => setRoute({ page: "ba" })} style={{ cursor: "pointer" }}>Before & after</a>
            <a onClick={() => setRoute({ page: "about" })} style={{ cursor: "pointer" }}>About · since 2007</a>
            <a onClick={() => setRoute({ page: "contact" })} style={{ cursor: "pointer" }}>Contact</a>
          </div>
          <div className="col-span-3" style={{ gridColumn: "span 3" }}>
            <h4>Visit</h4>
            <div style={{ color: "rgba(250,247,241,0.85)", fontSize: 14, lineHeight: 1.7 }}>
              Villa 57, Al Thanya Road<br/>
              Umm Suqeim 2 · Jumeirah<br/>
              Dubai, United Arab Emirates
            </div>
            <h4 style={{ marginTop: 28 }}>Contact</h4>
            <a href="tel:+97143466641">+971 4 346 6641</a>
            <a href="tel:+971502920086">+971 50 292 0086 <span className="mono" style={{ fontSize: 10, color: "var(--sage)" }}>· WhatsApp pending</span></a>
            <a href="mailto:info@biolitedubai.com">info@biolitedubai.com</a>
          </div>
        </div>

        <div className="footer-bottom">
          <div>
            © 2026 Biolite Clinic L.L.C S.o.c · DHA licensed · MOH ref H508TKGC-190521 <span style={{ color: "var(--gold-deep)" }}>(verify)</span>
          </div>
          <div style={{ display: "flex", gap: 18 }}>
            <a>@bioliteuae · Instagram</a>
            <a>LinkedIn</a>
            <a>Privacy</a>
            <a>Cookies</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// Sticky mobile rail
function BookRail({ openBooking }) {
  return (
    <div className="book-rail">
      <a href="tel:+97143466641" style={{ color: "var(--paper)", fontSize: 13 }}>+971 4 346 6641</a>
      <button className="btn btn-sm btn-light" onClick={openBooking}>Book consultation</button>
    </div>
  );
}

// ---- Booking modal (multi-step) ----
function BookingModal({ open, onClose, preselectedTreatment }) {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    intent: "",
    area: "",
    treatment: preselectedTreatment?.id || "",
    when: "",
    name: "",
    email: "",
    phone: "",
    notes: "",
    contact: "whatsapp",
  });
  const total = 4;

  useEffect(() => {
    if (open) {
      setStep(0);
      setData(d => ({ ...d, treatment: preselectedTreatment?.id || "", area: preselectedTreatment?.area || "" }));
      document.body.style.overflow = "hidden";
    } else document.body.style.overflow = "";
    return () => { document.body.style.overflow = ""; };
  }, [open, preselectedTreatment]);

  if (!open) return null;

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));
  const canNext = () => {
    if (step === 0) return !!data.intent;
    if (step === 1) return !!data.area && !!data.treatment;
    if (step === 2) return !!data.when;
    if (step === 3) return data.name.length > 1 && data.email.includes("@") && data.phone.length > 4;
    return true;
  };

  const areaTreatments = TREATMENTS.filter(t => t.area === data.area);

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <div className="eyebrow">Book a consultation</div>
            <div className="serif" style={{ fontSize: 24, marginTop: 6 }}>
              {step === 0 && "What brings you to Biolite?"}
              {step === 1 && "Choose a treatment area"}
              {step === 2 && "When works for you?"}
              {step === 3 && "Your details"}
              {step === 4 && "Consultation requested"}
            </div>
          </div>
          <button className="modal-close" onClick={onClose}>×</button>
        </div>

        <div className="modal-body">
          {step < 4 && (
            <div className="steps">
              {Array.from({ length: total }).map((_, i) => (
                <div key={i} className={"step-bar " + (i < step ? "done " : "") + (i === step ? "active" : "")} />
              ))}
            </div>
          )}

          {step === 0 && (
            <div className="stack" style={{ gap: 12 }}>
              {["Surgical procedure", "Non-surgical aesthetics", "Wellness & longevity", "Cosmetic gynaecology", "I'm not sure — please advise"].map(o => (
                <label key={o} className={"radio-pill " + (data.intent === o ? "active" : "")} onClick={() => update("intent", o)} style={{ padding: "16px 18px", textAlign: "left", display: "block" }}>
                  {o}
                </label>
              ))}
              <div className="note" style={{ marginTop: 12 }}>
                <span className="mono">Minimal PHI policy</span>
                We only collect contact + treatment interest. Medical history is reviewed in clinic.
              </div>
            </div>
          )}

          {step === 1 && (
            <div>
              <div className="field">
                <label>Area</label>
                <div className="chips">
                  {TREATMENT_AREAS.map(a => (
                    <button key={a.id} className={"chip " + (data.area === a.id ? "active" : "")} onClick={() => update("area", a.id)}>
                      {a.name}
                    </button>
                  ))}
                </div>
              </div>
              {data.area && (
                <div className="field">
                  <label>Specific treatment</label>
                  <select className="select" value={data.treatment} onChange={(e) => update("treatment", e.target.value)}>
                    <option value="">Select a treatment</option>
                    {areaTreatments.map(t => (
                      <option key={t.id} value={t.id}>{t.name}</option>
                    ))}
                    <option value="not-sure">Not sure — recommend for me</option>
                  </select>
                </div>
              )}
            </div>
          )}

          {step === 2 && (
            <div>
              <div className="field">
                <label>Preferred timing</label>
                <div className="radio-group">
                  {["This week", "Next week", "Within a month", "I'm visiting Dubai"].map(o => (
                    <button key={o} className={"radio-pill " + (data.when === o ? "active" : "")} onClick={() => update("when", o)}>{o}</button>
                  ))}
                </div>
              </div>
              <div className="field">
                <label>Anything to note? (optional)</label>
                <textarea className="textarea" placeholder="Travel dates, prior treatments, questions…" value={data.notes} onChange={(e) => update("notes", e.target.value)} />
              </div>
            </div>
          )}

          {step === 3 && (
            <div>
              <div className="field">
                <label>Full name</label>
                <input className="input" value={data.name} onChange={(e) => update("name", e.target.value)} placeholder="Your name" />
              </div>
              <div className="field">
                <label>Email</label>
                <input className="input" type="email" value={data.email} onChange={(e) => update("email", e.target.value)} placeholder="you@example.com" />
              </div>
              <div className="field">
                <label>Phone (incl. country code)</label>
                <input className="input" value={data.phone} onChange={(e) => update("phone", e.target.value)} placeholder="+971 50 …" />
              </div>
              <div className="field">
                <label>Preferred contact</label>
                <div className="radio-group">
                  {[["whatsapp","WhatsApp"], ["call","Phone call"], ["email","Email"]].map(([v,l]) => (
                    <button key={v} className={"radio-pill " + (data.contact === v ? "active" : "")} onClick={() => update("contact", v)}>{l}</button>
                  ))}
                </div>
              </div>
              <div className="note">
                <span className="mono">Compliance</span>
                A care coordinator will reach out within 1 working day. Reported consultation fee from AED 400 (confirm at booking).
              </div>
            </div>
          )}

          {step === 4 && (
            <div className="fadein" style={{ textAlign: "center", padding: "40px 0" }}>
              <BrandMark size={64} />
              <div className="serif" style={{ fontSize: 36, marginTop: 24, letterSpacing: "-0.01em" }}>
                Thank you, {data.name.split(" ")[0] || "friend"}.
              </div>
              <p className="lede" style={{ marginTop: 16, maxWidth: 380, marginLeft: "auto", marginRight: "auto" }}>
                Your consultation request is with our coordinator. We'll reach out via {data.contact === "whatsapp" ? "WhatsApp" : data.contact === "call" ? "phone" : "email"} within one working day.
              </p>
              <div className="micro" style={{ marginTop: 32 }}>REF · BIO-{Math.floor(Math.random() * 90000 + 10000)}</div>
            </div>
          )}
        </div>

        {step < 4 && (
          <div className="modal-foot">
            {step > 0 && <button className="btn btn-ghost" onClick={() => setStep(step - 1)}>Back</button>}
            <div style={{ flex: 1 }} />
            <button
              className="btn"
              disabled={!canNext()}
              style={{ opacity: canNext() ? 1 : 0.4, cursor: canNext() ? "pointer" : "not-allowed" }}
              onClick={() => {
                if (step === 3) setStep(4);
                else setStep(step + 1);
              }}
            >
              {step === 3 ? "Request consultation" : "Continue"}
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

// Section header pattern
function SecHead({ roman, title, meta, children }) {
  return (
    <div className="sec-head">
      <div className="roman">{roman}</div>
      <div>
        <div className="title" dangerouslySetInnerHTML={{ __html: title }} />
        {children && <div className="lede" style={{ marginTop: 16, maxWidth: 720 }}>{children}</div>}
      </div>
      <div className="meta">{meta}</div>
    </div>
  );
}

Object.assign(window, { BrandMark, Logo, Nav, Footer, BookRail, BookingModal, SecHead });
