/* Benehab — Landing page (dark-locked marketing) — v3 */
const { useEffect, useState } = React;

const LIcon = {
  Wave: () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M3 12c1.5 0 1.5-4 3-4s1.5 8 3 8 1.5-10 3-10 1.5 6 3 6 1.5-3 3-3 1.5 4 3 4" /></svg>),
  Mind: () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M9 20v-3a4 4 0 0 1-3-6 5 5 0 1 1 9-3 4 4 0 0 1 2 7v5" /><path d="M9 11h3" /></svg>),
  Team: () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="9" cy="9" r="3" /><circle cx="17" cy="11" r="2.2" /><path d="M3 19c.8-3 3-4.5 6-4.5s5.2 1.5 6 4.5" /><path d="M16 17c.8-1.4 2-2 3.2-2 1.5 0 2.6.8 3.3 2" /></svg>),
  Home: () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M4 11l8-7 8 7v9a1 1 0 0 1-1 1h-4v-6h-6v6H5a1 1 0 0 1-1-1z" /></svg>),
  Pulse: () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12h4l2-5 4 10 2-5h6" /></svg>),
  Brain: () => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6a3 3 0 0 0-3 3 3 3 0 0 0-2 3 3 3 0 0 0 2 3v1a3 3 0 0 0 3 3" /><path d="M15 6a3 3 0 0 1 3 3 3 3 0 0 1 2 3 3 3 0 0 1-2 3v1a3 3 0 0 1-3 3" /><path d="M9 4v16M15 4v16" /></svg>),
  Arrow: () => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>),
};

function LpNav() {
  return (
    <nav className="lp-nav">
      <a href="#" className="lp-nav-brand" style={{ textDecoration: "none", color: "inherit" }}>
        <span className="lp-mark">B</span>
        <span>Benehab</span>
      </a>
      <div className="lp-nav-links">
        <a href="#what">What it is</a>
        <a href="#layer">Behavioral layer</a>
        <a href="#modes">Two modes</a>
        <a href="#screens">Product</a>
        <a href="#for">Who it's for</a>
      </div>
      <div className="lp-nav-cta">
        <a href="#cta" className="lp-btn-primary" style={{ height: 38, padding: "0 16px", fontSize: 13 }}>
          Book a demo <LIcon.Arrow />
        </a>
      </div>
    </nav>
  );
}

