function Hero() {
  const openBookingModal = () => {
    let modal = document.getElementById('booking-modal');
    if (!modal) {
      modal = document.createElement('div');
      modal.id = 'booking-modal';
      modal.style.cssText = `
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5); display: flex; align-items: center;
        justify-content: center; z-index: 9999;
      `;
      modal.innerHTML = `
        <div style="background: white; border-radius: 12px;
          width: 90vw; height: 90vh; max-width: 1200px; max-height: 800px;
          overflow: hidden; position: relative;">
          <button id="modal-close" style="position: absolute; top: 20px; right: 20px;
            background: white; border: none; font-size: 24px; cursor: pointer;
            color: #666; z-index: 10000; width: 36px; height: 36px;
            border-radius: 50%; display: flex; align-items: center;
            justify-content: center;">&times;</button>
          <iframe id="calendar-iframe"
            src="https://calendar.google.com/calendar/appointments/schedules/AcZssZ1reaYeikSmVMJn2-PxYgQ0PiwKIqdmx6K8NZHazWXDjkiNuK9MG6PTyF6utsUZU7rFxn8tJtSF?gv=true"
            style="width: 100%; height: 100%; border: none; border-radius: 12px;">
          </iframe>
        </div>
      `;
      document.body.appendChild(modal);

      document.getElementById('modal-close').addEventListener('click', () => {
        modal.remove();
      });

      modal.addEventListener('click', (e) => {
        if (e.target === modal) modal.remove();
      });
    } else {
      modal.style.display = 'flex';
    }
  };

  return (
    <section id="top" style={{
      position: "relative",
      minHeight: "min(820px, 100vh)",
      paddingTop: 76,
      overflow: "hidden",
    }}>
      {/* Background image */}
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "url(assets/hero-bg.png)",
        backgroundSize: "cover",
        backgroundPosition: "center right",
        zIndex: 0,
      }} />
      {/* Soft left gradient for readability */}
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(105deg, rgba(122, 152, 130, 0.55) 0%, rgba(180, 195, 160, 0.18) 45%, rgba(255,255,255,0) 70%)",
        zIndex: 1,
      }} />

      <div className="wrap" style={{ position: "relative", zIndex: 2, paddingTop: "10vh", paddingBottom: 80 }}>
        <div style={{ maxWidth: 640 }} className="fade-up">
          <p className="eyebrow" style={{ color: "rgba(31, 58, 46, 0.7)", marginBottom: 24 }}>
            <span style={{ display: "inline-block", width: 28, height: 1, background: "currentColor", verticalAlign: "middle", marginRight: 12 }}></span>
            Zeezoo Therapy · Oakland, CA
          </p>
          <h1 className="serif" style={{
            fontSize: "clamp(44px, 6.4vw, 78px)",
            lineHeight: 1.02,
            color: "var(--forest)",
            letterSpacing: "-0.015em",
            marginBottom: 28,
          }}>
            A softer way<br/>
            to feel like<br/>
            <em style={{ fontStyle: "italic", color: "var(--terracotta)" }}>yourself</em> again.
          </h1>
          <p style={{
            fontSize: "clamp(17px, 1.4vw, 19px)",
            lineHeight: 1.55,
            color: "var(--forest)",
            maxWidth: 480,
            marginBottom: 40,
            padding: "16px 20px",
            background: "rgba(255, 255, 255, 0.85)",
            borderRadius: 8,
            backdropFilter: "blur(8px)",
          }}>
            Relational, evidence-based therapy for parents, families, and
            individuals navigating life's tender transitions — online or under
            the oaks of the East Bay.
          </p>
          <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
            <button onClick={openBookingModal} className="btn btn-primary">
              Book free 15-min consult <IconArrow size={18} />
            </button>
            <a href="#about" className="btn btn-ghost">Learn more</a>
          </div>

          {/* Feature row */}
          <div className="feature-row" style={{
            marginTop: 72, display: "grid",
            gridTemplateColumns: "repeat(3, minmax(0,1fr))",
            gap: 0,
            maxWidth: 520,
          }}>
            {[
              { icon: IconSprout, label: "Eco-therapy informed" },
              { icon: IconPerson, label: "Relational & personal" },
              { icon: IconShield, label: "Private & affirming" },
            ].map((f, i) => (
              <div key={i} className="feature-item" style={{
                padding: "0 18px",
                borderLeft: i === 0 ? "none" : "1px solid rgba(31, 58, 46, 0.18)",
                paddingLeft: i === 0 ? 0 : 18,
                display: "flex",
                flexDirection: "column",
                alignItems: i === 0 ? "flex-start" : "center",
              }}>
                <f.icon size={26} stroke="var(--moss)" />
                <p style={{
                  marginTop: 10, fontSize: 13.5,
                  color: "var(--forest)", fontWeight: 500, lineHeight: 1.4,
                  textAlign: i === 0 ? "left" : "center",
                }}>{f.label}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Soft availability ribbon */}
      <div className="availability-ribbon" style={{
        position: "absolute", bottom: 0, left: 0, right: 0,
        zIndex: 3, padding: "18px 32px",
        background: "linear-gradient(180deg, transparent, rgba(31,58,46,0.85))",
        color: "var(--cream)",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        gap: 16, flexWrap: "wrap",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 14 }}>
          <span style={{
            width: 8, height: 8, borderRadius: "50%", background: "#9bd29b",
            boxShadow: "0 0 0 4px rgba(155, 210, 155, 0.25)",
          }}></span>
          Currently welcoming new clients · Thursdays & Fridays
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 24, fontSize: 13.5, opacity: 0.9 }}>
          <span>Sliding scale $30–$60</span>
          <span style={{ opacity: 0.4 }}>·</span>
          <span>Telehealth + In-person</span>
        </div>
      </div>

      <style>{`
        @media (max-width: 720px) {
          .feature-row { display: none !important; }
          .availability-ribbon { padding: 14px 20px !important; }
          .availability-ribbon > div:last-child { gap: 12px !important; }
          .availability-ribbon span:not(:first-child) { display: none; }
        }
        @media (max-width: 480px) {
          .feature-row { grid-template-columns: 1fr !important; gap: 24px !important; }
          .feature-item { padding: 0 !important; border-left: none !important; align-items: flex-start !important; }
          .feature-item p { font-size: 13px !important; text-align: left !important; }
          .availability-ribbon { padding: 12px 16px !important; }
          .availability-ribbon { flex-direction: column !important; align-items: start !important; gap: 8px !important; }
          .availability-ribbon > div:last-child { display: flex; gap: 6px; font-size: 11px; }
        }
      `}</style>
    </section>
  );
}

window.Hero = Hero;