/* global React */
const { useState } = React;

/* ============================================================================
   Icons — thin line set (1.5px), brand hairline language.
   SUBSTITUTION (per brand README §5): Phosphor-style line icons, hand-set as
   inline SVG. Functional UI affordances only — never decorative illustration.
   ============================================================================ */
function Icon({ name, size = 22, stroke = 1.5, className = "", style = {} }) {
  const p = { fill: "none", stroke: "currentColor", strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    ledger: <><rect x="4" y="3" width="16" height="18" rx="1" {...p}/><path d="M8 7h8M8 11h8M8 15h5" {...p}/><path d="M4 7H2M4 11H2M4 15H2" {...p}/></>,
    receipt: <><path d="M5 3h14v18l-2.5-1.6L14 21l-2-1.6L10 21l-2.5-1.6L5 21V3Z" {...p}/><path d="M9 8h6M9 12h6" {...p}/></>,
    people: <><circle cx="9" cy="8" r="3.2" {...p}/><path d="M3.5 20a5.5 5.5 0 0 1 11 0" {...p}/><path d="M16 5.2a3.2 3.2 0 0 1 0 5.9M17.5 20a5.5 5.5 0 0 0-3-4.9" {...p}/></>,
    building: <><path d="M5 21V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v17" {...p}/><path d="M15 9h3a1 1 0 0 1 1 1v11" {...p}/><path d="M3 21h18M8 7h3M8 11h3M8 15h3" {...p}/></>,
    compass: <><circle cx="12" cy="12" r="9" {...p}/><path d="m15.5 8.5-2 5-5 2 2-5 5-2Z" {...p}/></>,
    chart: <><path d="M4 4v16h16" {...p}/><path d="m7 14 3-4 3 2 4-6" {...p}/></>,
    shield: <><path d="M12 3 5 6v5c0 4.5 3 8 7 10 4-2 7-5.5 7-10V6l-7-3Z" {...p}/><path d="m9 12 2 2 4-4" {...p}/></>,
    clock: <><circle cx="12" cy="12" r="9" {...p}/><path d="M12 7v5l3 2" {...p}/></>,
    target: <><circle cx="12" cy="12" r="9" {...p}/><circle cx="12" cy="12" r="5" {...p}/><circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none"/></>,
    grid: <><rect x="3" y="3" width="7" height="7" rx="1" {...p}/><rect x="14" y="3" width="7" height="7" rx="1" {...p}/><rect x="3" y="14" width="7" height="7" rx="1" {...p}/><rect x="14" y="14" width="7" height="7" rx="1" {...p}/></>,
    scale: <><path d="M12 3v18M7 21h10" {...p}/><path d="M5 7h14M5 7 2.5 13a3 3 0 0 0 5 0L5 7Zm14 0-2.5 6a3 3 0 0 0 5 0L19 7Z" {...p}/><circle cx="12" cy="4" r="1.3" fill="currentColor" stroke="none"/></>,
    coins: <><ellipse cx="9" cy="7" rx="6" ry="3" {...p}/><path d="M3 7v5c0 1.7 2.7 3 6 3s6-1.3 6-3" {...p}/><path d="M9 12v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5c0-1.7-2.7-3-6-3" {...p}/></>,
    flow: <><circle cx="6" cy="6" r="2.5" {...p}/><circle cx="18" cy="6" r="2.5" {...p}/><circle cx="12" cy="18" r="2.5" {...p}/><path d="M8 7.5 10.5 16M16 7.5 13.5 16M8.5 6h7" {...p}/></>,
    pie: <><path d="M12 3a9 9 0 1 0 9 9h-9V3Z" {...p}/><path d="M14 3.3A9 9 0 0 1 20.7 10H14V3.3Z" {...p}/></>,
    phone: <><path d="M6 3h3l1.5 5-2 1.5a11 11 0 0 0 5 5l1.5-2 5 1.5v3a2 2 0 0 1-2.2 2A16 16 0 0 1 4 5.2 2 2 0 0 1 6 3Z" {...p}/></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="1.5" {...p}/><path d="m4 7 8 6 8-6" {...p}/></>,
    pin: <><path d="M12 21s7-6.4 7-11a7 7 0 1 0-14 0c0 4.6 7 11 7 11Z" {...p}/><circle cx="12" cy="10" r="2.5" {...p}/></>,
    line: <><circle cx="12" cy="11" r="8.5" {...p}/><path d="M8 9.5v3M8 9.5h1.6M12 9.5v3M12 9.5h1.4a1 1 0 0 1 0 1.6H12M16 9.5v3M16 9.5h1.6m-1.6 1.5h1.4" {...p}/></>,
    arrow: <><path d="M5 12h14M13 6l6 6-6 6" {...p}/></>,
    check: <><path d="m4 12 5 5L20 6" {...p}/></>,
    menu: <><path d="M3 6h18M3 12h18M3 18h18" {...p}/></>,
    close: <><path d="M6 6l12 12M18 6 6 18" {...p}/></>,
    download: <><path d="M12 3v12m0 0 4-4m-4 4-4-4M4 19h16" {...p}/></>,
    filter: <><path d="M3 5h18l-7 8v6l-4-2v-4L3 5Z" {...p}/></>,
    doc: <><path d="M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" {...p}/><path d="M14 3v5h5M9 13h6M9 17h6" {...p}/></>,
    spark: <><path d="M12 3l1.8 5.7L19.5 10 14 12l-2 6-2-6L4.5 10l5.7-1.3L12 3Z" {...p}/></>,
  };
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} className={className} style={style} aria-hidden="true">
      {paths[name] || null}
    </svg>
  );
}

