const Contact = () => {
  return (
    <section id="contact" style={{ background: "var(--bg)", padding: "110px 0" }}>
      <div className="wrap">
        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 80,
          alignItems: "start",
        }} className="contact-grid">

          {/* Left — copy */}
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>
              <span className="dot"></span>Get early access
            </div>
            <h2 className="display section-title" style={{ marginBottom: 20 }}>
              Be first when your store's report is ready.
            </h2>
            <p style={{
              fontSize: 17.5, color: "var(--muted)",
              lineHeight: 1.6, marginBottom: 32, maxWidth: "44ch",
            }}>
              Leave your email and we'll send your Store Visibility Report the moment it's available — no waitlist, no spam, just your results.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              {[
                { icon: "◎", label: "Citation score across 4 AI engines" },
                { icon: "◎", label: "Category benchmark vs. competitors" },
                { icon: "◎", label: "Ranked fixes to move up fast" },
              ].map(({ icon, label }) => (
                <div key={label} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <span style={{ color: "var(--teal)", fontSize: 14, flexShrink: 0 }}>{icon}</span>
                  <span style={{ fontSize: 15.5, color: "var(--text)" }}>{label}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Right — Elfsight form */}
          <div style={{
            background: "var(--card)",
            border: "1px solid var(--border)",
            borderRadius: 16,
            padding: "36px 32px",
            boxShadow: "0 1px 3px rgba(0,0,0,0.05)",
          }}>
            <div style={{ marginBottom: 6 }}>
              <h3 className="display" style={{
                fontSize: 24, margin: "0 0 8px",
                fontVariationSettings: '"opsz" 60',
              }}>
                We'll let you know the minute you're in.
              </h3>
              <p style={{ fontSize: 15, color: "var(--muted)", margin: "0 0 20px" }}>
                Drop your email below — we'll reach out as soon as your report is ready.
              </p>
            </div>
            {/* Elfsight Contact Form | Cited Store */}
            <div
              className="elfsight-app-832e001a-d44d-4c7b-acb7-bb024a6a444d"
              data-elfsight-app-lazy
            />
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 860px) {
          .contact-grid {
            grid-template-columns: 1fr !important;
            gap: 40px !important;
          }
        }
      `}</style>
    </section>
  );
};

window.Contact = Contact;