/* Orenwell marketing site — shared chrome (header + footer), mobile-first responsive.
   `nav(token)` routes: program slugs (weight-loss-glp-1, mens-vitality-trt, menopause-hrt,
   peptides-longevity, hair-loss), content pages (home, about, faq, contact, portal,
   disclaimer, terms, privacy, shipping, refund, pharmacy), and get-started / qualify. */

const OW_BASE = (typeof location !== "undefined" && location.pathname.indexOf("/ui_kits/marketing-site/") !== -1) ? "../../" : "";

const OW_NAV = [
  ["Weight Loss & GLP-1", "weight-loss-glp-1"],
  ["Men's Health & TRT", "mens-vitality-trt"],
  ["Hair Loss", "hair-loss"],
  ["Women's Health & HRT", "menopause-hrt"],
  ["Wellness & Peptides", "peptides-longevity"],
  ["About", "about"],
  ["Blog", "blog"],
];

function Header({ nav, onGetStarted }) {
  const [open, setOpen] = React.useState(false);
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 20, background: "rgba(255,255,255,0.86)", backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)", borderBottom: "1px solid var(--border)" }}>
      <div className="ow-inner" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, paddingTop: 14, paddingBottom: 14 }}>
        <button type="button" onClick={() => nav("home")} aria-label="Orenwell — home" style={{ cursor: "pointer", display: "flex", alignItems: "center", flexShrink: 0, background: "none", border: "none", padding: 0 }}>
          <img src={(window.__resources && window.__resources.logoPrimary) || "assets/logos/orenwell-logo-primary.png"} alt="Orenwell" style={{ height: 30 }} />
        </button>

        {/* Desktop nav — inline links + actions (shown ≥1080px) */}
        <nav className="ow-nav-desk" aria-label="Primary" style={{ alignItems: "center", gap: 20 }}>
          {OW_NAV.map(([label, token]) => (
            <button type="button" key={token} onClick={() => nav(token)} style={{ fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 500, color: "var(--ink-800)", cursor: "pointer", whiteSpace: "nowrap", background: "none", border: "none", padding: "4px 2px" }}>{label}</button>
          ))}
          <div style={{ display: "flex", gap: 10, marginLeft: 2 }}>
            <a href="https://patient.leguprecovery.com/login" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none", display: "inline-flex" }}>
              <Button variant="secondary" size="sm" style={{ whiteSpace: "nowrap" }}>Patient Portal<span className="ow-vh"> (opens in new tab)</span></Button>
            </a>
            <Button variant="primary" size="sm" onClick={onGetStarted} style={{ whiteSpace: "nowrap" }}>Get Started</Button>
          </div>
        </nav>

        {/* Mobile menu toggle (shown <1080px) */}
        <button className="ow-hdr-toggle" onClick={() => setOpen(!open)} aria-label={open ? "Close menu" : "Open menu"} aria-expanded={open} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--teal-700)", display: "none", padding: 6 }}>
          <Icon name={open ? "x" : "menu"} size={24} />
        </button>
      </div>

      {/* Mobile dropdown nav */}
      {open && (
        <nav className="ow-hdr-mobnav" aria-label="Primary" style={{ padding: "8px 22px 20px", flexDirection: "column", gap: 4, borderTop: "1px solid var(--border)" }}>
          {OW_NAV.map(([label, token]) => (
            <button type="button" key={token} onClick={() => { setOpen(false); nav(token); }} style={{ textAlign: "left", padding: "12px 4px", fontFamily: "var(--font-body)", fontSize: 16, fontWeight: 500, color: "var(--ink-800)", cursor: "pointer", background: "none", border: "none", borderBottom: "1px solid var(--gray-100)" }}>{label}</button>
          ))}
          <div style={{ display: "flex", gap: 10, marginTop: 14 }}>
            <a href="https://patient.leguprecovery.com/login" target="_blank" rel="noopener noreferrer" onClick={() => setOpen(false)} style={{ flex: 1, textDecoration: "none", display: "block" }}>
              <Button variant="secondary" size="md" fullWidth>Patient Portal<span className="ow-vh"> (opens in new tab)</span></Button>
            </a>
            <Button variant="primary" size="md" style={{ flex: 1 }} onClick={() => { setOpen(false); onGetStarted(); }}>Get Started</Button>
          </div>
        </nav>
      )}
    </header>
  );
}

/* ---- Footer ---- */
const OW_FOOT_SERVICES = [
  ["Weight Loss & GLP-1", "weight-loss-glp-1"], ["Men's Health & TRT", "mens-vitality-trt"],
  ["Women's Health & HRT", "menopause-hrt"], ["Wellness & Peptides", "peptides-longevity"], ["Hair Loss", "hair-loss"],
];
const OW_FOOT_COMPANY = [
  ["About", "about"], ["Contact", "contact"], ["FAQ", "faq"], ["Blog", "blog"], ["Patient Portal", "portal", "https://patient.leguprecovery.com/login"],
];
const OW_FOOT_LEGAL = [
  ["Disclaimer", "disclaimer"], ["Terms & Conditions", "terms"], ["Privacy Policy", "privacy"],
  ["Consumer Health Data Privacy Policy", "chd"],
  ["Shipping Policy", "shipping"], ["Refund Policy", "refund"], ["Pharmacy Information", "pharmacy"],
  ["Accessibility Statement", "accessibility", "/accessibility"],
];

