// Hero — split layout. Left: type + CTA. Right: kit "render" composition.
function Hero({ headline, kitVariant }) {
  return (
    <section className="hero" id="top">
      <div className="container hero-grid">
        <div className="hero-copy">
          <div className="eyebrow reveal in"><span className="dot"></span>Environmental testing · accredited lab</div>
          <h1 className="reveal in">
            {headline.split('\n').map((line, i) => (
              <React.Fragment key={i}>
                {i > 0 && <br/>}
                {line}
              </React.Fragment>
            ))}
          </h1>
          <p className="lead hero-lead reveal in">
            Test for asbestos, lead, and mold from home using accredited
            laboratory analysis and easy mail-in sample kits.
          </p>
          <div className="hero-cta reveal in">
            <a className="btn btn-primary" href="#order">
              Order Your Kit
              <IconArrow size={16} stroke={1.6} className="arrow"/>
            </a>
            <a className="btn btn-link" href="#how">Learn how it works</a>
          </div>

          <ul className="hero-meta reveal in">
            <li><IconCheck size={14} stroke={1.8}/> Results in 5–7 days</li>
            <li><IconCheck size={14} stroke={1.8}/> Prepaid return mailer</li>
            <li><IconCheck size={14} stroke={1.8}/> Plain-language report</li>
          </ul>
        </div>

        <div className="hero-visual reveal in">
          <KitRender variant={kitVariant}/>
        </div>
      </div>

      {/* Lab partner strip */}
      <div className="container partner-strip">
        <div className="partner-line"></div>
        <div className="partner-text">
          <span className="eyebrow"><span className="dot"></span>Laboratory partner</span>
          <span className="partner-name">AIH Laboratory · Accredited environmental testing</span>
        </div>
        <div className="partner-line"></div>
      </div>
    </section>
  );
}

// "Render" of the kit. Knolling-style flat layout using simple primitives.
function KitRender({ variant = "knolling" }) {
  if (variant === "box") return <KitBox/>;
  if (variant === "abstract") return <KitAbstract/>;
  return <KitKnolling/>;
}

function KitKnolling() {
  return (
    <div className="kit-stage">
      <div className="kit-grid-bg" aria-hidden="true"></div>

      {/* Box */}
      <div className="kit-item kit-box">
        <div className="kit-box-top">
          <div className="kit-box-band">
            <span className="kit-box-mark"><IconLogo size={14}/></span>
            <span className="kit-box-label">HAVEN<br/><em>Home Environmental Test Kit</em></span>
          </div>
          <div className="kit-box-batch">N°&nbsp;024 · ASB / PB / MOLD</div>
        </div>
        <div className="kit-box-side"></div>
      </div>

      {/* Instruction card */}
      <div className="kit-item kit-card">
        <div className="kit-card-line strong"></div>
        <div className="kit-card-line"></div>
        <div className="kit-card-line short"></div>
        <div className="kit-card-foot">
          <span>01 — 04</span>
          <span>Activate online</span>
        </div>
      </div>

      {/* Sample tube */}
      <div className="kit-item kit-tube">
        <div className="kit-tube-cap"></div>
        <div className="kit-tube-body">
          <div className="kit-tube-fill"></div>
          <div className="kit-tube-tick"></div>
        </div>
      </div>

      {/* Return mailer */}
      <div className="kit-item kit-mailer">
        <div className="kit-mailer-stamp">PREPAID<br/>RETURN</div>
        <div className="kit-mailer-bar"></div>
        <div className="kit-mailer-bar short"></div>
      </div>

      {/* Swatch / accent */}
      <div className="kit-item kit-swatch"><span>#2AB3B1</span></div>

      <span className="kit-caption">FIG. 01 — KIT CONTENTS, 1:1</span>
    </div>
  );
}

function KitBox() {
  return (
    <div className="kit-stage kit-stage-center">
      <div className="kit-grid-bg" aria-hidden="true"></div>
      <div className="kit-bigbox">
        <div className="kit-bigbox-top">
          <div className="kit-box-mark big"><IconLogo size={20}/></div>
          <div className="kit-bigbox-label">
            <div className="kit-bigbox-brand">HAVEN</div>
            <div className="kit-bigbox-sub">Home Environmental Test Kit</div>
          </div>
          <div className="kit-bigbox-meta">
            <div>BATCH</div><div>N°&nbsp;024</div>
            <div>PANEL</div><div>ASB · PB · MOLD</div>
          </div>
        </div>
      </div>
      <span className="kit-caption">FIG. 01 — KIT, FRONT</span>
    </div>
  );
}

function KitAbstract() {
  return (
    <div className="kit-stage kit-stage-center kit-abstract">
      <div className="kit-abs-ring"></div>
      <div className="kit-abs-ring kit-abs-ring-2"></div>
      <div className="kit-abs-core"></div>
      <span className="kit-caption">FIG. 01 — SAMPLE INTEGRITY</span>
    </div>
  );
}

window.Hero = Hero;