// Original site uses simple unicode glyphs for each pillar.
const PILLAR_GLYPH = {
  systems: "≡",
  comms: "✎",
  exec: "✦",
  insight: "⊕",
};
const PillarIcon = ({ kind }) => (
  <span style={{
    fontFamily: "var(--serif)",
    fontSize: 44,
    lineHeight: 1,
    display: "inline-block",
    color: "currentColor",
  }}>{PILLAR_GLYPH[kind]}</span>
);

const PILLARS = [
  {
    icon: "systems",
    num: "01",
    title: "Systems & Operations",
    sub: "The structures that keep your business steady and scalable.",
    items: [
      ["Operations & Workflow Design", "Map and refine processes, remove bottlenecks, create operating manuals, templates, checklists, and dashboards. Aligning your tech stack with ethical, privacy-first tools."],
      ["Digital Systems & Automations", "Airtable, ClickUp — design, build and tidy. Tool integrations, automations, data hygiene, permissions and documentation."],
      ["Website Design & Optimisation", "Squarespace specialist — elegant builds and redesigns, layout and UX tidy-ups, on-page SEO basics, forms, payments, light maintenance."],
    ],
  },
  {
    icon: "comms",
    num: "02",
    title: "Communication & Design",
    sub: "Clear, consistent messaging that reflects your brand.",
    items: [
      ["Content & Communications", "Writing, editing, and proofreading for web, blog and socials. Refining headlines and calls-to-action so your site feels cohesive and engaging. Repurposing content for multi-channel consistency."],
      ["Design Support", "Canva decks, workbooks, one-pagers, and visuals that bring clarity and polish to your ideas."],
    ],
  },
  {
    icon: "exec",
    num: "03",
    title: "Executive Partnership",
    sub: "A steady partner to hold the details while you lead the vision.",
    items: [
      ["Executive & Project Support", "Inbox, calendar, client comms, document control; project coordination, timelines, stakeholder follow-up."],
      ["Strategic Sounding Board", "A reliable second brain and partner in decision-making, helping you move forward with clarity and confidence."],
    ],
  },
  {
    icon: "insight",
    num: "04",
    title: "Insight & Growth",
    sub: "Clarity for smarter decisions and stronger teams.",
    items: [
      ["Psychometrics & Team Diagnostics", "Selection and administration of trusted workplace tools; report design; embedding into hiring, onboarding, and team rhythms."],
      ["Research & Strategic Insight", "Market scans, competitor benchmarking, opportunity spotting; concise briefings and evidence packs for proposals or presentations."],
    ],
  },
];

function PillarRow({ pillar, index }) {
  const isLast = index === PILLARS.length - 1;
  return (
    <article className="pillar-row" style={{
      display: "grid",
      gridTemplateColumns: "80px 1fr 2fr",
      gap: 32,
      paddingTop: 56,
      paddingBottom: 56,
      borderTop: "1px solid var(--ink-15)",
      borderBottom: isLast ? "1px solid var(--ink-15)" : "none",
      alignItems: "start",
    }}>
      {/* Index column */}
      <div className="pillar-meta">
        <div className="mono" style={{ fontSize: 11, letterSpacing: ".1em", color: "var(--ink-60)", marginBottom: 14 }}>
          ({pillar.num})
        </div>
      </div>

      {/* Title column */}
      <div>
        <h3 className="h-block" style={{ marginBottom: 12 }}>{pillar.title}</h3>
        <p className="lede" style={{ margin: 0, color: "var(--ink-60)", fontSize: 18 }}>
          {pillar.sub}
        </p>
      </div>

      {/* Items column */}
      <ul className="pillar-items" style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 24 }}>
        {pillar.items.map(([t, d], i) => (
          <li key={i} style={{
            display: "grid",
            gridTemplateColumns: "1fr 1.5fr",
            gap: 24,
            paddingBottom: 24,
            borderBottom: i === pillar.items.length - 1 ? "none" : "1px dashed var(--ink-15)",
          }}>
            <div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: ".1em", color: "var(--ink-40)", marginBottom: 6 }}>
                — {String(i + 1).padStart(2, "0")}
              </div>
              <div style={{ fontWeight: 500, fontSize: 15, lineHeight: 1.35 }}>{t}</div>
            </div>
            <p className="body-sm" style={{ margin: 0, color: "var(--ink-60)" }}>{d}</p>
          </li>
        ))}
      </ul>
    </article>
  );
}

function Services() {
  return (
    <section id="services" className="section">
      <div className="shell">
        <div className="section-head">
          <div className="num">(03)</div>
          <div className="head-body">
            <div className="eyebrow" style={{ marginBottom: 18 }}>Services</div>
            <h2 className="h-section">Digital operations support, structured around four practices.</h2>
            <p className="body" style={{ maxWidth: 640, marginTop: 24, color: "var(--ink-60)" }}>
              Support designed to bring calm structure and smart growth to your business —
              combining operations expertise, thoughtful design, and intelligent use of
              automation and AI. Have questions about how this works?{" "}
              <a href="#faq" style={{ borderBottom: "1px solid currentColor" }}>Read the Digital Ops FAQs</a>.
              For ethical, privacy-first migrations, explore the{" "}
              <a href="#audit" style={{ borderBottom: "1px solid currentColor" }}>Digital Ethics Audit</a>.
            </p>
          </div>
        </div>

        <div>
          {PILLARS.map((p, i) => <PillarRow key={p.num} pillar={p} index={i}/>)}
        </div>
      </div>
    </section>
  );
}

window.Services = Services;