/* Hero visual — timeline between visits */
function VisitTimeline() {
  // Two anchor visit nodes; many small AI-activity points scattered between.
  // Autonomous (mint, muted) and augmented (white/brighter) markers.
  const W = 560, H = 380;
  const yMid = 210;
  const left = 76, right = W - 76;
  // Scatter points (non-uniform; manually placed)
  const pts = [
    { x: 0.06, y: -8, kind: "a" },
    { x: 0.11, y: 6, kind: "a" },
    { x: 0.16, y: -14, kind: "a" },
    { x: 0.22, y: 2, kind: "a" },
    { x: 0.28, y: -6, kind: "g" },
    { x: 0.33, y: 10, kind: "a" },
    { x: 0.39, y: -10, kind: "a" },
    { x: 0.44, y: 4, kind: "a" },
    { x: 0.50, y: -16, kind: "g" },
    { x: 0.55, y: 8, kind: "a" },
    { x: 0.61, y: -6, kind: "a" },
    { x: 0.67, y: 12, kind: "g" },
    { x: 0.73, y: -10, kind: "a" },
    { x: 0.79, y: 2, kind: "a" },
    { x: 0.85, y: -8, kind: "a" },
    { x: 0.90, y: 6, kind: "a" },
    { x: 0.95, y: -4, kind: "a" },
  ];
  return (
    <div className="lp-hero-timeline">
      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid meet" className="lp-tl-svg">
        <defs>
          <radialGradient id="anchor-l" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="oklch(96% 0.01 270 / 0.9)" />
            <stop offset="100%" stopColor="oklch(96% 0.01 270 / 0)" />
          </radialGradient>
          <radialGradient id="anchor-glow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="oklch(96% 0.01 270 / 0.35)" />
            <stop offset="100%" stopColor="oklch(96% 0.01 270 / 0)" />
          </radialGradient>
          <linearGradient id="tl-line" x1="0" x2="1" y1="0" y2="0">
            <stop offset="0%"  stopColor="oklch(96% 0.01 270 / 0.45)" />
            <stop offset="50%" stopColor="oklch(96% 0.01 270 / 0.25)" />
            <stop offset="100%" stopColor="oklch(96% 0.01 270 / 0.45)" />
          </linearGradient>
        </defs>

        {/* Atmospheric rings around anchors */}
        <circle cx={left} cy={yMid} r="80" fill="url(#anchor-glow)" opacity="0.5" />
        <circle cx={right} cy={yMid} r="80" fill="url(#anchor-glow)" opacity="0.5" />
        <circle cx={left} cy={yMid} r="38" fill="none" stroke="oklch(96% 0.01 270 / 0.08)" />
        <circle cx={right} cy={yMid} r="38" fill="none" stroke="oklch(96% 0.01 270 / 0.08)" />
        <circle cx={left} cy={yMid} r="58" fill="none" stroke="oklch(96% 0.01 270 / 0.05)" strokeDasharray="2 4" />
        <circle cx={right} cy={yMid} r="58" fill="none" stroke="oklch(96% 0.01 270 / 0.05)" strokeDasharray="2 4" />

        {/* Main timeline */}
        <line x1={left + 12} y1={yMid} x2={right - 12} y2={yMid}
              stroke="url(#tl-line)" strokeWidth="1.2" />

        {/* Label above */}
        <text x={W / 2} y={yMid - 78}
              textAnchor="middle"
              fill="oklch(96% 0.01 270 / 0.5)"
              fontFamily="IBM Plex Mono, monospace"
              fontSize="10" letterSpacing="0.18em">
          CONTINUOUS ENGAGEMENT · BETWEEN VISITS
        </text>

        {/* Scatter points */}
        {pts.map((p, i) => {
          const cx = left + 30 + p.x * (right - left - 60);
          const cy = yMid + p.y;
          const augmented = p.kind === "g";
          if (augmented) {
            return (
              <g key={i}>
                <circle cx={cx} cy={cy} r="6" fill="oklch(96% 0.01 270 / 0.15)" />
                <circle cx={cx} cy={cy} r="3" fill="oklch(96% 0.01 270 / 0.95)">
                  <animate attributeName="opacity" values="0.95;0.5;0.95" dur="3.5s" begin={`${i * 0.2}s`} repeatCount="indefinite" />
                </circle>
              </g>
            );
          }
          return (
            <circle key={i} cx={cx} cy={cy} r="2.6" fill="oklch(82% 0.16 195 / 0.55)">
              <animate attributeName="opacity" values="0.55;0.2;0.55" dur="4s" begin={`${i * 0.15}s`} repeatCount="indefinite" />
            </circle>
          );
        })}

        {/* Anchors */}
        <g>
          <circle cx={left} cy={yMid} r="18" fill="url(#anchor-l)" />
          <circle cx={left} cy={yMid} r="10" fill="oklch(14% 0.04 270)" stroke="oklch(96% 0.01 270 / 0.85)" strokeWidth="1.5" />
          <text x={left} y={yMid + 46} textAnchor="middle"
                fill="oklch(96% 0.01 270 / 0.85)"
                fontFamily="IBM Plex Mono, monospace" fontSize="10" letterSpacing="0.14em">
            LAST VISIT
          </text>
          <text x={left} y={yMid + 64} textAnchor="middle"
                fill="oklch(96% 0.01 270 / 0.5)"
                fontFamily="IBM Plex Mono, monospace" fontSize="10" letterSpacing="0.06em">
            Mar 14
          </text>
        </g>
        <g>
          <circle cx={right} cy={yMid} r="18" fill="url(#anchor-l)" />
          <circle cx={right} cy={yMid} r="10" fill="oklch(14% 0.04 270)" stroke="oklch(96% 0.01 270 / 0.85)" strokeWidth="1.5" />
          <text x={right} y={yMid + 46} textAnchor="middle"
                fill="oklch(96% 0.01 270 / 0.85)"
                fontFamily="IBM Plex Mono, monospace" fontSize="10" letterSpacing="0.14em">
            NEXT VISIT
          </text>
          <text x={right} y={yMid + 64} textAnchor="middle"
                fill="oklch(96% 0.01 270 / 0.5)"
                fontFamily="IBM Plex Mono, monospace" fontSize="10" letterSpacing="0.06em">
            May 22
          </text>
        </g>

        {/* Legend */}
        <g transform={`translate(${W/2 - 130}, ${yMid + 110})`}>
          <circle cx="6" cy="6" r="2.6" fill="oklch(82% 0.16 195 / 0.65)" />
          <text x="16" y="10" fill="oklch(96% 0.01 270 / 0.55)" fontFamily="IBM Plex Mono, monospace" fontSize="9" letterSpacing="0.1em">AUTONOMOUS · ROUTINE</text>
        </g>
        <g transform={`translate(${W/2 + 30}, ${yMid + 110})`}>
          <circle cx="6" cy="6" r="3" fill="oklch(96% 0.01 270 / 0.95)" />
          <text x="16" y="10" fill="oklch(96% 0.01 270 / 0.55)" fontFamily="IBM Plex Mono, monospace" fontSize="9" letterSpacing="0.1em">AUGMENTED · TEAM</text>
        </g>
      </svg>
    </div>
  );
}