/* ---- Header ------------------------------------------------------------- */
const NAV = [
  { href: "index.html", label: "หน้าแรก" },
  { href: "services.html", label: "บริการ" },
  { href: "dashboard.html", label: "Management Dashboard" },
  { href: "about.html", label: "เกี่ยวกับเรา" },
  { href: "contact.html", label: "ติดต่อ" },
];

function Header({ active }) {
  const [open, setOpen] = useState(false);
  return (
    <header className="site-header">
      <div className="wrap">
        <nav className="nav">
          <a className="brand" href="index.html" aria-label="T1 Service — หน้าแรก">
            <img src="assets/logo-mark-twotone.png" alt="T1 Service" />
            <span className="wm">
              <span className="name">T1 Service</span>
              <span className="sub">สำนักงานบัญชี</span>
            </span>
          </a>
          <div className="nav-links">
            {NAV.map(n => (
              <a key={n.href} href={n.href} className={active === n.href ? "active" : ""}>{n.label}</a>
            ))}
          </div>
          <div className="nav-cta">
            <a className="btn btn-primary" href="contact.html"><Icon name="arrow" size={17}/>ขอคำปรึกษา</a>
            <button className="nav-toggle" onClick={() => setOpen(o => !o)} aria-label="เมนู">
              <Icon name={open ? "close" : "menu"} size={26}/>
            </button>
          </div>
        </nav>
      </div>
      <div className={"mnav" + (open ? " open" : "")}>
        <div className="wrap">
          {NAV.map(n => <a key={n.href} href={n.href}>{n.label}</a>)}
          <a className="btn btn-primary" href="contact.html">ขอคำปรึกษา</a>
        </div>
      </div>
    </header>
  );
}

/* ---- Footer ------------------------------------------------------------- */
function Footer() {
  return (
    <footer className="site-footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-brand">
            <img src="assets/logo-full-twotone-ondark.png" alt="T1 Service" />
            <p>บริษัท ที วัน เซอร์วิส จำกัด — สำนักงานบัญชีที่แข่งกันที่ความถูกต้องและความแม่นยำ ไม่ใช่ราคา</p>
          </div>
          <div className="footer-col">
            <h4>บริการ</h4>
            <a href="services.html">ทำบัญชี &amp; ปิดงบ</a>
            <a href="services.html">ภาษีอากร</a>
            <a href="service-payroll.html">งานบุคคล &amp; เงินเดือน</a>
            <a href="services.html">จดทะเบียนธุรกิจ</a>
            <a href="services.html">ที่ปรึกษา &amp; สอบบัญชี</a>
          </div>
          <div className="footer-col">
            <h4>บริษัท</h4>
            <a href="about.html">เกี่ยวกับเรา</a>
            <a href="dashboard.html">Management Dashboard</a>
            <a href="contact.html">ขอคำปรึกษา</a>
            <a href="contact.html">ขอใบเสนอราคา</a>
          </div>
          <div className="footer-col">
            <h4>ติดต่อ</h4>
            <p className="meta">
              02 016 5400<br/>
              hello@t1.co.th<br/>
              LINE&nbsp;:&nbsp;@t1service<br/>
              จ.–ศ. 09:00–18:00
            </p>
          </div>
        </div>
        <div className="footer-bottom">
          <span className="tagline">ปิดงบไม่ต้องลุ้น ภาษีไม่ต้องเดา</span>
          <span>© 2026 T1 Service Co., Ltd. · เลขทะเบียน 0 1055 6 01234 5 · t1.co.th</span>
        </div>
      </div>
    </footer>
  );
}

/* ---- Small composables -------------------------------------------------- */
function SecHead({ over, title, lead, onInk }) {
  return (
    <div className="sec-head">
      <span className={"overline" + (onInk ? " on-ink" : "")}>{over}</span>
      <hr className="rule-gold" />
      <h2 className="display" style={onInk ? { color: "#fff" } : null}>{title}</h2>
      {lead && <p className="lead">{lead}</p>}
    </div>
  );
}

function Tag({ children, kind = "line", mono }) {
  return <span className={"tag " + kind + (mono ? " mono" : "")}>{children}</span>;
}

function CTABand({ title, body, primary = { href: "contact.html", label: "ขอคำปรึกษา" }, secondary }) {
  return (
    <div className="cta-band">
      <div>
        <span className="overline on-ink">เริ่มต้นกับ T1</span>
        <h2 className="display" style={{ color: "#fff", marginTop: 14 }}>{title}</h2>
        <p>{body}</p>
      </div>
      <div className="acts">
        <a className="btn btn-on-ink" href={primary.href}><Icon name="arrow" size={17}/>{primary.label}</a>
        {secondary && <a className="btn btn-on-ink btn-secondary" href={secondary.href}>{secondary.label}</a>}
      </div>
    </div>
  );
}

Object.assign(window, { Icon, Header, Footer, SecHead, Tag, CTABand, NAV });