/* global React, Icon, Button, SectionHead, Reveal, Img, ImpactBand, CountUp */

function HomeHero({ onContact }) {
  return (
    <header className="hero" id="top">
      <video className="hero-video" autoPlay muted loop playsInline poster="assets/photos/silk-white.jpg">
        <source src="assets/video/white-texture.mp4" type="video/mp4" />
      </video>
      <div className="hero-bg" />
      <div className="wrap hero-grid">
        <div className="hero-copy">
          <Reveal className="rule-dove" style={{ marginBottom: 18 }} />
          <Reveal delay={60}><span className="eyebrow">Optimizing Health Outcomes</span></Reveal>
          <Reveal as="h1" delay={120} style={{ marginTop: 16, fontSize: "clamp(2.4rem, 6vw, 60px)" }}>
            Intelligence-Driven. <span className="accent">Human-Centered.</span>
          </Reveal>
          <Reveal delay={200}>
            <p style={{ fontSize: "16px", lineHeight: 1.62, color: "var(--ink-500)", maxWidth: "48ch", marginTop: "22px" }}>
              HCDI helps health plans, government agencies, providers, and public health
              partners close the distance between data and the people who need care most.
            </p>
            <p style={{ fontSize: "16px", lineHeight: 1.62, color: "var(--ink-500)", maxWidth: "48ch", marginTop: "14px" }}>
              We combine analytics, health equity strategy, community-based outreach, and
              human-centered intervention to help organizations identify high-risk populations,
              close care gaps, improve quality performance, and build trust with the communities they serve.
            </p>
          </Reveal>
          <Reveal delay={280} className="hero-cta">
            <Button variant="grad" size="lg" onClick={onContact}>Partner with HCDI</Button>
            <Button variant="ghost" size="lg" href="#solutions" showIcon={false}>Explore our solutions</Button>
          </Reveal>
          <Reveal delay={360} className="hero-trust">
            <div><div className="num tnum">2<em>M+</em></div><span className="k">Members engaged</span></div>
            <div><div className="num tnum">4,500+</div><span className="k">HEDIS gaps closed</span></div>
            <div><div className="num tnum">30+<em>yrs</em></div><span className="k">Of proven impact</span></div>
          </Reveal>
        </div>
        <div className="hero-media">
          <div className="imgframe">
            <video className="imgframe-img" autoPlay muted loop playsInline poster="assets/photos/doctor-senior-1.jpg">
              <source src="assets/video/middle-home.mp4" type="video/mp4" />
            </video>
          </div>
        </div>
      </div>
    </header>
  );
}