function FootCol({ heading, items, nav }) {
  return (
    <div>
      <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--amber-400)", marginBottom: 14 }}>{heading}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 11, alignItems: "flex-start" }}>
        {items.map(([label, token, href]) => {
          const linkStyle = { color: "var(--text-on-dark)", fontSize: 14.5, cursor: "pointer", textDecoration: "none", textAlign: "left" };
          if (href) {
            const external = /^https?:/.test(href);
            return external
              ? <a key={token} href={href} target="_blank" rel="noopener noreferrer" style={linkStyle}>{label}<span className="ow-vh"> (opens in new tab)</span></a>
              : <a key={token} href={href} style={linkStyle}>{label}</a>;
          }
          return <button type="button" key={token} onClick={() => nav(token)} style={{ ...linkStyle, fontFamily: "var(--font-body)", background: "none", border: "none", padding: 0 }}>{label}</button>;
        })}
      </div>
    </div>
  );
}

function TrustBadge({ icon, label }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "9px 14px", borderRadius: "var(--radius-pill)", background: "rgba(244,241,235,0.06)", border: "1px solid var(--border-on-dark)" }}>
      <Icon name={icon} size={16} color="var(--teal-200)" stroke={1.8} />
      <span style={{ fontSize: 12.5, fontWeight: 600, color: "var(--text-on-dark)", letterSpacing: ".01em" }}>{label}</span>
    </span>
  );
}

function Footer({ nav }) {
  return (
    <footer style={{ background: "var(--teal-900)", color: "var(--text-on-dark)", marginTop: 8 }}>
      <div className="ow-inner" style={{ paddingTop: 48, paddingBottom: 30 }}>
        {/* Brand + CTA block beside the three link columns */}
        <div className="ow-foot-grid">
          <div className="ow-foot-brand">
            <img src={(window.__resources && window.__resources.logoReversed) || "assets/logos/orenwell-logo-reversed.png"} alt="Orenwell" style={{ height: 34, marginBottom: 16 }} />
            <p style={{ color: "var(--text-on-dark-muted)", fontSize: 14.5, lineHeight: 1.6, margin: 0, maxWidth: 320 }}>
              Medically guided weight, hormone, and wellness care — connecting you with licensed providers, 100% online. No insurance needed.
            </p>
          </div>

          <div className="ow-foot-cols3">
            <FootCol heading="Services" items={OW_FOOT_SERVICES} nav={nav} />
            <FootCol heading="Company" items={OW_FOOT_COMPANY} nav={nav} />
            <FootCol heading="Legal" items={OW_FOOT_LEGAL} nav={nav} />
          </div>
        </div>

        {/* Centered bottom block: trust badges, brand, disclaimers, copyright, Admin */}
        <div style={{ borderTop: "1px solid var(--border-on-dark)", marginTop: 34, paddingTop: 32, display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 22 }}>
          <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "center", gap: 12 }}>
            <TrustBadge icon="lock" label="Secure Checkout" />
            <TrustBadge icon="shield-check" label="HIPAA Compliant" />
          </div>

          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
            <img src={(window.__resources && window.__resources.logoReversed) || "assets/logos/orenwell-logo-reversed.png"} alt="Orenwell" style={{ height: 30 }} />
            <a href="https://orenwell.com" style={{ fontSize: 13.5, color: "var(--text-on-dark-muted)", textDecoration: "none" }}>orenwell.com</a>
          </div>

          <div style={{ maxWidth: 720, display: "flex", flexDirection: "column", gap: 10 }}>
            <p style={{ margin: 0, fontSize: 11.5, lineHeight: 1.65, color: "var(--text-on-dark-muted)" }}>
              All medical services are referral-based and provided through licensed healthcare professionals. Orenwell connects you with licensed medical providers; eligibility and treatment are determined by a provider based on your consultation. Individual experiences vary; results are not guaranteed.
            </p>
            <p style={{ margin: 0, fontSize: 11.5, lineHeight: 1.65, color: "var(--text-on-dark-muted)" }}>
              Images of doctors, healthcare providers, patients, or other people shown on this site are for illustrative purposes only. They may feature models or AI-generated people and do not necessarily depict real providers, customers, or patients.
            </p>
            <p style={{ margin: 0, fontSize: 11.5, lineHeight: 1.65, color: "var(--text-on-dark-muted)" }}>
              Fulfilled by Leg Up Recovery. &nbsp;•&nbsp; "As Seen On" refers to Leg Up Recovery.
            </p>
          </div>

          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 16, flexWrap: "wrap" }}>
            <p style={{ margin: 0, fontSize: 11.5, color: "var(--text-on-dark-muted)" }}>© 2026 Orenwell. All rights reserved.</p>
            <a href="#" style={{ fontSize: 11.5, color: "var(--text-on-dark-muted)", textDecoration: "none", opacity: 0.85 }}>Admin</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Footer });