/* global React */
const { useState } = React;

function Nav() {
  return (
    <header className="nav">
      <a href="#top" className="nav-lockup">
        <img src="assets/logo-horizontal-color.svg" alt="Texas Health Innovation Coalition" style={{height: 44, width: 'auto', display: 'block'}}/>
      </a>
      <nav className="nav-links">
        <a href="#mission">Mission</a>
        <a href="#priorities">Priorities</a>
        <a href="#join">Join</a>
      </nav>
      <a href="https://twitter.com/txhicoalition" className="nav-cta" target="_blank" rel="noopener noreferrer">Get Involved</a>
    </header>
  );
}

function LibertySVG() {
  return (
    <img
      src="assets/statue-blue.png"
      alt="Goddess of Liberty"
      aria-label="Goddess of Liberty"
      draggable={false}
      style={{
        width: '100%',
        maxWidth: 460,
        height: 'auto',
        display: 'block',
        userSelect: 'none',
      }}
    />
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="reveal">
        <div className="hero-eyebrow">Austin, Texas · Est. 2026</div>
        <h1 className="hero-title">
          Modernizing Texas health through <em>bold</em> policy &amp; innovation
        </h1>
        <p className="hero-lead">
          A nonpartisan statewide coalition uniting healthcare providers, policy leaders,
          patient advocates, and innovators behind a shared agenda — a smarter, more
          accessible, more efficient system for every Texan.
        </p>
        <div className="hero-ctas">
          <a href="#mission" className="btn btn-primary">Learn More</a>
          <a href="#priorities" className="btn btn-ghost">Our Priorities</a>
        </div>
      </div>
      <div className="hero-figure reveal"><LibertySVG/></div>
    </section>
  );
}

