/* global React, Icon, Eyebrow, Button */
const { useState } = React;

const SERVICE_CATS = [
  {
    id: "personal", tab: "Personal & Civil", icon: "scroll-text",
    blurb: "Vital and personal records, certified for official submission.",
    docs: ["Birth certificates", "Marriage certificates", "Divorce decrees", "Death certificates",
      "Passports", "National ID cards", "Driver's licenses", "Police clearance certificates",
      "Military records", "Name change certificates", "Employment records", "Bank statements"],
  },
  {
    id: "legal", tab: "Legal", icon: "gavel",
    blurb: "Precise, consistent translations that preserve legal meaning and context.",
    docs: ["Contracts & agreements", "Powers of attorney", "Court decisions", "Litigation documents",
      "Notarial documents", "Corporate resolutions", "Licensing documents", "Compliance documentation",
      "Intellectual property records", "Legal correspondence"],
  },
  {
    id: "academic", tab: "Academic", icon: "graduation-cap",
    blurb: "Certified academic translations for admissions, licensing, and evaluation.",
    docs: ["Diplomas", "Academic transcripts", "Degree certificates", "Course descriptions",
      "Syllabi", "Research publications", "Academic awards", "Professional certifications",
      "Letters of recommendation"],
  },
  {
    id: "business", tab: "Business", icon: "briefcase",
    blurb: "Corporate and commercial documents with industry terminology preserved.",
    docs: ["Articles of incorporation", "Corporate registration", "Annual reports", "Financial statements",
      "Commercial agreements", "Business plans", "Company profiles", "HR documentation",
      "Product documentation", "Investor presentations"],
  },
];

function Services() {
  const [active, setActive] = useState("personal");
  const cat = SERVICE_CATS.find((c) => c.id === active);
  return (
    <section id="documents" className="cl-section cl-bg-paper">
      <div className="cl-container">
        <div className="cl-section-head">
          <Eyebrow>Documents we translate</Eyebrow>
          <h2 className="cl-h2">Certified for every official purpose.</h2>
          <p className="cl-lead" style={{ marginTop: 14 }}>
            From a single birth certificate to a full corporate filing — we preserve
            structure, seals, stamps, and signatures wherever possible.
          </p>
        </div>

        <div className="cl-tabs">
          {SERVICE_CATS.map((c) => (
            <button key={c.id} className={"cl-tab" + (active === c.id ? " active" : "")} onClick={() => setActive(c.id)}>
              <Icon name={c.icon} size={17} />{c.tab}
            </button>
          ))}
        </div>

        <div className="cl-card" style={{ padding: "30px 32px" }}>
          <p style={{ fontSize: 15.5, color: "var(--slate)", marginBottom: 22, maxWidth: 640 }}>{cat.blurb}</p>
          <div className="cl-doclist">
            {cat.docs.map((d) => (
              <div className="cl-doc" key={d}><Icon name="check" size={16} />{d}</div>
            ))}
          </div>
          <div style={{ marginTop: 24 }}>
            <Button variant="link" iconRight="arrow-right">Don't see your document? Ask us</Button>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Services = Services;