// Section header used across sections
const SectionHead = ({ kicker, title, intro, align = "left" }) => (
  <div className={"max-w-[820px] " + (align === "center" ? "mx-auto text-center" : "")}>
    <div className="flex items-center gap-2 font-mono text-[11px] tracking-[0.2em] text-white/40 reveal">
      <span className="h-1.5 w-1.5 rounded-full bg-accent" />
      {kicker}
    </div>
    <h2 className="mt-5 display text-[44px] sm:text-[56px] lg:text-[68px] reveal reveal-delay-1">{title}</h2>
    {intro && <p className="mt-5 max-w-[620px] text-[16.5px] leading-[1.55] text-white/60 reveal reveal-delay-2">{intro}</p>}
  </div>
);

// SERVICES
const Services = () => {
  return (
    <section id="services" className="relative py-24 lg:py-32 border-t border-white/8">
      <div className="max-w-[1320px] mx-auto px-6 lg:px-10">
        <div className="flex items-end justify-between gap-8 flex-wrap">
          <SectionHead
            kicker="SERVICES · 06"
            title={<>Six disciplines.<br/><span className="font-serif italic font-normal text-white/60">One content engine.</span></>}
            intro="Hire one. Hire the studio. Each service is a stand-alone product, but they're sharper together — strategy informs creative, creative informs paid, paid informs strategy."
          />
          <a href="#contact" className="btn-ghost hidden md:inline-flex items-center gap-2 px-4 py-2.5 rounded-full text-[13.5px] reveal">
            See full capability deck
            <Icon name="arrow-up-right" size={14} />
          </a>
        </div>

        <div className="mt-16 grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-white/8 border border-white/8 rounded-[20px] overflow-hidden">
          {window.MERCENTA.SERVICES.map((s, i) => (
            <article key={s.tag} className="card-hov bg-[var(--bg)] p-7 lg:p-8 reveal" style={{ transitionDelay: `${i*0.05}s` }}>
              <div className="flex items-start justify-between">
                <div className="h-11 w-11 rounded-xl border border-white/12 bg-white/[0.03] flex items-center justify-center text-white/85">
                  <Icon name={s.icon} size={20} strokeWidth={1.5} />
                </div>
                <span className="font-mono text-[11px] text-white/35">/ {s.tag}</span>
              </div>
              <h3 className="mt-7 display text-[28px] tracking-[-0.035em]">{s.title}</h3>
              <p className="mt-3 text-[14.5px] leading-[1.55] text-white/55">{s.blurb}</p>
              <ul className="mt-6 space-y-2 text-[13px] text-white/70">
                {s.bullets.map(b => (
                  <li key={b} className="flex items-center gap-2.5">
                    <Icon name="check" size={13} strokeWidth={2.4} className="text-accent" />
                    {b}
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// PROCESS
const Process = () => {
  const steps = window.MERCENTA.PROCESS;
  return (
    <section id="process" className="relative py-24 lg:py-32 border-t border-white/8 overflow-hidden">
      <div className="max-w-[1320px] mx-auto px-6 lg:px-10">
        <SectionHead
          kicker="PROCESS · 90 DAYS"
          title={<>From kickoff to <span className="font-serif italic font-normal text-accent">compounding</span> in four moves.</>}
          intro="A repeatable operating system. We've run it 184 times. The names of the steps are the same; the work inside each is built around your brand."
        />

        <div className="mt-16 relative">
          {/* connecting line */}
          <div className="hidden lg:block absolute top-[58px] left-[5%] right-[5%] h-px bg-gradient-to-r from-transparent via-white/15 to-transparent" />
          <div className="grid lg:grid-cols-4 gap-6 lg:gap-4">
            {steps.map((s, i) => (
              <div key={s.n} className="relative reveal" style={{ transitionDelay: `${i*0.08}s` }}>
                <div className="relative z-10 mx-auto lg:mx-0 h-[116px] w-[116px] rounded-full border border-white/12 bg-[var(--bg)] flex items-center justify-center">
                  <div className="absolute inset-2 rounded-full border border-dashed border-white/12" />
                  <span className="display text-[44px] text-accent">{s.n}</span>
                </div>
                <h3 className="mt-7 display text-[26px]">{s.title}</h3>
                <p className="mt-3 text-[14px] leading-[1.55] text-white/55 max-w-[280px]">{s.body}</p>
                <div className="mt-5 font-mono text-[10.5px] text-white/35 tracking-[0.18em]">
                  {["WK 1–2", "WK 3", "WK 4–10", "WK 10+"][i]}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.Services = Services;
window.Process = Process;
window.SectionHead = SectionHead;
