// Landing screen with three hero variants.

const Typewriter = ({ text, speed = 70, startDelay = 350 }) => {
  const reduce = typeof window !== 'undefined' &&
    window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const [i, setI] = React.useState(reduce ? text.length : 0);
  const [done, setDone] = React.useState(reduce);
  React.useEffect(() => {
    if (reduce) return;
    const start = setTimeout(() => {
      const id = setInterval(() => {
        setI((n) => {
          if (n >= text.length) { clearInterval(id); setDone(true); return n; }
          return n + 1;
        });
      }, speed);
    }, startDelay);
    return () => clearTimeout(start);
  }, [text, speed, startDelay, reduce]);
  return (
    <span className={`typewriter ${done ? 'done' : ''}`}>
      <span className="tw-text">{text.slice(0, i)}</span>
      <span className="tw-caret" aria-hidden="true"></span>
    </span>
  );
};

const Rotor = ({ words, interval = 2200 }) => {
  const [i, setI] = React.useState(0);
  const [phase, setPhase] = React.useState('in');
  React.useEffect(() => {
    const t = setTimeout(() => setPhase('out'), interval - 500);
    const t2 = setTimeout(() => { setI((i + 1) % words.length); setPhase('in'); }, interval);
    return () => { clearTimeout(t); clearTimeout(t2); };
  }, [i, interval, words.length]);
  return (
    <span className="rotor" style={{ minWidth: '8.6ch' }}>
      <span className={`slot ${phase}`}>{words[i]}</span>
    </span>
  );
};

const TICKER_ITEMS = [
  { what: "Administrative recovery surcharge removed", amt: 87, ago: "2m ago", where: "Phoenix, AZ" },
  { what: "IV saline 1L · markup adjusted", amt: 252, ago: "4m ago", where: "Brooklyn, NY" },
  { what: "Promo restored after expiration", amt: 38, ago: "6m ago", where: "Austin, TX" },
  { what: "3D rendering bundled out", amt: 385, ago: "8m ago", where: "San Diego, CA" },
  { what: "Regional sports surcharge waived", amt: 24, ago: "11m ago", where: "Boston, MA" },
  { what: "E/M downcoded · Level 4 → Level 3", amt: 865, ago: "14m ago", where: "Seattle, WA" },
  { what: "Equipment rental double-billed", amt: 142, ago: "17m ago", where: "Denver, CO" },
  { what: "Mechanic shop supplies fee", amt: 78, ago: "19m ago", where: "Dallas, TX" },
  { what: "Streaming bundle · 3 forgotten", amt: 47, ago: "22m ago", where: "Portland, OR" },
  { what: "Hotel resort fee disputed", amt: 105, ago: "25m ago", where: "Miami, FL" }
];
const Ticker = () => {
  const items = [...TICKER_ITEMS, ...TICKER_ITEMS];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {items.map((it, i) => (
          <span key={i} className="ticker-item">
            <i className="pip"></i>
            <span>{it.what}</span>
            <span className="amt">−${it.amt.toLocaleString()}</span>
            <span className="ago">{it.where} · {it.ago}</span>
          </span>
        ))}
      </div>
    </div>
  );
};

const useReveal = () => {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.reveal-in)');
    if (!els.length) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add('reveal-in'); io.unobserve(e.target); }
      });
    }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
};

const Brand = ({ onClick }) =>
<div className="brand" onClick={onClick} style={onClick ? { cursor: 'pointer' } : undefined} role={onClick ? 'link' : undefined} tabIndex={onClick ? 0 : undefined}>
    <span className="check" aria-hidden="true">✓</span>
    <span>checkthisbill</span>
    <span className="tld">.com</span>
  </div>;


