/* Orenwell marketing site — core content pages: About, FAQ, Contact, Patient Portal.
   Copy transcribed from "Orenwell Website Copy v2". Contact shows email only (no phone). */

/* Minimal inline formatter: handles **bold** spans and [label](href) links.
   Links to http(s) URLs open in a new tab; relative paths (e.g. /privacy-policy)
   and mailto: links stay in the same tab. Backward compatible with bold-only copy. */
function RichText({ text }) {
  const s = String(text);
  const re = /\*\*(.+?)\*\*|\[([^\]]+)\]\(([^)]+)\)/g;
  const nodes = [];
  let last = 0, m, key = 0;
  while ((m = re.exec(s)) !== null) {
    if (m.index > last) nodes.push(<React.Fragment key={key++}>{s.slice(last, m.index)}</React.Fragment>);
    if (m[1] !== undefined) {
      nodes.push(<strong key={key++} style={{ color: "var(--ink-900)", fontWeight: 700 }}>{m[1]}</strong>);
    } else {
      const href = m[3];
      const ext = /^https?:/i.test(href);
      nodes.push(<a key={key++} href={href} {...(ext ? { target: "_blank", rel: "noopener noreferrer" } : {})} style={{ color: "var(--teal-700)", fontWeight: 600, textDecoration: "underline" }}>{m[2]}</a>);
    }
    last = m.index + m[0].length;
  }
  if (last < s.length) nodes.push(<React.Fragment key={key++}>{s.slice(last)}</React.Fragment>);
  return <React.Fragment>{nodes}</React.Fragment>;
}

function PageHero({ eyebrow, title, sub }) {
  return (
    <section style={{ background: "var(--off-white)", borderBottom: "1px solid var(--border)" }}>
      <div className="ow-inner" style={{ paddingTop: 48, paddingBottom: 44, maxWidth: 880 }}>
        {eyebrow && <Eyebrow style={{ marginBottom: 14 }}>{eyebrow}</Eyebrow>}
        <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "clamp(34px, 6vw, 50px)", lineHeight: 1.06, letterSpacing: "-0.01em", color: "var(--teal-700)", margin: 0, textWrap: "pretty" }}>{title}</h1>
        {sub && <p style={{ fontSize: "clamp(17px, 1.5vw, 20px)", lineHeight: 1.6, color: "var(--gray-600)", margin: "18px 0 0", maxWidth: 620 }}>{sub}</p>}
      </div>
    </section>
  );
}

function Prose({ children, max = 720 }) {
  return (
    <section style={{ background: "var(--white)" }}>
      <div className="ow-inner" style={{ paddingTop: 40, paddingBottom: 48, maxWidth: max }}>{children}</div>
    </section>
  );
}

function AboutPage({ nav }) {
  const reasons = [
    ["stethoscope", "Real Licensed Providers", "Your plan is reviewed and guided by a licensed clinician — never an algorithm, never a chatbot. Always personal."],
    ["receipt-text", "Transparent Pricing", "You see your exact, all-in price before you commit. No hidden fees. No surprise charges. Cancel anytime."],
    ["user-round-check", "Personalized to You", "Your provider tailors your plan to your health history and goals — and adjusts it over time at no additional cost."],
    ["truck", "Free, Discreet Delivery", "From consult to doorstep — medications ship free, quickly, in plain packaging. No waiting rooms. No pickups. No hassle."],
  ];
  return (
    <div>
      <PageHero eyebrow="About Orenwell" title="Healthcare conveniently delivered"
        sub="We believe real healthcare should be accessible, transparent, and personalized — never a guessing game or a surprise bill." />
      <Prose max={760}>
        <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--gray-600)", margin: "0 0 18px" }}>
          At Orenwell, our telehealth platform connects you with <strong style={{ color: "var(--ink-900)" }}>licensed medical providers</strong> who guide a treatment plan built around you, all from the comfort of home.
        </p>
        <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--gray-600)", margin: "0 0 8px" }}>
          We're not a churn-and-burn clinic. We're not going to lock you into a mystery membership or bury fees in the fine print. Orenwell exists because finding a trustworthy, affordable path to medically supervised care shouldn't require a lawyer or a decoder ring.
        </p>
      </Prose>

      <section style={{ background: "var(--cream)" }}>
        <div className="ow-inner" style={{ paddingTop: 44, paddingBottom: 48 }}>
          <Eyebrow style={{ marginBottom: 12 }}>Why choose Orenwell</Eyebrow>
          <h2 className="ow-h2" style={{ fontFamily: "var(--font-display)", fontWeight: 600, color: "var(--teal-700)", margin: "0 0 28px", lineHeight: 1.1 }}>Care that respects your time and trust</h2>
          <div className="ow-about-grid">
            {reasons.map(([icon, t, b]) => (
              <div key={t} style={{ background: "var(--white)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", padding: "24px 22px" }}>
                <Icon name={icon} size={26} color="var(--teal-600)" stroke={1.6} style={{ marginBottom: 14 }} />
                <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 20, color: "var(--teal-700)", margin: "0 0 7px" }}>{t}</h3>
                <p style={{ fontSize: 15, color: "var(--gray-600)", lineHeight: 1.6, margin: 0 }}>{b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Prose max={720}>
        <Eyebrow style={{ marginBottom: 12 }}>Our mission</Eyebrow>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "clamp(26px,3.4vw,34px)", color: "var(--teal-700)", margin: "0 0 16px", lineHeight: 1.15 }}>Removing every obstacle between you and your health</h2>
        <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--gray-600)", margin: "0 0 16px" }}>
          We're committed to removing every obstacle so you can focus on what really matters: your health. Whether you're exploring weight management, hormone support, longevity, or overall wellness — a licensed provider is just a few clicks away.
        </p>
        <p style={{ fontSize: 14, fontStyle: "italic", color: "var(--gray-500)", margin: "0 0 24px" }}>
          Medically supervised. Individual results vary. All medical services are referral-based and provided through licensed healthcare professionals. Prescription medications are fulfilled by Leg Up Recovery.
        </p>
        <Button variant="primary" size="lg" onClick={() => nav("get-started")} iconRight={<Icon name="arrow-right" size={18} color="#fff" />}>See if you qualify</Button>
      </Prose>
    </div>
  );
}

