function Hero({ onBook }) {
  return (
    <section className="bw-hero__section" style={{ maxWidth: 1180, margin: "0 auto", padding: "64px 28px 40px" }}>
      <div className="bw-hero__grid">
        <div className="bw-hero__copy">
          <h1 className="bw-hero__title" style={{ fontSize: "clamp(42px, 5.3vw, 70px)", lineHeight: 0.98, letterSpacing: "-0.045em", margin: 0, color: "var(--text-strong)", maxWidth: "11ch" }}>
            Help your child <span style={{ color: "var(--sky-600)" }}>bloom</span> at their own pace.
          </h1>
          <p className="bw-hero__lead" style={{ fontSize: 19, lineHeight: 1.6, color: "var(--text-muted)", maxWidth: "42ch", margin: "20px 0 0" }}>
            Play-based pediatric therapy, coordinated by specialists and centered on your family.
          </p>
          <div className="bw-hero__actions" style={{ display: "flex", gap: 14, marginTop: 30, flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" onClick={onBook} trailingIcon={<Icon name="arrow-right" size={18} />}>Schedule a consultation</Button>
            <Button variant="outline" size="lg" leadingIcon={<Icon name="play" size={18} />}>See how it works</Button>
          </div>
          <div className="bw-hero__families">
            <div style={{ display: "flex" }}>
              {["MR", "JL", "SC", "AP"].map((n, i) => (
                <div key={n} style={{ marginLeft: i ? -12 : 0 }}><Avatar name={n} size="sm" /></div>
              ))}
            </div>
            <div style={{ fontSize: 14, color: "var(--text-muted)", lineHeight: 1.4 }}>
              <strong style={{ color: "var(--text-body)" }}>New families welcome</strong><br />free consultations available
            </div>
          </div>
        </div>
        <div className="bw-hero__media" style={{ position: "relative" }}>
          <PhotoPlaceholder label="Child at play" tone="mix" style={{ aspectRatio: "4 / 4.4", boxShadow: "var(--shadow-lg)" }} />
          <div className="bw-hero__floating-card" style={{
            position: "absolute", bottom: -18, left: -18, background: "var(--surface-card)",
            borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-md)", padding: "14px 18px",
            display: "flex", alignItems: "center", gap: 12,
          }}>
            <span style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--sage-100)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--sage-600)" }}>
              <Icon name="sparkles" size={20} />
            </span>
            <div style={{ fontSize: 13, lineHeight: 1.3 }}>
              <strong style={{ fontFamily: "var(--font-display)", color: "var(--text-strong)" }}>One connected plan</strong><br />
              <span style={{ color: "var(--text-muted)" }}>for your child's next step</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;