function HeroSection() {
  return (
    <section className="lp-section lp-hero">
      <div className="lp-hero-grid">
        <div>
          <div className="lp-eyebrow">Benehab · AI care between visits</div>
          <h1 className="lp-h1">Your AI care layer between visits.</h1>
          <p className="lp-sub">Autonomous for routine. Augmenting your team for complex cases.</p>
          <div className="lp-hero-cta">
            <a href="#cta" className="lp-btn-primary">Book a 30-min demo <LIcon.Arrow /></a>
            <a href="#modes" className="lp-btn-ghost">See how it works</a>
          </div>
          <div className="lp-hero-meta">
            <span>HIPAA aligned</span>
            <span>FHIR native</span>
            <span>Pilot deployment · 4–6 weeks</span>
          </div>
        </div>
        <VisitTimeline />
      </div>
    </section>
  );
}

function WhatItIs() {
  return (
    <section className="lp-section" id="what">
      <div className="lp-section-head">
        <div className="lp-eyebrow">What it is</div>
        <h2 className="lp-h2">Behavioral AI built into chronic care workflows.</h2>
        <p className="lp-body" style={{ maxWidth: 720 }}>
          Benehab talks with chronic patients between their doctor visits — by voice, text, and app.
          It turns those conversations into structured clinical data, prioritized nurse actions,
          and reimbursable outcomes.
        </p>
      </div>
      <div className="lp-three">
        <div className="lp-card"><div className="lp-icon"><LIcon.Wave /></div><h3 className="lp-h3">Reaches patients</h3><p className="lp-card-body">Voice, text, and app — channels patients actually use.</p></div>
        <div className="lp-card"><div className="lp-icon"><LIcon.Mind /></div><h3 className="lp-h3">Understands behavior</h3><p className="lp-card-body">Behavioral profile combined with real-time clinical context.</p></div>
        <div className="lp-card"><div className="lp-icon"><LIcon.Team /></div><h3 className="lp-h3">Empowers your team</h3><p className="lp-card-body">Risk-sorted queue and an AI copilot built for nurses.</p></div>
      </div>
    </section>
  );
}

