/* global React, Icon, Eyebrow, Button */
const EMAIL = "columbus.lingua.llc@gmail.com";
const SUBJECT = "Certified Translation Quote Request";
const BODY = "Hello Columbus Lingua,\n\nI'd like a free quote for a certified translation.\n\nDocument(s): \nSource language (Ukrainian / Russian): \nPurpose (USCIS, legal, academic, business): \n\nI've attached clear scans/photos of my document(s).\n\nThank you!";
const MAILTO = `mailto:${EMAIL}?subject=${encodeURIComponent(SUBJECT)}&body=${encodeURIComponent(BODY)}`;
const TELEGRAM = "https://t.me/columbus_support";

function QuoteForm() {
  const [copied, setCopied] = React.useState(false);

  const copyEmail = (e) => {
    e.preventDefault();
    e.stopPropagation();
    const done = () => { setCopied(true); setTimeout(() => setCopied(false), 2400); };
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(EMAIL).then(done).catch(done);
    } else {
      const t = document.createElement("textarea");
      t.value = EMAIL; document.body.appendChild(t); t.select();
      try { document.execCommand("copy"); } catch (_) {}
      document.body.removeChild(t); done();
    }
  };

  return (
    <section id="contact" className="cl-section cl-bg-cloud">
      <div className="cl-container">
        <div className="cl-quote-wrap">
          <div className="cl-quote-side">
            <Eyebrow light>Request a quote</Eyebrow>
            <h2 className="cl-h2" style={{ fontSize: 30 }}>Get your free quote in two easy ways.</h2>
            <p className="cl-lead">Send clear scans or photos of your documents — we'll reply with a transparent quote and timeline, usually the same day.</p>
            <div className="cl-quote-points">
              <div className="cl-quote-point"><Icon name="badge-check" size={18} /><span>USCIS-ready certified translation included</span></div>
              <div className="cl-quote-point"><Icon name="lock-keyhole" size={18} /><span>Your documents stay strictly confidential</span></div>
              <div className="cl-quote-point"><Icon name="clock" size={18} /><span>Most documents completed in 24–48 hours</span></div>
            </div>
          </div>

          <div className="cl-quote-form">
            <div className="cl-getstarted">
              {/* Option 1 — Email */}
              <a className="cl-option" href={MAILTO}>
                <span className="cl-option-ico"><Icon name="mail" size={22} /></span>
                <span className="cl-option-body">
                  <span className="cl-option-title">Email us for a quote</span>
                  <span className="cl-option-desc">Attach your documents and we'll reply with a price and timeline. Opens your email app.</span>
                  <span className="cl-option-actions">
                    <span className="cl-option-cta">{EMAIL} <Icon name="arrow-right" size={15} /></span>
                    <button type="button" className="cl-copy-btn" onClick={copyEmail} aria-label="Copy email address">
                      <Icon name={copied ? "check" : "copy"} size={14} />{copied ? "Copied" : "Copy"}
                    </button>
                  </span>
                </span>
              </a>

              <div className="cl-or"><span>or</span></div>

              {/* Option 2 — Telegram + QR */}
              <div className="cl-option cl-option-tg">
                <span className="cl-option-ico"><Icon name="send" size={22} /></span>
                <span className="cl-option-body">
                  <span className="cl-option-title">Chat with us on Telegram</span>
                  <span className="cl-option-desc">Message us directly to send documents and get a fast quote.</span>
                  <a className="cl-tg-btn" href={TELEGRAM} target="_blank" rel="noopener noreferrer">
                    <Icon name="send" size={16} />Open Telegram chat
                  </a>
                </span>
                <a className="cl-qr-card" href={TELEGRAM} target="_blank" rel="noopener noreferrer" aria-label="Scan to chat on Telegram">
                  <span className="cl-qr-box"><img src="assets/telegram-qr.png" alt="Telegram QR code for @columbus_support" /></span>
                  <span className="cl-qr-cap">Scan to chat</span>
                </a>
              </div>

              <p className="cl-getstarted-note"><Icon name="lock" size={13} />Your information is kept strictly confidential.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.QuoteForm = QuoteForm;