const SERVICES = [
  {
    icon: 'IconHouseTag',
    n: '01',
    title: 'Selling well',
    body: 'A measured campaign plan for pricing, styling, photography, buyer follow-up and negotiation. You know what is happening and why before the property goes live.',
  },
  {
    icon: 'IconCompass',
    n: '02',
    title: 'Buying with context',
    body: 'Street-level guidance for buyers who want more than the listing copy. Understand value, risk, competition and when to walk away.',
  },
  {
    icon: 'IconKey',
    n: '03',
    title: 'Appraisal and next steps',
    body: 'A practical read on your home, your likely buyer pool and the small improvements that could change the result before you spend money.',
  },
];

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

  return (
    <section
      id="services"
      className="py-24 md:py-32 border-t border-[var(--line)]"
      style={{ background: 'var(--bg-2)' }}
    >
      <div className="max-w-[1240px] mx-auto px-6 md:px-10">
        <div className="flex items-end justify-between flex-wrap gap-6 mb-14 md:mb-20">
          <div className="max-w-[680px]">
            <p className="text-[12px] tracking-[0.18em] uppercase text-[var(--accent)] mb-4 reveal">
              Services · 02
            </p>
            <h2 className="font-display font-light text-[36px] sm:text-[44px] md:text-[58px] leading-[1.02] tracking-tight reveal reveal-delay-1">
              Property decisions feel easier when the plan is clear.
            </h2>
          </div>
          <p className="max-w-[390px] text-[15px] leading-[1.6] text-[var(--ink-2)] reveal reveal-delay-2">
            Every conversation starts with your situation first. Selling soon, buying quietly or just checking your options, Clair gives you a plan you can actually use.
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-5 md:gap-6">
          {SERVICES.map((s, i) => {
            const Icon = window[s.icon];
            return (
              <article
                key={s.title}
                className={`card-hover group bg-[var(--bg)] border border-[var(--line)] rounded-[24px] p-7 md:p-8 reveal reveal-delay-${i + 1} flex flex-col min-h-[330px]`}
              >
                <div className="flex items-center justify-between mb-10 md:mb-14">
                  <div
                    className="w-12 h-12 rounded-full grid place-items-center"
                    style={{ background: 'var(--accent-soft)', color: 'var(--accent)' }}
                  >
                    <Icon />
                  </div>
                  <span className="text-[11px] tracking-[0.18em] uppercase text-[var(--muted)]">{s.n}</span>
                </div>

                <h3 className="font-display text-[28px] md:text-[34px] tracking-tight leading-[1.05]">
                  {s.title}
                </h3>
                <p className="mt-4 text-[15px] leading-[1.65] text-[var(--ink-2)]">{s.body}</p>

                <a
                  href="#contact"
                  onClick={scrollToContact}
                  className="mt-auto pt-8 inline-flex items-center gap-2 text-[13px] font-medium text-[var(--ink)] link-underline w-fit"
                >
                  Ask Clair about this
                  <IconArrowUpRight />
                </a>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services });