/* Home.jsx — homepage view */

function Home({ onNav }) {
  return (
    <main data-screen-label="Home">
      {/* Hero */}
      <section className="hero">
        <Container>
          <div className="hero-grid">
            <div>
              <div className="hero-eyebrow">
                <span className="rule"></span>
                <span>Delayed-diagnosis review · South Carolina</span>
              </div>
              <h1>Clinical questions, <em>answered first.</em></h1>
              <p className="hero-lede">
                Delayed cancer diagnoses are clinical questions before they are legal ones. We review the record, identify the breach, and tell you — plainly — whether a case has merit.
              </p>
              <div className="hero-actions">
                <Button variant="primary" onClick={() => onNav('contact')}>Request a case review</Button>
                <Button variant="ghost" onClick={() => onNav('services')}>Read the methodology</Button>
              </div>
            </div>
            <aside className="hero-rail hero-rail--image">
              <figure className="hero-illus">
                <img src="../../assets/illus-ravenel.svg" alt="Arthur Ravenel Jr. Bridge over the Cooper River, Charleston" />
                <figcaption>
                  <span className="cap-eyebrow">Charleston Harbor</span>
                  <span className="cap-title">Arthur Ravenel Jr. Bridge · Cooper River</span>
                </figcaption>
              </figure>
              <p className="hero-rail-quote-sm">
                "The records say what they say. Our job is to read them carefully, in the order they were written."
              </p>
              <div className="hero-rail-attrib">— Founder, oncology NP at MUSC Hollings</div>
            </aside>
          </div>
        </Container>
      </section>

      <hr className="section-break" />

      {/* What we do */}
      <section className="section">
        <Container>
          <SectionHead
            eyebrow="What we do"
            num="§ 01"
            title="Three services. One report."
            lede="Every engagement begins with a merit review. If the records support a case, we build the chronology and stay on as the medical-legal anchor through trial."
          />
          <div className="svc-grid">
            <ServiceCard
              num="01"
              title="Merit screening"
              body="A clinically-trained read of the records to determine whether the facts support a delayed-diagnosis claim. Two-page memo, typically within ten business days."
            />
            <ServiceCard
              num="02"
              title="Medical-record review"
              body="Full chronology of the care episode with breach points and missed-window analysis, footnoted to the underlying records."
            />
            <ServiceCard
              num="03"
              title="Expert testimony"
              body="Deposition and trial testimony from a currently-practicing oncology NP at South Carolina's only NCI-designated cancer center."
            />
          </div>
        </Container>
      </section>

      {/* Pull quote */}
      <section style={{background: 'var(--parchment-deep)', borderTop: '1px solid var(--border-hairline)', borderBottom: '1px solid var(--border-hairline)'}}>
        <Container>
          <div className="pull-quote">
            <div>
              <p className="q">"A second set of eyes — clinically trained, plainly written. The kind of read you wish every record came with."</p>
              <div className="attrib">
                <span className="rule"></span>
                <span>South Carolina trial attorney · referred case, 2025</span>
              </div>
            </div>
            <div className="portrait" aria-hidden="true">Portrait — placeholder</div>
          </div>
        </Container>
      </section>

      {/* Carolina Cancer Case Card feature */}
      <section className="section" style={{paddingBottom: 0}}>
        <Container>
          <SectionHead
            eyebrow="Flagship deliverable"
            num="§ 02"
            title="The Carolina Cancer Case Card."
            lede="A one-page synthesis of the case — oncology timeline, breach points, damages — prepared for the trial team. Designed to be read in three minutes by a juror, an associate, or an expert in the hall."
          />
          <div className="feature-deliverable">
            <div className="left">
              <div className="label">Flagship deliverable</div>
              <h3>One page. One read.</h3>
              <p>The card distills months of record review into a single trial-ready page. Used by attorneys for opening prep, deposition framing, and expert handoffs.</p>
              <a className="btn btn-secondary" href="#services" onClick={(e) => { e.preventDefault(); onNav('services'); }} style={{borderColor: 'var(--gold-300)', color: 'var(--gold-100)'}}>See a sample</a>
            </div>
            <div className="right">
              <div className="card-mock">
                <div className="cm-head">
                  <span className="cm-eyebrow">CAROLINA CANCER CASE CARD</span>
                  <span className="cm-num">№ 2025–114</span>
                </div>
                <h4>Delayed colorectal carcinoma — F, 52</h4>
                <div className="cm-rule"></div>
                <div className="cm-rows">
                  <div className="cm-row"><b>Window</b><span>06/2021 – 11/2023 (29 mo)</span></div>
                  <div className="cm-row"><b>Breach</b><span>FOBT (+) without follow-up colonoscopy</span></div>
                  <div className="cm-row"><b>Stage</b><span>I at presumed dx → IIIB at actual dx</span></div>
                  <div className="cm-row"><b>Standard</b><span>USPSTF 2021 + NCCN 3.2021</span></div>
                  <div className="cm-row"><b>Damages</b><span>Adj. chemo, RT, ostomy; reduced 5-yr OS</span></div>
                </div>
                <div className="cm-foot">
                  <span>Carolina Oncology Review</span>
                  <span>p. 1 / 1</span>
                </div>
              </div>
            </div>
          </div>
        </Container>
      </section>

      {/* CTA banner */}
      <section className="banner-cta">
        <Container>
          <div className="inner">
            <div>
              <h3>Have a case that doesn't sit right?</h3>
              <p>Send the records under HIPAA authorization. We respond within five business days with a merit memo, a request for more, or a decline letter explaining why.</p>
            </div>
            <div className="actions">
              <Button variant="primary" onClick={() => onNav('contact')}>Request a review</Button>
              <Button variant="secondary" onClick={() => onNav('about')}>About the founder</Button>
            </div>
          </div>
        </Container>
      </section>
    </main>
  );
}

Object.assign(window, { Home });