/* Patient Model — compact rows, vertical stack */
function PatientStack() {
  const rows = [
    { title: "Clinical context",       sub: "Vitals · meds · diagnoses · history",  tag: "What others see", tone: 1 },
    { title: "Psychological profile",  sub: "Traits · coping style · readiness",    tag: "+ Benehab adds",  tone: 2 },
    { title: "Behavioral patterns",    sub: "Routines · triggers · adherence arc",  tag: "+ Benehab adds",  tone: 2 },
    { title: "Personal values",        sub: "What the patient cares about",         tag: "+ Benehab adds",  tone: 2 },
    { title: "Emotional barriers",     sub: "Fear · fatigue · resistance",          tag: "+ Benehab adds",  tone: 2 },
  ];
  return (
    <div className="lp-stack">
      <div className="lp-stack-spine" aria-hidden></div>
      <div className="lp-stack-label">PATIENT MODEL · WHAT BENEHAB SEES</div>
      {rows.map((r, i) => (
        <div key={i} className={"lp-stack-row" + (r.tone === 1 ? " is-base" : "")}>
          <span className="lp-stack-marker"></span>
          <div className="lp-stack-text">
            <div className="lp-stack-title">{r.title}</div>
            <div className="lp-stack-sub">{r.sub}</div>
          </div>
          <span className="lp-stack-tag">{r.tag}</span>
        </div>
      ))}
    </div>
  );
}

function BehavioralLayer() {
  return (
    <section className="lp-section" id="layer">
      <div className="lp-section-head">
        <div className="lp-eyebrow">The behavioral layer · why adherence fails</div>
        <h2 className="lp-h2">Adherence isn't an information problem.<br/>It's a behavioral one.</h2>
        <p className="lp-body" style={{ maxWidth: 780 }}>
          Patients know what to do — they have meds, schedules, instructions. Yet roughly half stop within
          six months. The reason isn't on the chart — it's underneath: fear, fatigue, inner resistance,
          loss of motivation when the initial momentum fades.
        </p>
      </div>

      <PatientStack />

      <div className="lp-bridge">
        Three roles in one AI — nurse follow-up, psychologist barrier-work, health-coach behavior change.
        At <strong>$10–25</strong> per patient per month, where humans cost <strong>$100–300</strong>.
      </div>
    </section>
  );
}

function TwoModes() {
  return (
    <section className="lp-section" id="modes">
      <div className="lp-section-head">
        <div className="lp-eyebrow">Two modes · one engine</div>
        <h2 className="lp-h2">Works on its own. Works alongside your team.</h2>
        <p className="lp-sub" style={{ maxWidth: 640 }}>
          Routine engagement runs autonomously. Complex cases are routed to your nurses with full context.
        </p>
      </div>
      <div className="lp-two-modes">
        <div className="lp-mode-col lp-mode-autonomous">
          <div className="lp-mode-tag"><span className="lp-dot"></span>Autonomous Agent</div>
          <h3 className="lp-mode-title">Routine care, handled.</h3>
          <ul className="lp-mode-list">
            <li>Daily voice check-ins on schedule</li>
            <li>Routine data collection — meds, mood, symptoms, vitals</li>
            <li>Standard reminders and nudges</li>
            <li>Builds a behavioral profile from every interaction</li>
            <li>Escalates only when human judgment is needed</li>
          </ul>
        </div>
        <div className="lp-mode-col lp-mode-augmented">
          <div className="lp-mode-tag"><span className="lp-dot"></span>Augmented Care Team</div>
          <h3 className="lp-mode-title">Complex cases, escalated with context.</h3>
          <ul className="lp-mode-list">
            <li>Patients escalated to a risk-sorted queue</li>
            <li>Full clinical context loaded before each call</li>
            <li>AI copilot suggests questions in real time</li>
            <li className="lp-mode-highlight">Voice biomarkers signal stress, tone, engagement</li>
            <li>Every conversation logged and billable</li>
          </ul>
        </div>
      </div>
      <div className="lp-mode-axis">
        <div className="lp-mode-axis-text">
          Simple cases handled automatically. Complex cases handed off with full context.{" "}
          <strong>Same engine, scales with your team.</strong>
        </div>
      </div>
    </section>
  );
}

function DiffBand() {
  return (
    <div className="lp-band">
      <div className="lp-band-inner">
        <h3>Where data becomes action.</h3>
        <p>Vital signs, voice signals, behavioral context — turned into the call list and the patient picture your team uses every day.</p>
      </div>
    </div>
  );
}

