const STATS = [
  { value: '01', label: 'Advice before selling. You understand price, timing and buyer profile before any campaign spend.' },
  { value: '02', label: 'Campaigns with restraint. Fewer gimmicks, better presentation and sharper follow-up.' },
  { value: '03', label: 'Straight communication. Inspection feedback, buyer questions and next steps explained clearly.' },
  { value: '04', label: 'Negotiation with context. Decisions are tied to evidence, not pressure or guesswork.' },
];

function WhyMe() {
  return (
    <section id="why" 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-10 mb-14 md:mb-20 items-end">
          <div className="md:col-span-7">
            <p className="text-[12px] tracking-[0.18em] uppercase text-[var(--accent)] mb-4 reveal">
              Why work with Clair · 03
            </p>
            <h2 className="font-display font-light text-[36px] sm:text-[44px] md:text-[58px] leading-[1.02] tracking-tight reveal reveal-delay-1">
              Less noise. Better decisions. A campaign that feels properly handled.
            </h2>
          </div>
          <p className="md:col-span-5 text-[15px] leading-[1.6] text-[var(--ink-2)] reveal reveal-delay-2">
            Clair is positioned for people who care about the details: the way a home is shown, the way buyers are followed up and the way every decision is explained.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-4 gap-y-10 md:gap-y-0 md:divide-x divide-[var(--line)]">
          {STATS.map((s, i) => (
            <div key={s.label} className={`reveal reveal-delay-${i + 1} md:px-8 first:md:pl-0 last:md:pr-0`}>
              <div className="font-display font-light text-[42px] sm:text-[50px] md:text-[62px] leading-[1] tracking-tight" style={{ color: 'var(--accent)' }}>
                {s.value}
              </div>
              <div className="mt-5 text-[13px] tracking-[0.03em] text-[var(--muted)] leading-relaxed max-w-[220px]">
                {s.label}
              </div>
            </div>
          ))}
        </div>

        <div className="mt-20 grid md:grid-cols-12 gap-6 reveal">
          <div className="md:col-span-7 editorial-frame rounded-[28px] aspect-[16/10]">
            <img className="asset-photo" src="assets/featured-home.jpg" alt="Modern Bayside Melbourne home exterior" />
          </div>
          <div className="md:col-span-5 rounded-[28px] border border-[var(--line)] bg-[var(--bg-2)] p-8 md:p-10 flex flex-col justify-between">
            <div>
              <div className="text-[11px] tracking-[0.18em] uppercase text-[var(--accent)] mb-5">Campaign note</div>
              <h3 className="font-display text-[34px] leading-[1.05] tracking-tight">The little things decide the big number.</h3>
            </div>
            <p className="mt-8 text-[15px] leading-[1.7] text-[var(--ink-2)]">
              Small changes to lighting, styling, photo order, open time and buyer follow-up can shift the way a property is remembered. Clair's process is built around those details.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WhyMe });