const OW_FAQ_ITEMS = [
  ["Do I need to have a video call with a physician before I receive my medication?", "In the majority of the United States, no — patients do not need to have a video call with a physician prior to receiving their medication. However, a few states do require that patients have a video visit with a physician first. Those states are: Arizona, Washington DC, Delaware, Missouri, New Mexico, Rhode Island, and West Virginia."],
  ["Can I use insurance to pay for this medication?", "At this time, we do not accept insurance for our services. Our pricing is transparent and all-in — you'll see your exact cost before you commit, with no hidden fees."],
  ["What's your return / refund policy?", "Due to the nature of prescription medications and associated healthcare services, we are unable to offer refunds once a prescription has been issued or services have been rendered. If you believe there was an error in the filling of your prescription, please contact us or visit the Patient Portal."],
  ["Can I change the dosage of my medication throughout my treatment plan?", "All medication-related questions should be directed to your physician through the Patient Portal. If your physician determines that a dose change is appropriate, you will be prescribed the new dose at no additional cost."],
  ["Is my medication coming from a pharmacy?", "Yes — all prescription medications sent to patients are dispensed by a licensed, US-based pharmacy. For more information about our pharmacy partners, visit the Pharmacy Information page."],
  ["Are the medications you provide real?", "Absolutely. All medications provided to patients are real and come from accredited pharmacies within the United States. To see our full list of pharmacy partners, please visit the Pharmacy Information page."],
];

function FaqRow({ q, a, open, onToggle }) {
  return (
    <div style={{ borderBottom: "1px solid var(--border)" }}>
      <button onClick={onToggle} style={{ width: "100%", display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16, background: "none", border: "none", padding: "20px 2px", cursor: "pointer", textAlign: "left" }}>
        <span style={{ fontFamily: "var(--font-body)", fontSize: 17, fontWeight: 600, color: "var(--ink-800)", lineHeight: 1.4 }}>{q}</span>
        <Icon name={open ? "minus" : "plus"} size={20} color="var(--teal-600)" style={{ flexShrink: 0, marginTop: 2 }} />
      </button>
      {open && <p style={{ fontSize: 15.5, color: "var(--gray-600)", lineHeight: 1.65, margin: "0 2px 22px" }}>{a}</p>}
    </div>
  );
}

function FaqPage({ nav }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div>
      <PageHero eyebrow="Frequently asked questions" title="Good to know"
        sub="Answers to the questions we hear most. For anything medical, your provider is available through the Patient Portal." />
      <Prose max={780}>
        {OW_FAQ_ITEMS.map(([q, a], i) => <FaqRow key={i} q={q} a={a} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />)}
        <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 30 }}>
          <Button variant="primary" size="md" onClick={() => nav("get-started")}>See if you qualify</Button>
          <Button variant="secondary" size="md" onClick={() => nav("contact")}>Contact us</Button>
        </div>
      </Prose>
    </div>
  );
}