function ScreenRow({ eyebrow, headline, body, caption, src, alt, reverse }) {
  return (
    <section className="lp-section lp-screen-section">
      <div className={"lp-screen-row" + (reverse ? " reverse" : "")}>
        <div className="lp-screen-copy">
          <div className="lp-eyebrow">{eyebrow}</div>
          <h2 className="lp-h2">{headline}</h2>
          <p className="lp-body" style={{ fontSize: "var(--t-lg)", maxWidth: 520 }}>{body}</p>
          <div className="lp-shot-caption" style={{ marginTop: 10 }}>{caption}</div>
        </div>
        <div className="lp-screen-image">
          <div style={{ position: "relative" }}>
            <div className="lp-shot-glow"></div>
            <div className="lp-shot"><img src={src} alt={alt} /></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItFits() {
  return (
    <section className="lp-section">
      <div className="lp-fits">
        <h3>Fits your stack.<br />Honors your workflow.</h3>
        <div className="lp-fits-body">
          <p><strong>FHIR-native architecture.</strong> Integrates with major EHRs through standard interfaces. Pilot kickoff to first patient call: <strong>4–6 weeks</strong>. No EHR migration required.</p>
          <div className="lp-fits-compliance">HIPAA-aligned · GDPR-ready · BAA available · Built on InterSystems IRIS for Health</div>
        </div>
      </div>
    </section>
  );
}

function WhoFor() {
  return (
    <section className="lp-section" id="for">
      <div className="lp-section-head">
        <div className="lp-eyebrow">Built for</div>
        <h2 className="lp-h2">Organizations that get paid for outcomes.</h2>
      </div>
      <div className="lp-three">
        <div className="lp-card"><div className="lp-icon"><LIcon.Home /></div><h3 className="lp-h3">Home Health Agencies</h3><p className="lp-card-body">Between-visit support, post-discharge protocols, TCM capture, readmission prevention.</p><div className="lp-roi">ROI 3.5–4×</div></div>
        <div className="lp-card"><div className="lp-icon"><LIcon.Pulse /></div><h3 className="lp-h3">RPM-Active Practices</h3><p className="lp-card-body">Engagement layer over physical devices. Higher device compliance, contextual vital signs, fewer false alerts.</p><div className="lp-roi">ROI 1.5–2×</div></div>
        <div className="lp-card"><div className="lp-icon"><LIcon.Brain /></div><h3 className="lp-h3">Behavioral Health Practices</h3><p className="lp-card-body">AI as a remote therapeutic monitoring device. New reimbursable revenue stream for chronic mental health programs.</p><div className="lp-roi">ROI 1.5–2×</div></div>
      </div>
    </section>
  );
}

function FinalCta() {
  const [status, setStatus] = useState("idle");

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus("sending");
    const formData = new FormData(e.target);
    try {
      const res = await fetch("https://formspree.io/f/xgoddloy", {
        method: "POST",
        body: formData,
        headers: { Accept: "application/json" }
      });
      if (res.ok) {
        setStatus("sent");
        e.target.reset();
      } else {
        setStatus("error");
      }
    } catch {
      setStatus("error");
    }
  }

  return (
    <section className="lp-cta" id="cta">
      <div className="lp-eyebrow" style={{ justifyContent: "center" }}>Next step</div>
      <h2 className="lp-h1">See it in action.</h2>
      <p className="lp-sub" style={{ textAlign: "center" }}>30-minute demo · Director Cockpit, Nurse Console, and a sample patient flow.</p>
      <ul className="lp-cta-bullets">
        <li>Live Director Cockpit with your scenario</li>
        <li>Nurse Console walkthrough with a sample patient call</li>
        <li>Pricing model for your team size and pilot scope</li>
      </ul>

      {status === "sent" ? (
        <div className="lp-form-success">
          <h3>Thanks — we'll be in touch within 24 hours.</h3>
          <p>If you need to reach us sooner: <a href="mailto:np@benehab.com">np@benehab.com</a></p>
        </div>
      ) : (
        <form onSubmit={handleSubmit} className="lp-form">
          <div className="lp-form-row">
            <input name="name" placeholder="Your name" required autoComplete="name" />
            <input name="email" type="email" placeholder="Work email" required autoComplete="email" />
          </div>
          <div className="lp-form-row">
            <input name="organization" placeholder="Organization" required autoComplete="organization" />
            <input name="role" placeholder="Your role" autoComplete="organization-title" />
          </div>
          <textarea name="notes" placeholder="What you'd like to see (optional)" rows="3" />
          <button type="submit" className="lp-btn-primary lp-btn-lg" disabled={status === "sending"}>
            {status === "sending" ? "Sending..." : "Book a demo"} <LIcon.Arrow />
          </button>
          {status === "error" && (
            <p className="lp-form-error">
              Something went wrong. Please email us directly: <a href="mailto:np@benehab.com">np@benehab.com</a>
            </p>
          )}
        </form>
      )}
    </section>
  );
}

function Footer() {
  return (
    <footer className="lp-footer">
      <div className="lp-footer-grid">
        <div>
          <h4>Contact us</h4>
          <dl className="lp-footer-contact">
            <div><dt>Phone</dt><dd><a href="tel:+97471201570">+974 71201570</a></dd></div>
            <div><dt>Email</dt><dd><a href="mailto:np@benehab.com">np@benehab.com</a></dd></div>
            <div><dt>Address</dt><dd>8 The Green Suite A, Dover,<br />DE 19901, USA</dd></div>
            <div><dt>LinkedIn</dt><dd><a href="https://www.linkedin.com/company/benehab/" target="_blank" rel="noreferrer">linkedin.com/company/benehab</a></dd></div>
          </dl>
        </div>
        <div style={{ textAlign: "right" }}>
          <div className="lp-footer-brand" style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
            <span className="lp-mark" style={{ width: 28, height: 28, borderRadius: 8, background: "linear-gradient(140deg, var(--accent), var(--accent-v))", display: "grid", placeItems: "center", color: "oklch(12% 0.04 270)", fontSize: 14, fontWeight: 700, fontFamily: "var(--font-display)" }}>B</span>
            <span>Benehab</span>
          </div>
          <div style={{ marginTop: 12, fontSize: 13, color: "var(--ink-3)", maxWidth: 320, marginLeft: "auto", lineHeight: 1.6 }}>Behavioral AI for chronic care — autonomous routine engagement, augmented for complex cases.</div>
        </div>
      </div>
      <div className="lp-footer-bottom">
        <span>Benehab Inc. 2026 · www.benehab.com</span>
        <span><a href="#">Privacy</a><a href="#">Terms</a><a href="#">Security</a></span>
      </div>
    </footer>
  );
}

function LandingApp() {
  useEffect(() => { document.documentElement.setAttribute("data-theme", "dark"); }, []);
  return (
    <div className="lp-page">
      <LpNav />
      <HeroSection />
      <WhatItIs />
      <BehavioralLayer />
      <TwoModes />
      <DiffBand />
      <div id="screens">
        <ScreenRow eyebrow="For program directors" headline="See revenue and outcomes in one view." body="Plan progress, monthly payout, outcome attainment, calls completed, credits at risk — all in real time. Built for program directors who need to know what's billable today, what's at risk this week, and what's projected for the period." caption="Director Cockpit · ACCESS Year 2" src="uploads/cockpit-screenshot.png" alt="Director Cockpit" reverse={false} />
        <ScreenRow eyebrow="For nurse leads" headline="Your nurses see who needs attention now." body="Risk-sorted patient queue with AI recommendations. Each patient comes with top concerns, suggested action, and time-to-act window. Nurses spend their time on care, not on triage." caption="Smart Queue · 8 patients · 17 open tasks" src="uploads/queue-screenshot.png" alt="Smart Queue" reverse={true} />
        <ScreenRow eyebrow="For front-line nurses" headline="Every call comes with the full picture." body="Patient context, conversation history, today's tasks, real-time voice signals, AI suggestions on what to ask next. The nurse focuses on the patient — the system handles the rest." caption="Nurse Console · live call · voice biomarkers active" src="uploads/console-live-dark.png" alt="Nurse Console — live call" reverse={false} />
      </div>
      <HowItFits />
      <WhoFor />
      <FinalCta />
      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<LandingApp />);
