// DomainIntro.jsx — three intro cards, aligned section-by-section.
// Each card is a flex column so the CTA row pins to the bottom regardless
// of body length.
function DomainIntro({ onOpen }) {
  const { domains, transitions } = CONTENT;

  return (
    <section id="domains" className="relative border-t border-b border-[color:var(--line)]">
      <div className="max-w-[1280px] mx-auto px-8 py-16">
        <div className="mb-10">
          <div className="eyebrow">01 · Visual language</div>
          <h2 className="font-display text-[34px] font-medium mt-2 text-[color:var(--ink)] max-w-3xl">
            Three things to recognize before you scroll.
          </h2>
          <p className="mt-4 text-[14.5px] leading-relaxed text-[color:var(--ink-dim)]">
            {transitions.intro}
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-5 items-stretch">
          {domains.map((d, i) => (
            <button key={d.id}
              onClick={() => onOpen({ type: "domain", id: d.id })}
              className="principle-card group text-left p-7 hover:-translate-y-0.5 transition-transform flex flex-col h-full">
              {/* Index row — fixed height so titles below align */}
              <div className="flex items-start justify-between h-5">
                <div className="eyebrow">0{i + 1}</div>
              </div>

              {/* Title — uniform line-height box so the three titles sit on the same baseline */}
              <h3 className="font-display text-[36px] font-medium mt-6 leading-none spectrum-text-sm inline-block">
                {d.name}
              </h3>

              {/* Tagline — exactly one line reserved */}
              <p className="mt-3 font-serif italic text-[15px] text-[color:var(--ink-dim)] leading-snug min-h-[1.4em]">
                {d.tagline}
              </p>

              {/* Body — flex-1 so the CTA pins to the bottom */}
              <p className="mt-4 text-[13px] leading-relaxed text-[color:var(--ink-dim)] flex-1">
                {d.body}
              </p>

              {/* CTA row */}
              <div className="mt-6 pt-5 border-t border-[color:var(--line)] flex items-center justify-between">
                <span className="font-mono text-[11px] uppercase tracking-[0.22em] text-[color:var(--ink-dim)] group-hover:text-[color:var(--accent-ink)] transition-colors">
                  Click to learn more
                </span>
                <svg width="14" height="14" viewBox="0 0 16 16"
                  className="text-[color:var(--ink-faint)] group-hover:text-[color:var(--accent-2)] group-hover:translate-x-0.5 transition-all"
                  fill="none" stroke="currentColor" strokeWidth="1.5">
                  <path d="M3 8h10M8 3l5 5-5 5"/>
                </svg>
              </div>
            </button>
          ))}
        </div>

        {/* KPI banner — rendered below the three cards, above the section's bottom border */}
        <div className="mt-14">
          <KPIBanner />
        </div>
      </div>
    </section>
  );
}
window.DomainIntro = DomainIntro;