/* global React, Icon, Eyebrow, Button */
const REASONS = [
  { icon: "badge-check", t: "USCIS-Ready certification", p: "Prepared in a format suitable for USCIS submissions and other official U.S. purposes." },
  { icon: "user-check", t: "Professional accuracy", p: "Completed by experienced language professionals with immigration, legal, and academic expertise." },
  { icon: "table-properties", t: "Formatting preserved", p: "We carefully preserve structure, tables, seals, stamps, and signatures wherever possible." },
  { icon: "lock-keyhole", t: "Confidential & secure", p: "All documents and personal information are handled with strict confidentiality." },
  { icon: "clock", t: "Fast turnaround", p: "Most standard documents are translated and certified within 24–48 hours." },
  { icon: "file-down", t: "Digital delivery", p: "Delivered electronically in professional PDF format, ready for printing or submission." },
];
function WhyChoose({ onQuote }) {
  return (
    <section id="why" className="cl-section cl-bg-navy on-navy">
      <div className="cl-container">
        <div className="cl-grid-2" style={{ alignItems: "center", gap: 56 }}>
          <div>
            <Eyebrow light>Why choose us</Eyebrow>
            <h2 className="cl-h2">A focused specialty,<br />held to the highest standard.</h2>
            <p className="cl-lead" style={{ marginTop: 16 }}>
              We work exclusively with Ukrainian → English and Russian → English. That
              focus lets us maintain exceptional quality and consistency on every project.
            </p>
            <div style={{ marginTop: 26, display: "flex", gap: 14, flexWrap: "wrap" }}>
              <Button variant="gold" size="lg" icon="file-check-2" onClick={onQuote}>Get a Free Quote</Button>
              <Button variant="ghost-light" size="lg" icon="send" onClick={() => window.open("https://t.me/columbus_support", "_blank")}>Message on Telegram</Button>
            </div>
          </div>
          <div className="cl-grid-2" style={{ gap: 26 }}>
            {REASONS.map((r) => (
              <div className="cl-feature" key={r.t}>
                <span className="fico"><Icon name={r.icon} size={20} /></span>
                <div>
                  <h3>{r.t}</h3>
                  <p>{r.p}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.WhyChoose = WhyChoose;