// Reusable page-level primitives all sub-pages compose

// PageHero — standard hero for sub-pages: eyebrow, big title, sub, CTAs, optional visual on right
function PageHero({ eyebrow, title, sub, ctaPrimary, ctaSecondary, visual, breadcrumb }) {
  return (
    <section className="page-hero">
      <div className="container">
        {breadcrumb && <Breadcrumb items={breadcrumb}/>}
        <div className="page-hero-grid" style={{ marginTop: breadcrumb ? 24 : 0 }}>
          <div>
            {eyebrow && <span className="eyebrow" style={{ marginBottom: 18, display: "inline-block" }}>{eyebrow}</span>}
            <h1>{title}</h1>
            {sub && <p className="page-hero-sub">{sub}</p>}
            <div className="page-hero-cta">
              {ctaPrimary && (
                <a className="btn btn-primary" href={resolveHref(ctaPrimary.href || "pages/contact.html")}>
                  {ctaPrimary.label}
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </a>
              )}
              {ctaSecondary && (
                <a className="btn btn-ghost" href={ctaSecondary.href || "#"}>{ctaSecondary.label}</a>
              )}
            </div>
          </div>
          {visual && <div className="page-hero-visual">{visual}</div>}
        </div>
      </div>
      <style>{`
        .page-hero-visual { position: relative; min-width: 0; max-width: 100%; }
        .page-hero-visual > * { max-width: 100%; }
        @media (max-width: 700px) {
          .page-hero-visual { display: none; }
        }
        .page-hero-visual::before {
          content: "";
          position: absolute; inset: -30px;
          background: radial-gradient(60% 60% at 50% 50%, var(--purple-glow), transparent 70%);
          filter: blur(40px); z-index: 0;
        }
        .page-hero-visual > * { position: relative; z-index: 1; }
      `}</style>
    </section>
  );
}

function Breadcrumb({ items }) {
  return (
    <nav className="breadcrumb">
      {items.map((it, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="bc-sep">/</span>}
          {it.href ? <a href={resolveHref(it.href)}>{it.label}</a> : <span>{it.label}</span>}
        </React.Fragment>
      ))}
      <style>{`
        .breadcrumb { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--text-dim); }
        .breadcrumb a { color: var(--text-dim); }
        .breadcrumb a:hover { color: var(--text); }
        .breadcrumb span:last-child { color: var(--text); }
        .bc-sep { color: var(--text-mute); }
      `}</style>
    </nav>
  );
}