function ContactPage({ nav }) {
  return (
    <div>
      <PageHero eyebrow="Contact" title="Get in touch"
        sub="Have questions? We're here to help. Reach out and we'll point you in the right direction." />
      <section style={{ background: "var(--white)" }}>
        <div className="ow-inner" style={{ paddingTop: 40, paddingBottom: 48, maxWidth: 760 }}>
          <div className="ow-contact-grid">
            <div style={{ background: "var(--off-white)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", padding: "24px 22px" }}>
              <Icon name="mail" size={24} color="var(--teal-600)" stroke={1.6} style={{ marginBottom: 12 }} />
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--amber-700)", marginBottom: 6 }}>Email</div>
              <a href="mailto:support@orenwell.com" style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 21, color: "var(--teal-700)", textDecoration: "none" }}>support@orenwell.com</a>
            </div>
            <div style={{ background: "var(--off-white)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", padding: "24px 22px" }}>
              <Icon name="clock" size={24} color="var(--teal-600)" stroke={1.6} style={{ marginBottom: 12 }} />
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--amber-700)", marginBottom: 6 }}>Office hours</div>
              <p style={{ fontSize: 16, color: "var(--ink-800)", fontWeight: 600, margin: 0 }}>Monday – Friday</p>
              <p style={{ fontSize: 15, color: "var(--gray-600)", margin: "2px 0 0" }}>9:00 AM – 5:00 PM ET</p>
            </div>
          </div>

          <div style={{ display: "flex", gap: 13, alignItems: "flex-start", background: "var(--teal-50)", border: "1px solid var(--teal-100)", borderRadius: "var(--radius-lg)", padding: "18px 20px", marginTop: 18 }}>
            <Icon name="messages-square" size={22} color="var(--teal-700)" style={{ flexShrink: 0, marginTop: 2 }} />
            <div>
              <div style={{ fontSize: 16, fontWeight: 600, color: "var(--teal-700)", marginBottom: 4 }}>Medical concerns</div>
              <p style={{ fontSize: 15, color: "var(--gray-600)", lineHeight: 1.6, margin: 0 }}>
                For medical concerns, questions about your prescription, or to speak with your healthcare provider, please visit the <a href="https://patient.leguprecovery.com/login" target="_blank" rel="noopener noreferrer" style={{ color: "var(--teal-700)", fontWeight: 600, cursor: "pointer" }}>Patient Portal</a>.
              </p>
            </div>
          </div>

          <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 8 }}>
            <p style={{ fontSize: 13.5, fontStyle: "italic", color: "var(--gray-500)", margin: 0, lineHeight: 1.6 }}>For medical emergencies, please call 911 or visit your nearest emergency room.</p>
            <p style={{ fontSize: 13.5, fontStyle: "italic", color: "var(--gray-500)", margin: 0, lineHeight: 1.6 }}>Before contacting us, you may find your answer in our <a onClick={() => nav("faq")} style={{ color: "var(--teal-700)", fontWeight: 600, cursor: "pointer" }}>FAQ</a> section.</p>
            <p style={{ fontSize: 13.5, fontStyle: "italic", color: "var(--gray-500)", margin: 0, lineHeight: 1.6 }}>Please do not include personal health information in replies to marketing messages or sales calls.</p>
          </div>
        </div>
      </section>
    </div>
  );
}

function PortalPage({ nav }) {
  return (
    <div>
      <PageHero eyebrow="Patient Portal" title="Sign in to your Patient Portal"
        sub="Access your health records, message your provider, request prescription updates, and manage your care — all in one secure place." />
      <section style={{ background: "var(--white)" }}>
        <div className="ow-inner" style={{ paddingTop: 40, paddingBottom: 52, maxWidth: 620 }}>
          <div style={{ background: "var(--off-white)", border: "1px solid var(--border)", borderRadius: "var(--radius-xl)", padding: 30, textAlign: "center" }}>
            <span style={{ width: 60, height: 60, borderRadius: "50%", background: "var(--teal-50)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 18 }}>
              <Icon name="lock-keyhole" size={28} color="var(--teal-700)" />
            </span>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 26, color: "var(--teal-700)", margin: "0 0 10px" }}>Your secure patient portal</h2>
            <p style={{ fontSize: 15.5, color: "var(--gray-600)", lineHeight: 1.6, margin: "0 0 22px" }}>Manage your care, records, and provider messages in one place.</p>
            <a href="https://patient.leguprecovery.com/login" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none", display: "block" }}>
              <Button variant="primary" size="lg" fullWidth iconRight={<Icon name="arrow-right" size={18} color="#fff" />}>Sign in to Patient Portal</Button>
            </a>
          </div>
          <p style={{ fontSize: 13, color: "var(--gray-500)", lineHeight: 1.65, margin: "22px 0 0", textAlign: "center" }}>
            Your patient portal is operated by Leg Up Recovery, the licensed healthcare platform that fulfills all medical services and prescriptions. All portal logins, records, and communications are governed by Leg Up Recovery's Terms of Service and Privacy Policy.
          </p>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AboutPage, FaqPage, ContactPage, PortalPage, RichText, PageHero, Prose, FaqRow, OW_FAQ_ITEMS });