/* ============================================================
   CSL Landing — Sections B: Services, Recognition, Why, Steps,
   Testimonials, FAQ, Closer + Footer, Page mount
   ============================================================ */
const { Button: B2 } = window.ContentStackLabDesignSystem_cbb53c;
const Ic2 = window.Icons;
const D2 = window.CSL;
const ArrowB = window.Arrow;
const { useState: uS, useRef: uR } = React;

// hover-to-open only where a real pointer exists — on touch, the emulated
// mouseenter would open the item right before the tap's click closed it.
const canHover = window.matchMedia("(hover: hover)").matches;

const ChevronDown = () => (
  <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M1 1L7 7L13 1" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

// Chips accept admin markdown links: "[label](url)" becomes a linked pill.
const CHIP_LINK = /^\s*\[([^\]]+)\]\(([^)]+)\)\s*$/;
function renderChip(p) {
  const m = CHIP_LINK.exec(p);
  if (m) {
    return <a className="svc__chip" href={m[2]} key={p}><i />{m[1]}</a>;
  }
  return <span className="svc__chip" key={p}><i />{p}</span>;
}

/* ---------------- Services accordion ---------------- */
function Services() {
  const [open, setOpen] = uS(-1);
  return (
    <section className="sec sec--sunken" id="services">
      <div className="wrap">
        <div className="sec-head reveal">
          <p className="eyebrow">What I actually do</p>
          <h2>Three ways I help B2B tech brands grow<span className="dot">.</span></h2>
        </div>
        <div className="svc">
          {D2.services.map((s, i) => {
            const isOpen = open === i;
            return (
              <div className={"svc__item reveal" + (isOpen ? " open" : "")} key={s.title} onMouseEnter={canHover ? () => setOpen(i) : undefined}>
                <button className="svc__btn" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  <span className="svc__titles">
                    <h3>{s.title}</h3>
                    <span>{s.tagline}</span>
                  </span>
                  <span className="svc__toggle"><ChevronDown /></span>
                </button>
                <div className="svc__panel"><div><div className="svc__panel-in">
                  <div className="svc__body" dangerouslySetInnerHTML={{ __html: s.body }} />
                  <div className="svc__points">
                    {s.points.map(renderChip)}
                  </div>
                </div></div></div>
              </div>
            );
          })}
        </div>
        <div style={{ marginTop: "var(--space-7)" }} className="reveal">
          <B2 as="a" href="services" variant="ghost" iconRight={<ArrowB />}>Explore services</B2>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Recognition ---------------- */
function Recognition() {
  return (
    <section className="sec">
      <div className="wrap">
        <div className="rec__box reveal">
          <div className="rec__box-title">Recognized for excellence</div>
          <div className="rec__logos">
            {D2.recognition.map((r, i) => (
              <div className="rec__logo" key={i}>
                <img className={r.logoTone === "white" ? "rec__logo-img rec__logo-img--white" : "rec__logo-img"} src={r.logo} alt={r.org} loading="lazy" />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Why CSL ---------------- */
// Hardcoded here, not admin-managed. Icons must be keys in window.Icons.
const WHY = [
  { icon: "chair", title: "I've sat in your chair", body: "17 years on the brand side means I don't give advice from the sidelines. I've run the campaigns, managed the budgets, and reported to the CEO." },
  { icon: "userCheck", title: "No junior handoffs", body: "You talk to me. You work with me. No bait-and-switch where a senior sells you and a junior delivers." },
  { icon: "layers", title: "Complex made clear", body: "Cybersecurity, OT/ICS, EHS, enterprise AI. I translate complex products into messaging buyers actually understand." },
  { icon: "scale", title: "Both sides of the table", body: "I've worked inside the tech companies and inside the industrial organizations they sell to. I know your product and your buyer's world." },
  { icon: "sparkles", title: "AI-augmented, not AI-replaced", body: "I use modern AI tools to move faster and deliver more, but the thinking is human. Your brand deserves better than a prompt and a prayer." }
];

function Why() {
  return (
    <section className="sec sec--tint" id="why">
      <div className="wrap">
        <div className="sec-head reveal">
          <p className="eyebrow">Why work with me</p>
          <h2>Here's what's different, and why it matters<span className="dot">.</span></h2>
        </div>
        <div className="why__grid">
          {WHY.map((w) => (
            <div className="why__card reveal" key={w.title}>
              <span className="why__ic">{Ic2[w.icon]({ width: 26, height: 26 })}</span>
              <h3>{w.title}</h3>
              <p>{w.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Steps ---------------- */
function Steps() {
  return (
    <section className="sec">
      <div className="wrap">
        <div className="sec-head reveal">
          <p className="eyebrow">How we work together</p>
          <h2>Pick your engagement style<span className="dot">.</span></h2>
        </div>
        <div className="steps__list" style={{ maxWidth: "900px", margin: "var(--space-8) auto 0" }}>
          {D2.steps.map((s) => (
            <div className="step-row reveal" key={s.n}>
              <div className="step-row__num">
                <span className="step-row__n">{s.n}</span>
              </div>
              <div className="step-row__content">
                <h3 className="step-row__title">{s.name}</h3>
                <p className="step-row__body">{s.body} {s.best}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Testimonials ---------------- */
function Testimonials() {
  const [i, setI] = uS(0);
  const [drag, setDrag] = uS(0);
  const [downX, setDownX] = uS(null);
  const [paused, setPaused] = uS(false); // manual interaction stops auto-play for good
  const hovered = uR(false);
  const t = D2.testimonials;
  if (!t.length) return null;

  React.useEffect(() => {
    if (downX !== null || paused) return;
    const timer = setInterval(() => {
      if (!hovered.current) setI((prev) => (prev + 1) % t.length);
    }, 5000);
    return () => clearInterval(timer);
  }, [downX, paused, t.length]);

  const go = (n) => { setPaused(true); setI((n + t.length) % t.length); };

  const onPointerDown = (e) => {
    setDownX(e.clientX);
    e.target.setPointerCapture(e.pointerId);
  };
  const onPointerMove = (e) => {
    if (downX === null) return;
    setDrag(e.clientX - downX);
  };
  const onPointerUp = (e) => {
    if (downX === null) return;
    if (drag < -50) go(i + 1);
    else if (drag > 50) go(i - 1);
    setDownX(null);
    setDrag(0);
  };

  return (
    <section className="sec sec--sunken">
      <div className="wrap wrap--md">
        <div className="sec-head sec-head--center reveal">
          <p className="eyebrow" style={{ justifyContent: "center" }}>Don't take my word for it</p>
          <h2>What people say after working with me<span className="dot">.</span></h2>
        </div>
        <div className="tst reveal" style={{ marginTop: "var(--space-8)" }} role="region" aria-roledescription="carousel" aria-label="Client testimonials">
          <div className="tst__track-wrap" aria-live="polite" style={{ overflow: "hidden", cursor: downX !== null ? "grabbing" : "grab", touchAction: "pan-y" }} onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={onPointerUp} onPointerCancel={onPointerUp} onMouseEnter={() => { hovered.current = true; }} onMouseLeave={() => { hovered.current = false; }}>
            <div className="tst__track" style={{ display: "flex", transition: downX !== null ? "none" : "transform 0.5s ease", transform: `translateX(calc(-${i * 100}% + ${drag}px))` }}>
              {t.map((cur, n) => {
                const initials = cur.name.split(" ").slice(0, 2).map((w) => w[0]).join("");
                return (
                  <div className="tst__card" key={n} style={{ flex: "0 0 100%", width: "100%", userSelect: "none" }}>
                    <span className="tst__qmark" style={{ pointerEvents: "none" }}>{Ic2.quote({ width: 56, height: 56 })}</span>
                    <div style={{ pointerEvents: "none" }}>
                      <p className="tst__quote">{cur.quote}</p>
                      <div className="tst__by">
                        <span className="tst__ava">{initials}</span>
                        <span>
                          <span className="tst__name">{cur.name}</span><br />
                          <span className="tst__co">{cur.company}</span>
                        </span>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          <div className="tst__foot">
            <div className="tst__dots">
              {t.map((_, n) => <button key={n} className={n === i ? "on" : ""} aria-label={"Testimonial " + (n + 1)} onClick={() => go(n)} />)}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- FAQ ---------------- */

function Faq() {
  const [open, setOpen] = uS(-1);
  return (
    <section className="sec" id="faq">
      <div className="wrap faq-split">
        <div className="faq-split__left reveal">
          <div className="sec-head">
            <p className="eyebrow">You ask, we answer</p>
            <h2>The questions we get most<span className="dot">.</span></h2>
          </div>
          <div className="faq-split__list">
            {D2.faqs.map(([q, a], i) => {
              const isOpen = open === i;
              return (
                <div className={"faq__row" + (isOpen ? " open" : "")} key={q} onMouseEnter={canHover ? () => setOpen(i) : undefined}>
                  <button className="faq__row-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                    {q}<span className="ic"><ChevronDown /></span>
                  </button>
                  <div className="faq__row-a"><div><p>{a}</p></div></div>
                </div>
              );
            })}
          </div>
        </div>
        <div className="faq-split__right reveal">
          <window.ConsultationCard slotId="home-consultation-card-avatar" />
        </div>
      </div>
    </section>
  );
}

/* ---------------- Closer + Footer ---------------- */
function Closer() {
  return (
    <div className="closer" id="contact">
      <div className="closer__glow" aria-hidden="true" />
      <window.SiteFooter />
    </div>
  );
}

/* ---------------- Page ---------------- */
function Page() {
  window.useReveal();
  return (
    <React.Fragment>
      <window.Header />
      <main>
        <window.Hero />
        <div className="dark-theme">
          <window.Marquee />
          <window.Founder />
          <window.Work />
          <Services />
          <Recognition />
          <Why />
          <Steps />
          <Testimonials />
          <Faq />
        </div>
      </main>
      <div className="dark-theme">
        <Closer />
      </div>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<Page />);