/* global React */

const JoinCta = ({ onJoin, onContact }) => (
  <section id="choose" className="section-pad" style={{
    background: "var(--teal)", color: "var(--cream)",
    padding: "128px 32px", borderTop: "1px solid var(--hairline)",
    position: "relative", overflow: "hidden"
  }}>
    {/* Halftone texture */}
    <div aria-hidden style={{
      position: "absolute", inset: 0, opacity: 0.08, pointerEvents: "none",
      backgroundImage: "radial-gradient(circle, #F4EFE0 1px, transparent 1px)",
      backgroundSize: "12px 12px"
    }}/>

    <div style={{ maxWidth: 1100, margin: "0 auto", position: "relative" }}>
      <Eyebrow>Why Choose Us</Eyebrow>

      <h2 style={{
        fontFamily: "var(--font-display)", fontWeight: 600,
        fontSize: "clamp(48px, 7vw, 96px)", lineHeight: 1,
        letterSpacing: "-0.035em", margin: "16px 0 24px", color: "var(--cream)"
      }}>
        Win with<br/>Pravah Solution.
      </h2>

      <p style={{
        fontSize: 22, lineHeight: 1.5, color: "rgba(244,239,224,0.85)",
        maxWidth: 720, margin: "0 0 36px"
      }}>
        We combine political experience, data intelligence, and digital innovation to deliver powerful election campaigns.
      </p>

      <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
        <Button variant="primary" onClick={onJoin}>Work with us</Button>
        <button onClick={onContact} style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 600,
          padding: "12px 20px", borderRadius: 2,
          background: "transparent", color: "var(--cream)",
          border: "1px solid rgba(244,239,224,0.6)", cursor: "pointer"
        }}>
          Get in touch
        </button>
      </div>

      <div className="grid-4" style={{
        marginTop: 64, display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 24,
        paddingTop: 32, borderTop: "1px solid rgba(244,239,224,0.25)"
      }}>
        {[
          { n: "7+",   l: "Years experience"        },
          { n: "50+",  l: "Campaigns delivered"     },
          { n: "6",    l: "States served"            },
          { n: "175K+", l: "Voters reached per campaign" },
        ].map((s, i) => (
          <div key={i}>
            <div style={{
              fontFamily: "var(--font-display)", fontSize: "clamp(32px, 3vw, 48px)",
              fontWeight: 600, letterSpacing: "-0.02em", color: "var(--gold)"
            }}>
              {s.n}
            </div>
            <div style={{
              fontSize: 13, fontWeight: 600, letterSpacing: "0.08em",
              textTransform: "uppercase", color: "rgba(244,239,224,0.85)", marginTop: 4
            }}>
              {s.l}
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

window.JoinCta = JoinCta;