function Ticker() {
  const items = [
    'Honest Billing', 'Rural Access', 'Quality of Care', 'Health Tech',
    'Maternal Health', 'Regulatory Modernization', 'Behavioral Health', 'Healthcare Savings',
  ];
  // Duplicate once — the -50% keyframe target assumes the track contains exactly two copies.
  const loop = [...items, ...items];
  return (
    <div className="ticker" aria-label="Policy areas — continuously scrolling">
      <div className="ticker-track">
        {loop.map((t, i) => (
          <React.Fragment key={i}>
            <span className="t" style={{fontFamily: '"DM Mono"'}}>{t}</span>
            <span className="s">✦</span>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function Mission() {
  return (
    <section className="mission" id="mission">
      <div className="mission-inner">
        <div className="mission-stat reveal">
          31M
          <span className="sub">Texans We Serve</span>
        </div>
        <div className="reveal">
          <div className="mission-label">Our Mission</div>
          <h2>Texas deserves a health system as <em>bold</em> as the state itself.</h2>
          <p>
            The Texas Health Innovation Coalition is a nonpartisan statewide coalition uniting
            healthcare providers, policy leaders, patient advocates, and innovators behind a
            shared agenda: smarter, more affordable healthcare.
          </p>
          <p>
            We believe Texas can lead the nation — not just in economic output and individual
            liberty, but in the quality of care its citizens receive. That means reforming
            outdated regulations, expanding access to new technologies, and decreasing costs
            to better suit the needs of every Texan.
          </p>
        </div>
      </div>
    </section>
  );
}

function Priorities() {
  const items = [
    ['01', <>AI &amp; Health Tech <em>Governance</em></>, 'Developing a Texas-first regulatory framework for AI in healthcare — enabling innovation that protects patient data, safety, and civil liberties.'],
    ['02', <>Empower Self-Funded <em>Employers</em></>, 'Guaranteeing employers full access to their own data, pricing contracts, and audit capabilities, which empowers employers to monitor spending, identify waste, and enforce their responsibilities with complete transparency.'],
    ['03', <>Price <em>Transparency</em></>, 'Expand hospital price transparency so patients can make informed decisions and incentivize patients to shop for the best and most affordable healthcare.'],
    ['04', <>Honest <em>Billing</em></>, 'Ensuring patients are charged for the services provided, and not overcharged for routine office visits.'],
    ['05', <><em>Telehealth</em></>, 'Increase access to doctors regardless of the patient\'s physical location.'],
    ['06', <>Contract <em>Reform</em></>, 'Enable healthcare providers and insurers to compete on quality and cost rather than through contractual dominance.'],
    ['07', <>Healthcare Savings for <em>Teachers</em></>, 'Achieve long-term financial stability for educators by tying healthcare payments for medical services to established average prices rather than arbitrary billing.'],
    ['08', <>Access to Medical <em>Records</em></>, 'Modernize the smooth exchange of patient data among providers, payers, and patients, and ensure that patients control their medical data.'],
    ['09', <>Increased Insurance <em>Choice</em></>, 'Permits the purchase of health plans in U.S. territories, providing even more affordable, flexible options for Texans.'],
  ];
  return (
    <section className="priorities" id="priorities">
      <header className="sec-head reveal">
        <div className="label">Our 2027 Policy Agenda</div>
        <h2>{"\n"}</h2>
      </header>
      <ul className="plist">
        {items.map(([n, t, d], i) => (
          <li key={i} className="reveal">
            <span className="num">{n}</span>
            <span className="t">{t}</span>
            <span className="d">{d}</span>
            <span className="arr">→</span>
          </li>
        ))}
      </ul>
    </section>
  );
}

function QuoteBreak() {
  return (
    <section className="qbreak">
      <div className="big-quote" aria-hidden="true">"</div>
      <blockquote className="reveal">
        She holds a gilded star above her head — a reminder that <em>liberty and health</em> are inseparable ideals.
      </blockquote>
      <cite className="reveal">Inscription &middot; Texas State Capitol &middot; 1888</cite>
    </section>
  );
}

function AboutSVG() {
  return (
    <svg viewBox="0 0 460 460" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Texas · Innovation · Health">
      <defs>
        <linearGradient id="tx" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#0e0c09"/>
          <stop offset="1" stopColor="#1e3a5f"/>
        </linearGradient>
      </defs>
      {/* Texas outline */}
      <path d="M90 90 L230 90 L240 70 L280 70 L284 86 L342 86 L370 120 L370 160 L384 178 L384 200 L370 214 L356 260 L330 300 L320 340 L300 378 L260 392 L220 382 L180 358 L150 340 L120 306 L104 260 L98 220 L90 180 Z"
            fill="url(#tx)" stroke="#c9a227" strokeWidth="1.2"/>
      {/* circuit nodes */}
      <g stroke="#c9a227" strokeWidth="0.8" fill="none" opacity="0.9">
        <circle cx="160" cy="200" r="4"/><circle cx="220" cy="180" r="4"/><circle cx="280" cy="220" r="4"/>
        <circle cx="200" cy="280" r="4"/><circle cx="260" cy="310" r="4"/><circle cx="320" cy="180" r="4"/>
        <line x1="160" y1="200" x2="220" y2="180"/>
        <line x1="220" y1="180" x2="280" y2="220"/>
        <line x1="280" y1="220" x2="260" y2="310"/>
        <line x1="260" y1="310" x2="200" y2="280"/>
        <line x1="200" y1="280" x2="160" y2="200"/>
        <line x1="280" y1="220" x2="320" y2="180"/>
      </g>
      {/* central health cross */}
      <g transform="translate(230 230)">
        <rect x="-12" y="-30" width="24" height="60" fill="#c9a227"/>
        <rect x="-30" y="-12" width="60" height="24" fill="#c9a227"/>
      </g>
      {/* small star (goddess motif) */}
      <g transform="translate(360 90)">
        <path d="M0 -14 L3.4 -4.3 L13.3 -4.3 L5.3 1.7 L8.4 11.3 L0 5.3 L-8.4 11.3 L-5.3 1.7 L-13.3 -4.3 L-3.4 -4.3 Z" fill="#c9a227"/>
      </g>
      {/* ekg trace through the map */}
      <path d="M40 400 L120 400 L138 370 L156 420 L174 355 L196 420 L214 390 L420 390"
            stroke="#c9a227" strokeWidth="1.4" fill="none" opacity="0.75"/>
    </svg>
  );
}

function About({ onJoin }) {
  return (
    <section className="about" id="about">
      <div className="about-fig reveal"><AboutSVG/></div>
      <div className="about-body reveal">
        <div className="label">About THIC</div>
        <h2>A coalition built for the <em>second-largest</em> state.</h2>
        <p>
          THIC is a 501(c)(3) that convenes the people closest to the work —
          clinicians, patients, payers, employers, and researchers — and
          publishes the evidence that moves policy.
        </p>
        <p>
          We do not endorse candidates. We do not take positions driven by party.
          We publish what we find, in plain language, and let Texans argue it out.
        </p>
        <button className="btn btn-primary" onClick={onJoin}>Join the Coalition</button>
      </div>
    </section>
  );
}

function Join() {
  return (
    <section className="join" id="join">
      <div className="reveal">
        <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.3em', textTransform:'uppercase', color:'var(--mute)', marginBottom:16}}>Get Involved</div>
        <h2>Join the <em>coalition</em>.</h2>
        <p>Texas health needs your voice in the room.</p>
        <p>
          Join legislators, providers, advocates, and innovators working together
          to vitalize health policy in Texas.
        </p>
        <p>Stay apprised of coalition updates and legislative alerts.</p>
        <a href="https://twitter.com/txhicoalition" className="btn btn-primary" target="_blank" rel="noopener noreferrer">Follow @txhicoalition</a>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="col left">
        <img src="assets/logo-stacked-color.svg" alt="Texas Health Innovation Coalition" style={{height: 88, width: 'auto', display: 'block', marginBottom: 12}}/>
        <div className="m" style={{display: 'none'}}>Texas Health Innovation Coalition</div>
        <div>© 2026 Texas Health Innovation Coalition</div>
      </div>
      <div className="col center">
        <a href="#mission">Mission</a>
        <a href="#priorities">Priorities</a>
        <a href="#about">About</a>
        <a href="#join">Join</a>
      </div>
      <div className="col right">
        A more <em>healthful</em> Texas —<br/>one coalition at a time.
      </div>
    </footer>
  );
}

function JoinDialog({ open, onClose }) {
  const [sent, setSent] = useState(false);
  if (!open) return null;
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <button className="x" onClick={onClose}>×</button>
        <div className="label">A short form</div>
        <h2>Join the <em>coalition</em>.</h2>
        {sent ? (
          <p className="sent">Welcome. We'll be in touch within <em>two business days</em>.</p>
        ) : (
          <form onSubmit={e => { e.preventDefault(); setSent(true); }}>
            <div className="field"><label>Full Name</label><input defaultValue="Sam Houston"/></div>
            <div className="field"><label>Email</label><input defaultValue="sam@example.org"/></div>
            <div className="field"><label>Role</label>
              <select><option>Clinician</option><option>Patient</option><option>Employer</option><option>Payer</option><option>Researcher</option></select>
            </div>
            <button className="btn btn-primary" type="submit">Sign &amp; send</button>
          </form>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Hero, Ticker, Mission, Priorities, QuoteBreak, About, Join, Footer, JoinDialog });