/* global React, Button, Icon, Eyebrow, Badge */
function Hero({ onQuote }) {
  return (
    <section id="top" className="cl-bg-navy-grad cl-hero on-navy">
      <img className="cl-azimuth" src="assets/columbus-lingua-mark-white.svg" alt="" aria-hidden="true" />
      <div className="cl-container">
        <div className="cl-hero-grid">
          <div>
            <Eyebrow light>Ukrainian &amp; Russian → English</Eyebrow>
            <h1 className="cl-h1">Certified translations<br />you can trust.</h1>
            <p className="cl-lead">
              Professional certified translations prepared in accordance with USCIS
              requirements — for immigration, legal, academic, and business needs.
              Accurate, confidential, and delivered in 24–48 hours.
            </p>
            <div className="cl-hero-actions">
              <Button variant="gold" size="lg" icon="file-check-2" onClick={onQuote}>Get a Free Quote</Button>
              <Button variant="ghost-light" size="lg" icon="folder-up" onClick={onQuote}>Submit Documents</Button>
            </div>
            <div className="cl-hero-langs">
              <span className="pair"><Icon name="languages" size={16} />Ukrainian → English</span>
              <span style={{ opacity: 0.4 }}>·</span>
              <span className="pair"><Icon name="languages" size={16} />Russian → English</span>
            </div>
          </div>

          <div className="cl-hero-card">
            <div className="head">
              <span className="ico"><Icon name="badge-check" size={18} /></span>
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 18, color: "var(--ink)" }}>Certificate of Accuracy</div>
                <div style={{ fontSize: 12.5, color: "var(--muted)" }}>Included with every translation</div>
              </div>
            </div>
            <p style={{ fontSize: 14.5, lineHeight: 1.6, color: "var(--slate)", fontStyle: "italic", fontFamily: "var(--font-display)", margin: "14px 0 18px", paddingLeft: 14, borderLeft: "2px solid var(--gold-500)" }}>
              “I certify that I am competent to translate from the source language into
              English and that the foregoing translation is complete and accurate.”
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              <Badge tone="gold" icon="shield-check">USCIS-Ready</Badge>
              <Badge tone="navy" icon="lock">Confidential</Badge>
              <Badge tone="success" icon="clock">24–48 hrs</Badge>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;