const Nav = ({ onPage, currentScreen, onReset, darkMode, onToggleDark }) =>
<nav className="nav">
    <div className="container nav-inner">
      <Brand onClick={onReset} />
      <div className="nav-links">
        <a onClick={() => onPage('how')}>How it works</a>
        <a onClick={() => onPage('ai')}>AI statement</a>
        <a onClick={() => onPage('data')}>How we use data</a>
        <a onClick={() => onPage('privacy')}>Privacy</a>
        {currentScreen !== 'landing' &&
      <a onClick={onReset} style={{ color: 'var(--ink-3)' }}>↺ New bill</a>
      }
        <a
          className="support-link"
          href="https://donate.stripe.com/7sY5kE7XRdvw7Zl4uU0VO03"
          target="_blank"
          rel="noopener noreferrer"
        >
          Support this tool ↗
        </a>
        <button
          className="dark-toggle"
          onClick={onToggleDark}
          aria-label={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
          title={darkMode ? 'Light mode' : 'Dark mode'}
        >
          {darkMode ? '☀' : '☾'}
        </button>
      </div>
    </div>
  </nav>;


// ─────────────────────────────────────────────────────────────────
// Upload card — used inside any hero variant.
// ─────────────────────────────────────────────────────────────────
const UploadCard = ({ onAnalyze }) => {
  const [drag, setDrag] = React.useState(false);
  const [filename, setFilename] = React.useState(null);

  const handleFile = (f) => {
    setFilename(f?.name || "RiverbendER_Statement.pdf");
    setTimeout(() => onAnalyze(f || null), 360);
  };

  return (
    <div
      className={`upload ${drag ? 'drag' : ''}`}
      onDragOver={(e) => {e.preventDefault();setDrag(true);}}
      onDragLeave={() => setDrag(false)}
      onDrop={(e) => {
        e.preventDefault();setDrag(false);
        handleFile(e.dataTransfer.files?.[0]);
      }}>
      
      <div className="dropbox">PDF</div>
      <div className="copy">
        <h3>Upload any bill</h3>
        <p>{filename ? `Reading ${filename}…` : 'Drag a PDF or image here. Or paste a screenshot.'}</p>
        <div className="upload-meta">
          <span><i className="sigil"></i> Files never leave the analysis session</span>
          <span><i className="sigil"></i> No account required</span>
          <span><i className="sigil"></i> 30s typical</span>
        </div>
      </div>
      <div className="actions">
        <label className="btn ghost">
          Choose file
          <input
            type="file"
            className="file-input"
            accept="application/pdf,image/*"
            onChange={(e) => handleFile(e.target.files?.[0])} />
          
        </label>
        <button className="btn" onClick={() => handleFile()}>
          Try a sample bill →
        </button>
      </div>
    </div>);

};

// ─────────────────────────────────────────────────────────────────
// Hero variant: Editorial (default)
// ─────────────────────────────────────────────────────────────────
const HeroEditorial = ({ onAnalyze }) =>
<div className="hero">
    <div className="hero-grid"></div>
    <div className="hero-orb a"></div>
    <div className="hero-orb b"></div>
    <div className="container">
      <span className="eyebrow"><span className="pulse"></span> A calm second opinion on every bill</span>
      <div className="hero-edit">
        <div>
          <h1>
            We read the <em className="draw-underline"><Typewriter text="fine print." /></em>{' '}
            <br />You keep the difference.
          </h1>
          <p className="lede">
            Upload a medical statement, internet bill, repair quote, or subscription invoice.
            We extract every line item, flag the suspicious ones, compare them against
            regional benchmarks, and draft the exact words to use when you call billing.
          </p>
          <UploadCard onAnalyze={onAnalyze} />
        </div>
        <div className="fee-callouts">
          <h3 className="fee-callouts-heading">Examples</h3>
          <div className="fee-callout flag">
            <div className="name">Administrative recovery</div>
            <div className="price">$87.00</div>
            <div className="note">No clinical basis. Not industry-standard. Removable on request.</div>
          </div>
          <div className="fee-callout flag">
            <div className="name">3D rendering on CT</div>
            <div className="price">$385.00</div>
            <div className="note">Bundled into the primary CT under NCCI edits.</div>
          </div>
          <div className="fee-callout">
            <div className="name">IV saline 1L</div>
            <div className="price">$60–90 typical</div>
            <div className="note">You were billed $342. Markup is 5–10× regional benchmark.</div>
          </div>
          <div className="fee-callout">
            <div className="name">Pulse oximetry</div>
            <div className="price">Bundled</div>
            <div className="note">Already included in the ER visit code. Likely double-billed.</div>
          </div>
          <div className="fee-callout flag">
            <div className="name">Internet promo expired</div>
            <div className="price">+$38.00/mo</div>
            <div className="note">Promo lapsed silently 3 months ago. Same plan averages 22% less in your zip.</div>
          </div>
          <div className="fee-callout flag">
            <div className="name">Hotel resort fee</div>
            <div className="price">$45.00/night</div>
            <div className="note">Not disclosed at booking. Frequently waived on request, especially for loyalty members.</div>
          </div>
          <div className="fee-callout">
            <div className="name">Mechanic shop supplies</div>
            <div className="price">3–5% typical</div>
            <div className="note">You were charged 12% of labor. Many states cap or require itemization.</div>
          </div>
          <div className="fee-callout flag">
            <div className="name">Forgotten subscriptions</div>
            <div className="price">$47.00/mo</div>
            <div className="note">Three streaming services with no logins in 90+ days. Easy to cancel.</div>
          </div>
          <div className="fee-callout">
            <div className="name">Regional sports surcharge</div>
            <div className="price">$13.99/mo</div>
            <div className="note">Optional in your market. Removable with one chat to retention.</div>
          </div>
        </div>
      </div>
    </div>
  </div>;


// ─────────────────────────────────────────────────────────────────
// Hero variant: Numerical (a single huge stat)
// ─────────────────────────────────────────────────────────────────
const HeroNumerical = ({ onAnalyze }) =>
<div className="hero">
    <div className="hero-grid"></div>
    <div className="hero-orb a"></div>
    <div className="container">
      <span className="eyebrow"><span className="pulse"></span> Median savings, last 30 days</span>
      <div className="hero-num">
        <div className="bignum tnum">
          $1,247<span className="pct">/ bill</span>
        </div>
        <div>
          <h1>The average <em>medical bill</em> contains four removable charges.</h1>
          <p className="lede" style={{ marginBottom: 32 }}>
            Upload yours. We'll mark the ones that don't belong, the ones that look high for your area,
            and the ones to negotiate. No account, no dashboard, no upsell loop.
          </p>
          <UploadCard onAnalyze={onAnalyze} />
        </div>
      </div>
    </div>
  </div>;


// ─────────────────────────────────────────────────────────────────
// Hero variant: Tool-first (centered, sparse)
// ─────────────────────────────────────────────────────────────────
const HeroToolFirst = ({ onAnalyze }) =>
<div className="hero" style={{ textAlign: 'center' }}>
    <div className="hero-grid"></div>
    <div className="hero-orb a" style={{ left: '-200px', right: 'auto', top: '-160px' }}></div>
    <div className="hero-orb b" style={{ right: '-100px', left: 'auto' }}></div>
    <div className="container narrow">
      <span className="eyebrow" style={{ justifyContent: 'center', display: 'inline-flex' }}>
        <span className="pulse"></span> Read by humans. Audited by us.
      </span>
      <h1 style={{ textAlign: 'center', maxWidth: 'unset' }}>
        Explain this{' '}
        <Rotor words={['medical bill.', 'internet bill.', 'repair quote.', 'subscription.', 'hotel folio.']} />
      </h1>
      <p className="lede" style={{ margin: '0 auto 40px', textAlign: 'center', maxWidth: '52ch' }}>
        Upload the statement. We'll tell you what's normal,
        what's negotiable, and what to say. In about thirty seconds.
      </p>
      <UploadCard onAnalyze={onAnalyze} />
    </div>
  </div>;


// ─────────────────────────────────────────────────────────────────
// Pillars / trust strip / footer (shared on landing)
// ─────────────────────────────────────────────────────────────────
const Pillars = () =>
<section id="how-it-works" className="section">
    <div className="container">
      <div className="section-head">
        <h2>Three quiet superpowers,<br />built into every upload.</h2>
        <span className="meta">/ 01 — 03</span>
      </div>
      <div className="pillars">
        <div className="pillar">
          <span className="ix">/ 01 — Suspicious Fee Scanner</span>
          <h3>Lines that don't belong.</h3>
          <p>Bundled codes, phantom surcharges, recovery fees with no
          underlying service. We mark the lines payers routinely deny — and
          explain, in one sentence, why.</p>
        </div>
        <div className="pillar">
          <span className="ix">/ 02 — Bill Creep Detector</span>
          <h3>The slow climb, charted.</h3>
          <p>Promo expirations. Quiet $3 increases. Surcharges that appear
          one cycle and never leave. We look across statements, not just
          the one in front of you.</p>
        </div>
        <div className="pillar">
          <span className="ix">/ 03 — Rate My Bill</span>
          <h3>How you compare.</h3>
          <p>Anonymous percentile against bills uploaded in your zip code,
          for the same provider and plan tier. No leaderboards. Just a
          number that tells you whether to negotiate.</p>
        </div>
      </div>
    </div>
  </section>;


const TrustStrip = () =>
<section style={{ padding: '0', borderBottom: '1px solid var(--line-2)' }}>
    <div className="container">
      <div className="trust">
        <div className="trust-cell">
          <span className="k">Files retained</span>
          <span className="v">0</span>
        </div>
        <div className="trust-cell">
          <span className="k">Account required</span>
          <span className="v">Nope</span>
        </div>
        <div className="trust-cell">
          <span className="k">DATA SOLD</span>
          <span className="v">None</span>
        </div>
        <div className="trust-cell">
          <span className="k">Sold to</span>
          <span className="v">Nobody</span>
        </div>
      </div>
    </div>
  </section>;


const Footer = ({ onPage, onAnalyze }) =>
<footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <Brand />
          <p style={{ color: 'var(--ink-3)', fontSize: 'var(--fz-small)', maxWidth: '36ch', marginTop: 14 }}>
            A calm second opinion on every bill. Built so you read it once,
            negotiate once, and move on with your day.
          </p>
        </div>
        <div>
          <h4>Product</h4>
          <ul>
            <li onClick={() => onPage('how')}>How it works</li>
            <li onClick={() => onAnalyze && onAnalyze()}>Sample Bill</li>
          </ul>
        </div>
        <div>
          <h4>Trust</h4>
          <ul>
            <li onClick={() => onPage('ai')}>AI statement</li>
            <li onClick={() => onPage('data')}>How we use data</li>
            <li onClick={() => onPage('storage')}>We don't store your data</li>
          </ul>
        </div>
      </div>
      <div className="footer-fine">
        <span>© 2026 Checkthisbill.com · Not legal advice. Not financial advice.</span>
      </div>
      <div className="footer-disclaimer">
        <p>Checkthisbill.com does not assume responsibility or liability for any actions, decisions, or outcomes resulting from use of this website.</p>
        <p>AI can be wrong. Always verify findings independently before acting on them.</p>
      </div>
    </div>
  </footer>;


// Master landing
const Landing = ({ onAnalyze, hero, onPage }) => {
  useReveal();
  const HeroComp = hero === 'numerical' ? HeroNumerical :
  hero === 'tool' ? HeroToolFirst :
  HeroEditorial;
  return (
    <div className="fade-in">
      <HeroComp onAnalyze={onAnalyze} />
      <Ticker />
      <TrustStrip />
      <Pillars />
      <Footer onPage={onPage} onAnalyze={onAnalyze} />
    </div>);

};

Object.assign(window, { Landing, Nav, Brand, Footer });