import { ArrowRight, ChatCircleDots, FileText, Play, ShieldCheck, Stethoscope, UserCirclePlus } from "@phosphor-icons/react";
import type { ReactNode } from "react";
import { siteWords } from "../../logic/site";
import { Link } from "../router";
import { Brand } from "../ui";

const FILM_URL = (import.meta.env?.VITE_CONTEXT_FILM_URL as string | undefined) ?? "";

export function SiteLayout({ children }: { children: ReactNode }) {
  return (
    <div className="site">
      <header className="site-bar">
        <Brand />
        <nav aria-label="Site">
          <Link className="button" to="/sign-in">
            Sign in
          </Link>
          <Link className="button primary" to="/request-access">
            Request access
          </Link>
        </nav>
      </header>
      <main className="site-main">{children}</main>
      <footer className="site-foot">
        <span className="icon-chip">
          <ShieldCheck size={15} />
        </span>
        <p>
          MARMAR Context shows information and where it came from. A clinician decides. It is not for emergencies:
          nobody watches it around the clock.
        </p>
      </footer>
    </div>
  );
}

const lines: { icon: ReactNode; title: string; text: string }[] = [
  {
    icon: <Stethoscope size={18} />,
    title: "Every patient is different.",
    text: "Their medicine check should be too. Context checks the list on its own, then again with what you confirmed about the patient.",
  },
  {
    icon: <FileText size={18} />,
    title: "Add records from anywhere.",
    text: "Context pulls out each fact and links it to the line it came from. Nothing goes into the check until you have reviewed it.",
  },
  {
    icon: <ChatCircleDots size={18} />,
    title: "Before you decide, ask Yasmar to check in.",
    text: "Yasmar calls through the patient's MARMAR Health app with your questions, and the patient's answers come back as notes.",
  },
];

/** ACC-1: the public page for signed-out visitors. */
export default function Landing() {
  return (
    <SiteLayout>
      <section className="hero">
        <div className="hero-copy">
          <span className="eyebrow">For doctors and pharmacists</span>
          <h1>A medicine check personalized to every patient.</h1>
          <p className="lead">{siteWords().lead}</p>
          <div className="hero-actions">
            <Link className="button primary large" to="/request-access">
              Request access
              <ArrowRight size={15} />
            </Link>
            <Link className="button large" to="/sign-in">
              Sign in
            </Link>
            <a className="button large" href="/demo">
              <UserCirclePlus size={16} />
              Try a fictional patient
            </a>
          </div>
        </div>
        <div className="film frame" aria-label="The short film">
          <div className="frame-body flush">
            {FILM_URL ? (
              <video src={FILM_URL} controls preload="metadata" playsInline aria-label="MARMAR Context, the short film" />
            ) : (
              <div className="film-still" role="img" aria-label="A check in Context: the list alone shows no findings; with the patient's details, two findings to review.">
                <div className="film-row">
                  <span className="status">Checked on its own</span>
                  <strong>0 findings</strong>
                </div>
                <div className="film-row lit">
                  <span className="status green">Personalized to Mariam</span>
                  <strong>2 findings to review</strong>
                </div>
                <div className="film-card">
                  <span className="tier this_week">Review this week</span>
                  <b>Metformin and the latest eGFR result</b>
                  <small>Based on: eGFR 38 · Yaba laboratory · 12 Oct 2026</small>
                </div>
                <div className="film-card">
                  <span className="tier today">Review today</span>
                  <b>Amoxicillin and a recorded Penicillin allergy</b>
                  <small>Based on: Penicillin allergy · Ikeja hospital</small>
                </div>
                <p className="film-note">
                  <Play size={14} weight="fill" /> The short film plays here once it is published.
                </p>
              </div>
            )}
          </div>
        </div>
      </section>
      <section className="pillars" aria-label="What Context does">
        {lines.map((l) => (
          <article key={l.title} className="pillar">
            <span className="icon-chip">{l.icon}</span>
            <h2>{l.title}</h2>
            <p>{l.text}</p>
          </article>
        ))}
      </section>
      <section className="invite-callout">
        <div>
          <h2>Your patients can invite you from MARMAR Health.</h2>
          <p>
            Patients and families choose what to share: medicines, doses taken, check-ins and records. They can stop
            sharing at any time.
          </p>
        </div>
        <Link className="button" to="/request-access">
          Request access
        </Link>
      </section>
    </SiteLayout>
  );
}