// Reusable UI: Logo, icons, buttons, section frames.
// Shared utility — gives every section a consistent editorial frame.

const { useState, useEffect, useMemo, useRef, useCallback } = React;

// ─── Logo ───────────────────────────────────────────────────────────────
// Original mark: two interlocking rounded-square frames — like a chain link,
// expressing "Commit" (bond) + "biz" (a transactional connection). NOT a copy
// of the existing logo; original geometric mark.
function CBLogo({ size = 28, mono = false }) {
  const fg = mono ? "currentColor" : "var(--brand)";
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
      <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
        <rect x="3.5" y="3.5" width="22" height="22" rx="5.5" stroke={fg} strokeWidth="2.5" />
        <rect x="14.5" y="14.5" width="22" height="22" rx="5.5" stroke={mono ? "currentColor" : "var(--accent)"} strokeWidth="2.5" />
      </svg>
      <span className="cb-wordmark" style={{ color: mono ? "currentColor" : "var(--ink)" }}>commitbiz</span>
    </span>
  );
}

// ─── Icons (geometric line, 1.5px) ──────────────────────────────────────
const IconSet = {
  formation: <svg viewBox="0 0 24 24" fill="none"><path d="M4 20V8l8-4 8 4v12" stroke="currentColor" strokeWidth="1.5" /><path d="M9 20v-6h6v6" stroke="currentColor" strokeWidth="1.5" /><path d="M4 12h16" stroke="currentColor" strokeWidth="1.5" strokeOpacity=".5" /></svg>,
  licensing: <svg viewBox="0 0 24 24" fill="none"><rect x="3.5" y="5.5" width="17" height="13" rx="2" stroke="currentColor" strokeWidth="1.5" /><path d="M7 10h5M7 13h8M7 16h6" stroke="currentColor" strokeWidth="1.5" /></svg>,
  visa: <svg viewBox="0 0 24 24" fill="none"><rect x="4.5" y="3.5" width="15" height="17" rx="2" stroke="currentColor" strokeWidth="1.5" /><circle cx="12" cy="10" r="2.5" stroke="currentColor" strokeWidth="1.5" /><path d="M8 16c1-2 2.5-3 4-3s3 1 4 3" stroke="currentColor" strokeWidth="1.5" /></svg>,
  bank: <svg viewBox="0 0 24 24" fill="none"><path d="M3 9 12 4l9 5" stroke="currentColor" strokeWidth="1.5" /><path d="M5 9v9M9 9v9M15 9v9M19 9v9M3 20h18" stroke="currentColor" strokeWidth="1.5" /></svg>,
  ledger: <svg viewBox="0 0 24 24" fill="none"><rect x="4.5" y="3.5" width="15" height="17" rx="1.5" stroke="currentColor" strokeWidth="1.5" /><path d="M8 8h8M8 12h8M8 16h5" stroke="currentColor" strokeWidth="1.5" /></svg>,
  tax: <svg viewBox="0 0 24 24" fill="none"><path d="M6 18 18 6" stroke="currentColor" strokeWidth="1.5" /><circle cx="8" cy="8" r="2" stroke="currentColor" strokeWidth="1.5" /><circle cx="16" cy="16" r="2" stroke="currentColor" strokeWidth="1.5" /></svg>,
  shield: <svg viewBox="0 0 24 24" fill="none"><path d="M12 3 4 6v6c0 4.5 3.5 7.5 8 9 4.5-1.5 8-4.5 8-9V6l-8-3z" stroke="currentColor" strokeWidth="1.5" /><path d="m9 12 2 2 4-4" stroke="currentColor" strokeWidth="1.5" /></svg>,
  advisory: <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="8.5" stroke="currentColor" strokeWidth="1.5" /><path d="M12 3v3M12 18v3M3 12h3M18 12h3M6 6l2 2M16 16l2 2M6 18l2-2M16 8l2-2" stroke="currentColor" strokeWidth="1.5" /></svg>,
  arrow: <svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.5" /></svg>,
  arrowUpRight: <svg viewBox="0 0 24 24" fill="none"><path d="M7 17 17 7M9 7h8v8" stroke="currentColor" strokeWidth="1.5" /></svg>,
  check: <svg viewBox="0 0 24 24" fill="none"><path d="m5 12 5 5 9-11" stroke="currentColor" strokeWidth="1.5" /></svg>,
  phone: <svg viewBox="0 0 24 24" fill="none"><path d="M5 4h4l2 5-2 1c1 3 3 5 6 6l1-2 5 2v4c0 1-1 2-2 2-9 0-16-7-16-16 0-1 1-2 2-2z" stroke="currentColor" strokeWidth="1.5" /></svg>,
  whatsapp: <svg viewBox="0 0 24 24" fill="none"><path d="M4 20l1.5-4.2A8 8 0 1 1 9.2 19.5L4 20z" stroke="currentColor" strokeWidth="1.5" /><path d="M9 9c0 3 3 6 6 6l1.5-1.5-2-1-1 1c-1 0-3-2-3-3l1-1-1-2L9 9z" stroke="currentColor" strokeWidth="1.5" /></svg>,
  mail: <svg viewBox="0 0 24 24" fill="none"><rect x="3.5" y="5.5" width="17" height="13" rx="1.5" stroke="currentColor" strokeWidth="1.5" /><path d="m4 7 8 6 8-6" stroke="currentColor" strokeWidth="1.5" /></svg>,
  globe: <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="8.5" stroke="currentColor" strokeWidth="1.5" /><path d="M3.5 12h17M12 3.5c2.5 3 2.5 14 0 17M12 3.5c-2.5 3-2.5 14 0 17" stroke="currentColor" strokeWidth="1.5" /></svg>,
  menu: <svg viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" strokeWidth="1.5" /></svg>,
  close: <svg viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.5" /></svg>,
  pin: <svg viewBox="0 0 24 24" fill="none"><path d="M12 21s7-7.5 7-12a7 7 0 0 0-14 0c0 4.5 7 12 7 12z" stroke="currentColor" strokeWidth="1.5" /><circle cx="12" cy="9" r="2.5" stroke="currentColor" strokeWidth="1.5" /></svg>,
  arrowL: <svg viewBox="0 0 24 24" fill="none"><path d="M19 12H5M11 6l-6 6 6 6" stroke="currentColor" strokeWidth="1.5" /></svg>,
};
const SERVICE_ICON = {
  "company-formation": "formation",
  "trade-licensing": "licensing",
  "visa-pro": "visa",
  "corporate-banking": "bank",
  "accounting-audit": "ledger",
  "vat-corporate-tax": "tax",
  "compliance": "shield",
  "advisory": "advisory",
};