function CertRow() {
  const certs = [
    { ic: "shieldCheck", t: "HITRUST Certified" },
    { ic: "lock", t: "HIPAA Compliant" },
    { ic: "award", t: "ACAP Member" },
    { ic: "fileText", t: "NQIIC Contractor" },
    { ic: "calendar", t: "30 Years" },
  ];
  return (
    <section className="trusted">
      <div className="wrap">
        <div className="lbl">Trusted, certified &amp; built for healthcare</div>
        <Reveal className="trusted-row">
          {certs.map((c) => (
            <span className="tmark" key={c.t}><Icon name={c.ic} size={20} className="ic" />{c.t}</span>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

function Difference() {
  return (
    <section className="section">
      <div className="wrap split">
        <Reveal className="split-media">
          <div className="imgframe" style={{ aspectRatio: "5 / 4" }}>
            <video className="imgframe-img" autoPlay muted loop playsInline poster="assets/photos/meeting-strategy.jpg">
              <source src="assets/video/middle-2.mp4" type="video/mp4" />
            </video>
          </div>
        </Reveal>
        <div>
          <div className="rule-dove" style={{ marginBottom: 15 }} />
          <span className="eyebrow">The HCDI difference</span>
          <h2 style={{ font: "var(--text-h1)", letterSpacing: "-0.02em", margin: "14px 0 0" }}><span style={{ display: "block", fontSize: "36px", fontWeight: 300 }}>Your data may show the gap.</span> <span className="text-grad">HCDI helps you reach the person behind it.</span></h2>
          <p className="lead" style={{ marginTop: 16, fontSize: "16px" }}>
            A missed screening, delayed follow-up, or open care gap rarely tells the full
            story. It may be connected to transportation, language, trust, cost, housing,
            food access, caregiving responsibilities, confusion around benefits, or a member
            who has been contacted many times but never truly engaged.
          </p>
          <p style={{ marginTop: 16, fontSize: "16px", lineHeight: 1.62, color: "var(--ink-500)" }}>
            For healthcare organizations, those barriers become measurable pressure. Care gaps
            stay open, quality scores suffer, HEDIS opportunities are missed, Star Ratings
            become harder to protect, retention becomes more fragile, and health equity goals
            become harder to execute.
          </p>
          <p style={{ marginTop: 14, fontSize: "16px", lineHeight: 1.62, color: "var(--ink-500)" }}>
            HCDI helps close that distance by turning data into direction, outreach into
            trust, and strategy into measurable health impact.
          </p>
        </div>
      </div>
    </section>
  );
}

function Solutions() {
  const sols = [
    { img: "sol-health-plans.jpg", t: "Health Plans", d: "We improve quality performance, close care gaps, engage high-risk members, support retention, and strengthen HEDIS and Star Ratings performance.", href: "health-plans.html" },
    { img: "sol-providers.jpg", t: "Providers & Risk-Bearing Groups", d: "We support value-based care, improve patient engagement, close care gaps, and help patients follow through beyond the clinical visit.", href: "providers.html" },
    { img: "sol-communities.jpg", t: "Communities", d: "We build trust, improve access, and connect people to the care, education, and support they need.", href: "communities.html" },
    { img: "sol-government.jpg", t: "Government", d: "We turn public health priorities into community-level programs that improve access, equity, outreach, and measurable engagement.", href: "government.html" },
  ];
  return (
    <section className="section alt" id="solutions">
      <div className="wrap">
        <SectionHead eyebrow="Who we help" title="Built for the organizations responsible for better outcomes."
          lead="HCDI partners with organizations that carry the responsibility of improving performance, access, trust, and measurable health impact." />
        <div className="sol-grid">
          {sols.map((s, i) => (
            <Reveal key={s.t} delay={i * 70}>
              <a className="sol-card" href={s.href}>
                <img className="sol-card-img" src={`assets/photos/${s.img}`} alt={s.t} loading="lazy" />
                <div className="sol-card-overlay">
                  <h3>{s.t}</h3>
                  <p>{s.d}</p>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function AIM() {
  const stats = [
    { to: 90, suffix: "+", k: "HEDIS measures" },
    { to: 6, suffix: "", k: "Domains of care" },
    { to: 236, suffix: "M+", k: "People in plans reporting HEDIS" },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <Reveal className="press-hero">
          <img className="press-hero-img" src="assets/photos/team-overhead.jpg" alt="Clinical team reviewing quality data" />
          <div className="press-hero-overlay">
            <div className="rule-dove" style={{ margin: "0 auto 16px" }} />
            <span className="eyebrow" style={{ color: "#FFD9A6" }}>The stakes</span>
            <h2>The pressure to perform is growing.</h2>
            <p>Quality performance is no longer just a reporting function. It affects reputation, reimbursement, compliance, growth, member experience, and community trust.</p>
          </div>
        </Reveal>
        <div className="press-stats">
          {stats.map((s, i) => (
            <Reveal className="press-stat" key={s.k} delay={i * 80}>
              <div className="ps-n text-grad tnum"><CountUp to={s.to} suffix={s.suffix} /></div>
              <div className="ps-k">{s.k}</div>
            </Reveal>
          ))}
        </div>
        <Reveal className="press-prose">
          <p>
            HEDIS includes more than 90 measures across 6 domains of care, shaping how health
            plans measure access, quality, experience, utilization, and outcomes. More than 236
            million people are enrolled in health plans reporting HEDIS results, making quality
            measurement one of the most important performance languages in healthcare.
          </p>
          <p>
            In Medicare Advantage, quality is increasingly competitive. Plans are expected to
            improve care coordination, engagement, access, and outcomes while serving
            populations with increasingly complex needs.
          </p>
          <p className="press-close">
            That is why HCDI exists. <span className="text-grad">We help organizations move
            from knowing where the gaps are to actually reaching the people behind them.</span>
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function OurImpact() {
  const stats = [
    { to: 2123741, k: "Total Number of Individuals Touched" },
    { to: 290528, k: "Number of Families Impacted" },
    { to: 7997, k: "SDoH Assessments Completed" },
    { to: 4612, k: "HEDIS Gaps Closed" },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <SectionHead eyebrow="Our impact" title="Real people reached. Real gaps closed." />
        <div className="impact-stats">
          {stats.map((s, i) => (
            <Reveal className="impact-stat" key={s.k} delay={i * 80}>
              <div className="is-n text-grad tnum"><CountUp to={s.to} format /></div>
              <div className="is-k">{s.k}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeCTA({ onContact }) {
  return (
    <section className="section">
      <div className="wrap">
        <Reveal className="cta">
          <div className="rule-dove" style={{ margin: "0 auto 18px", position: "relative", background: "rgba(255,255,255,.9)" }} />
          <h2>Let&rsquo;s optimize health outcomes together.</h2>
          <p>Partner with HCDI to close gaps, engage your hardest-to-reach members, and turn your data into measurable quality and cost results.</p>
          <div className="hero-cta">
            <Button variant="onorange" size="lg" onClick={onContact}>Partner with HCDI</Button>
            <Button variant="onorange-ghost" size="lg" href="who-we-are.html" showIcon={false}>Learn about us</Button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Home({ onContact }) {
  return (
    <main>
      <HomeHero onContact={onContact} />
      <CertRow />
      <Difference />
      <Solutions />
      <AIM />
      <ImpactBand />
      <OurImpact />
      <HomeCTA onContact={onContact} />
    </main>
  );
}

window.Home = Home;