function About() {
  return (
    <section id="about" className="py-24 md:py-32 border-t border-[var(--line)]">
      <div className="max-w-[1240px] mx-auto px-6 md:px-10">
        <div className="grid md:grid-cols-12 gap-12 md:gap-16 items-start">
          <div className="md:col-span-5 reveal">
            <div className="relative">
              <div className="editorial-frame aspect-[4/5] w-full rounded-[28px]">
                <img className="asset-photo" src="assets/interior.jpg" alt="Warm Bayside living room prepared for a property campaign" />
              </div>
              <div className="absolute -bottom-4 -right-4 hidden md:block">
                <div
                  className="px-5 py-4 rounded-[18px] font-display text-[16px] shadow-[0_22px_42px_-30px_rgba(31,26,22,.45)]"
                  style={{ background: 'var(--accent)', color: 'var(--accent-ink)' }}
                >
                  Ready before market
                </div>
              </div>
            </div>
          </div>

          <div className="md:col-span-7 md:pl-4">
            <p className="text-[12px] tracking-[0.18em] uppercase text-[var(--accent)] mb-5 reveal">
              About Clair · 01
            </p>
            <h2 className="font-display font-light text-[36px] sm:text-[44px] md:text-[58px] leading-[1.02] tracking-tight reveal reveal-delay-1">
              A quieter kind of real estate, built around preparation and trust.
            </h2>

            <div className="mt-8 space-y-5 text-[17px] leading-[1.65] text-[var(--ink-2)] reveal reveal-delay-2">
              <p>
                Clair works with homeowners across Bayside Melbourne who want clear advice before making a move. The focus is simple: understand the property, read the buyer pool, then build a campaign that feels considered rather than rushed.
              </p>
              <p>
                Selling a home can get noisy fast. Clair keeps the process steady with plain language pricing advice, careful presentation notes and regular updates after every inspection.
              </p>
              <p>
                For buyers, the value is local context. Streets, school zones, renovation potential, auction pressure and the little details that rarely show up in a listing description.
              </p>
              <p>
                The tone is warm but direct. No pressure tactics. No mystery numbers. Just honest property guidance from the first conversation through settlement.
              </p>
            </div>

            <div className="mt-10 flex items-center gap-5 reveal reveal-delay-3">
              <div className="font-display italic text-[34px] leading-none" style={{ color: 'var(--accent)' }}>
                Clair
              </div>
              <div className="flex-1 hairline" />
              <div className="text-[11px] tracking-[0.14em] uppercase text-[var(--muted)]">
                Property advisor · Bayside specialist
              </div>
            </div>

            <div className="mt-10 grid grid-cols-2 sm:grid-cols-3 gap-y-5 gap-x-6 reveal reveal-delay-4">
              {[
                ['Focus', 'Residential sales and buying advice'],
                ['Area', 'Bayside and inner south east Melbourne'],
                ['Style', 'Calm, direct, detail-led'],
              ].map(([k, v]) => (
                <div key={k}>
                  <div className="text-[10px] tracking-[0.16em] uppercase text-[var(--muted)]">{k}</div>
                  <div className="text-[14px] mt-1 text-[var(--ink)]">{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About });