// ─── Buttons ────────────────────────────────────────────────────────────
function CBButton({ kind = "primary", icon, children, onClick, href, as, className = "" }) {
  const Tag = href ? "a" : "button";
  const props = href ? { href } : { onClick, type: "button" };
  return (
    <Tag {...props} className={`cb-btn cb-btn--${kind} ${className}`}>
      <span>{children}</span>
      {icon && <span className="cb-btn__icon">{IconSet[icon]}</span>}
    </Tag>
  );
}

// ─── Section frame ──────────────────────────────────────────────────────
function Section({ id, tone = "paper", children, label, screen }) {
  return (
    <section id={id} className={`cb-section cb-section--${tone}`} data-screen-label={screen} data-section={id}>
      <div className="cb-wrap">{children}</div>
    </section>
  );
}
function SectionHead({ eyebrow, title, sub, align = "left", actions, num }) {
  return (
    <header className={`cb-sechead cb-sechead--${align}`}>
      <div className="cb-sechead__top">
        {num && <span className="cb-sechead__num">{num}</span>}
        {eyebrow && <span className="cb-eyebrow">{eyebrow}</span>}
      </div>
      <h2 className="cb-h2">{title}</h2>
      {sub && <p className="cb-sub">{sub}</p>}
      {actions && <div className="cb-sechead__actions">{actions}</div>}
    </header>
  );
}

// expose
Object.assign(window, { CBLogo, IconSet, SERVICE_ICON, CBButton, Section, SectionHead });