// Feature grid — N icon+title+desc cards
function FeatureGrid({ eyebrow, title, sub, features, columns = 3, accentColors }) {
  const colors = accentColors || ["#7A52FF", "#F118B2", "#FF7A45", "#FFB000", "#2BD974", "#24A1DE"];
  return (
    <section className="section-pad">
      <div className="container">
        <div className="section-head">
          {eyebrow && <span className="eyebrow">{eyebrow}</span>}
          <h2>{title}</h2>
          {sub && <p>{sub}</p>}
        </div>
        <div className="feat-grid" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
          {features.map((f, i) => (
            <div key={f.t} className="feat-card card">
              <div className="feat-icon" style={{ "--c": colors[i % colors.length] }}>
                {f.icon || <DefaultIcon idx={i}/>}
              </div>
              <div className="feat-title">{f.t}</div>
              <div className="feat-desc">{f.d}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .feat-grid { display: grid; gap: 14px; }
        .feat-card { padding: 26px; transition: transform .2s ease, border-color .2s ease; }
        .feat-card:hover { transform: translateY(-2px); border-color: var(--line-2); }
        .feat-icon {
          width: 44px; height: 44px; border-radius: 12px;
          background: color-mix(in oklab, var(--c) 14%, transparent);
          border: 1px solid color-mix(in oklab, var(--c) 30%, transparent);
          color: var(--c);
          display: grid; place-items: center;
          margin-bottom: 18px;
          box-shadow: 0 0 30px -10px var(--c);
        }
        .feat-title { font-size: 17px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; color: var(--text); }
        .feat-desc { font-size: 14px; color: var(--text-dim); line-height: 1.55; }
        @media (max-width: 900px) { .feat-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 600px) { .feat-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function DefaultIcon({ idx }) {
  const shapes = [
    <circle cx="9" cy="9" r="6" stroke="currentColor" strokeWidth="1.6" fill="none"/>,
    <rect x="3" y="3" width="12" height="12" rx="3" stroke="currentColor" strokeWidth="1.6" fill="none"/>,
    <path d="M9 2l7 4v6l-7 4-7-4V6z" stroke="currentColor" strokeWidth="1.6" fill="none"/>,
    <path d="M9 2L11 7H16L12 10L13.5 15L9 12L4.5 15L6 10L2 7H7Z" stroke="currentColor" strokeWidth="1.6" fill="none"/>,
    <path d="M3 9h12M9 3v12M3 3l12 12M15 3L3 15" stroke="currentColor" strokeWidth="1.6"/>,
    <path d="M3 14l4-4 3 2 7-7" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
  ];
  return <svg width="18" height="18" viewBox="0 0 18 18">{shapes[idx % shapes.length]}</svg>;
}

// SplitFeature — "left visual, right text" or vice versa, alternating
function SplitFeature({ eyebrow, title, sub, points, visual, reverse, accent = "#7A52FF" }) {
  return (
    <section className="section-pad-sm split-feature">
      <div className="container split-grid" style={{ direction: reverse ? "rtl" : "ltr" }}>
        <div className="split-text" style={{ direction: "ltr" }}>
          {eyebrow && <span className="eyebrow" style={{ color: accent }}>{eyebrow}</span>}
          <h2 style={{ marginTop: 14, fontSize: "clamp(28px, 3.6vw, 44px)" }}>{title}</h2>
          {sub && <p style={{ fontSize: 16, marginTop: 14 }}>{sub}</p>}
          {points && (
            <ul className="split-list">
              {points.map((p) => (
                <li key={p}><span className="split-check" style={{ color: accent }}>✓</span>{p}</li>
              ))}
            </ul>
          )}
        </div>
        <div className="split-visual" style={{ direction: "ltr" }}>{visual}</div>
      </div>
      <style>{`
        .split-grid {
          display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
          gap: 56px; align-items: center;
        }
        .split-list {
          list-style: none; padding: 0; margin: 22px 0 0;
          display: flex; flex-direction: column; gap: 10px;
          font-size: 14.5px; color: var(--text);
        }
        .split-list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
        .split-check { font-weight: 700; }
        @media (max-width: 960px) {
          .split-grid { grid-template-columns: 1fr; direction: ltr !important; }
        }
      `}</style>
    </section>
  );
}

// Stat row — band of 3-4 metrics
function StatRow({ items }) {
  return (
    <section className="section-pad-sm">
      <div className="container">
        <div className="stat-row card">
          {items.map((it, i) => (
            <div key={it.l} className="stat-item">
              <div className="stat-v">{it.v}</div>
              <div className="stat-l">{it.l}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .stat-row { display: grid; grid-template-columns: repeat(${0}, 1fr); padding: 28px 32px; }
        .stat-row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
        .stat-item { padding: 12px 18px; border-right: 1px solid var(--line); }
        .stat-item:last-child { border-right: 0; }
        .stat-v {
          font-size: 36px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
          background: var(--gradient-text);
          -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .stat-l { font-size: 13px; color: var(--text-dim); margin-top: 6px; line-height: 1.4; }
      `}</style>
    </section>
  );
}

// FAQ accordion
function FAQ({ eyebrow = "FAQ", title = "Frequently asked", items }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section-pad">
      <div className="container">
        <div className="section-head" style={{ marginBottom: 36 }}>
          <span className="eyebrow">{eyebrow}</span>
          <h2>{title}</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={`faq-item card ${open === i ? "open" : ""}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-chev">{open === i ? "−" : "+"}</span>
              </button>
              {open === i && <div className="faq-a">{it.a}</div>}
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .faq-list { display: flex; flex-direction: column; gap: 8px; max-width: 880px; }
        .faq-item { padding: 0; overflow: hidden; }
        .faq-q {
          width: 100%; text-align: left; padding: 22px 26px;
          background: transparent; border: 0; color: var(--text);
          font-size: 16px; font-weight: 500;
          display: flex; justify-content: space-between; align-items: center; gap: 16px;
        }
        .faq-chev { color: var(--purple-2); font-size: 20px; font-weight: 300; }
        .faq-a { padding: 0 26px 22px; color: var(--text-dim); font-size: 14.5px; line-height: 1.65; }
        .faq-item.open { border-color: var(--line-2); }
      `}</style>
    </section>
  );
}

// CTA section reusable for sub-pages
function CTASection({ title, sub, primary = { label: "Book a demo", href: "pages/contact.html" }, secondary }) {
  return (
    <section id="cta" className="section-pad">
      <div className="container">
        <div className="cta-card">
          <div className="cta-grid-bg"/>
          <div className="cta-content">
            <h2 style={{ fontSize: "clamp(32px, 4.5vw, 54px)", color: "#fff" }}>{title}</h2>
            {sub && <p style={{ color: "rgba(255,255,255,0.78)", fontSize: 17, marginTop: 16, maxWidth: 580 }}>{sub}</p>}
            <div style={{ display: "flex", gap: 10, marginTop: 28, flexWrap: "wrap" }}>
              <a className="btn" href={resolveHref(primary.href)} style={{ background: "#fff", color: "#0B0B18", padding: "14px 22px", fontSize: 14.5, fontWeight: 600 }}>
                {primary.label}
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </a>
              {secondary && (
                <a className="btn" href={resolveHref(secondary.href)} style={{ background: "rgba(255,255,255,0.1)", color: "#fff", border: "1px solid rgba(255,255,255,0.2)", padding: "14px 22px", fontSize: 14.5, fontWeight: 600 }}>
                  {secondary.label}
                </a>
              )}
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .cta-card {
          position: relative;
          padding: 60px 56px;
          border-radius: 28px;
          background:
            radial-gradient(800px 400px at 80% 110%, rgba(241,24,178,0.65), transparent 60%),
            radial-gradient(700px 380px at 20% 0%, rgba(255,176,0,0.30), transparent 60%),
            linear-gradient(135deg, var(--purple) 0%, #2A1080 100%);
          overflow: hidden;
          border: 1px solid rgba(255,255,255,0.18);
        }
        .cta-grid-bg {
          position: absolute; inset: 0;
          background-image:
            linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
          background-size: 48px 48px;
          mask: radial-gradient(700px 400px at 50% 50%, #000 30%, transparent 80%);
          -webkit-mask: radial-gradient(700px 400px at 50% 50%, #000 30%, transparent 80%);
        }
        .cta-content { position: relative; z-index: 1; }
      `}</style>
    </section>
  );
}

// Use cases — alternating bands
function Workflow({ eyebrow, title, sub, steps }) {
  return (
    <section className="section-pad">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{eyebrow}</span>
          <h2>{title}</h2>
          {sub && <p>{sub}</p>}
        </div>
        <div className="wf-track">
          {steps.map((s, i) => (
            <div key={s.t} className="wf-step card">
              <div className="wf-num mono">0{i + 1}</div>
              <div className="wf-t">{s.t}</div>
              <div className="wf-d">{s.d}</div>
              {s.list && (
                <ul className="wf-list">
                  {s.list.map((l) => <li key={l}><span className="wf-bullet">→</span>{l}</li>)}
                </ul>
              )}
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .wf-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
        .wf-step { padding: 24px; }
        .wf-num { font-size: 11px; color: var(--purple-2); letter-spacing: 0.1em; font-weight: 600; }
        .wf-t { font-size: 17px; font-weight: 600; color: var(--text); margin: 8px 0 8px; letter-spacing: -0.01em; }
        .wf-d { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
        .wf-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-dim); }
        .wf-list li { display: flex; gap: 8px; }
        .wf-bullet { color: var(--purple-2); }
      `}</style>
    </section>
  );
}

// Comparison table
function CompareTable({ eyebrow, title, sub, rows, them = "Generic CRM", us = "Antelope" }) {
  return (
    <section className="section-pad">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{eyebrow}</span>
          <h2>{title}</h2>
          {sub && <p>{sub}</p>}
        </div>
        <div className="cmp card">
          <div className="cmp-head">
            <div></div>
            <div className="cmp-them">{them}</div>
            <div className="cmp-us">{us}</div>
          </div>
          {rows.map((r) => (
            <div key={r.label} className="cmp-row">
              <div className="cmp-label">{r.label}</div>
              <div className="cmp-cell cmp-them">{r.them}</div>
              <div className="cmp-cell cmp-us">
                <span className="cmp-check">✓</span>{r.us}
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .cmp { padding: 0; overflow: hidden; }
        .cmp-head, .cmp-row {
          display: grid; grid-template-columns: 1.4fr 1fr 1fr;
          padding: 16px 24px; border-bottom: 1px solid var(--line);
          align-items: center; gap: 20px;
        }
        .cmp-row:last-child { border-bottom: 0; }
        .cmp-head { background: var(--surface-2); font-weight: 600; font-size: 13px; }
        .cmp-them { color: var(--text-dim); }
        .cmp-us { color: var(--purple-2); font-weight: 600; }
        .cmp-label { font-size: 13.5px; color: var(--text); font-weight: 500; }
        .cmp-cell { font-size: 13px; line-height: 1.5; }
        .cmp-cell.cmp-us { display: flex; gap: 8px; align-items: flex-start; color: var(--text); }
        .cmp-check { color: var(--green); font-weight: 700; }
      `}</style>
    </section>
  );
}

window.PageHero = PageHero;
window.FeatureGrid = FeatureGrid;
window.SplitFeature = SplitFeature;
window.StatRow = StatRow;
window.FAQ = FAQ;
window.CTASection = CTASection;
window.Workflow = Workflow;
window.CompareTable = CompareTable;
window.Breadcrumb = Breadcrumb;