function Hero() {
  const scrollTo = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 72, behavior: 'smooth' });
  };

  return (
    <section
      id="top"
      className="relative min-h-[100svh] pt-24 md:pt-28 pb-16 md:pb-20 grain overflow-hidden"
      style={{
        background:
          'radial-gradient(900px 560px at 85% 8%, rgba(159,90,54,0.16), transparent 62%), radial-gradient(760px 520px at 4% 94%, rgba(62,80,63,0.14), transparent 60%), var(--bg)',
      }}
    >
      <div className="absolute left-6 md:left-10 top-24 bottom-16 w-px bg-[var(--line)] hidden lg:block" />
      <div className="relative z-10 max-w-[1240px] mx-auto px-6 md:px-10 h-full">
        <div className="grid md:grid-cols-12 gap-10 md:gap-14 items-center">
          <div className="md:col-span-7">
            <div className="inline-flex items-center gap-3 rounded-full border border-[var(--line)] bg-[var(--bg)]/70 px-4 py-2 text-[11px] tracking-[0.14em] uppercase text-[var(--ink-2)] reveal">
              <span className="h-2 w-2 rounded-full bg-[var(--accent)]" />
              Bayside Melbourne property advice
            </div>

            <h1 className="font-display font-light text-[58px] sm:text-[78px] md:text-[112px] leading-[0.9] tracking-tight reveal reveal-delay-1 mt-7">
              Clair Real Estate
            </h1>
            <p className="mt-7 max-w-[600px] text-[18px] md:text-[20px] leading-[1.6] text-[var(--ink-2)] reveal reveal-delay-2">
              Calm, prepared property guidance for Bayside homeowners who want a strong result without the circus.
            </p>

            <div className="mt-9 flex flex-wrap items-center gap-3 reveal reveal-delay-3">
              <a
                href="#contact"
                onClick={scrollTo('contact')}
                className="btn-primary inline-flex items-center gap-2 px-5 py-3.5 rounded-full text-[14px] font-medium"
              >
                Request an appraisal
                <IconArrowRight />
              </a>
              <a
                href="#services"
                onClick={scrollTo('services')}
                className="btn-ghost inline-flex items-center gap-2 px-5 py-3.5 rounded-full text-[14px] font-medium"
              >
                See the approach
              </a>
            </div>

            <div className="mt-12 md:mt-14 grid grid-cols-3 gap-6 max-w-[620px] reveal reveal-delay-4">
              {[
                { k: 'Bayside', v: 'Brighton, Hampton, Sandringham and nearby streets' },
                { k: 'Prepared', v: 'Pricing, presentation and buyer strategy before launch' },
                { k: 'Private', v: 'Straight advice from Clair, not a handball to a team' },
              ].map((s) => (
                <div key={s.v}>
                  <div className="font-display text-[25px] sm:text-[30px] leading-none">{s.k}</div>
                  <div className="text-[11px] tracking-[0.08em] uppercase text-[var(--muted)] mt-2 leading-snug">
                    {s.v}
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="md:col-span-5 reveal reveal-delay-2">
            <div className="relative md:-rotate-2">
              <div className="editorial-frame aspect-[4/5] w-full rounded-[28px]">
                <img className="asset-photo" src="assets/clair-portrait.jpg" alt="Clair, Bayside Melbourne real estate advisor" />
              </div>

              <div
                className="hidden md:flex absolute -bottom-6 -left-6 px-5 py-4 rounded-[18px] bg-[var(--bg)] border border-[var(--line)] items-center gap-4 shadow-[0_24px_48px_-32px_rgba(31,26,22,0.3)]"
                style={{ width: 'min(310px, 78%)' }}
              >
                <div
                  className="w-10 h-10 rounded-full grid place-items-center text-[var(--accent-ink)]"
                  style={{ background: 'var(--accent)' }}
                >
                  <IconHouseTag size={20} />
                </div>
                <div>
                  <div className="text-[11px] tracking-[0.14em] uppercase text-[var(--muted)]">Vendor-first</div>
                  <div className="font-display text-[15px] leading-tight">
                    Clear advice before you commit
                  </div>
                </div>
              </div>

              <div className="absolute top-4 right-4 px-3 py-1.5 rounded-full bg-[var(--bg)]/85 backdrop-blur border border-[var(--line)] text-[11px] tracking-[0.12em] uppercase text-[var(--ink-2)]">
                Private appointments
              </div>
            </div>
          </div>
        </div>

        <div className="hidden md:flex items-center gap-3 text-[11px] tracking-[0.16em] uppercase text-[var(--muted)] mt-16 reveal reveal-delay-4">
          <span className="w-10 h-px bg-[var(--line)]" />
          Scroll
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });