const Problem = () => {
  const cards = [
    {
      n: "01 / DISPUTES",
      h: "“They never finished the roof.”",
      p: "A week after you hand over the keys, the homeowner swears the job is half-done. Without timestamped, pitch-by-pitch footage of the crew on the roof, it's your word against theirs — and you pay the settlement to keep the review.",
      d: "$5K–$25K",
      l: "Per unresolved dispute",
    },
    {
      n: "02 / THEFT",
      h: "Ladder left. $12K gone by dawn.",
      p: "A ladder still on the side of a house is the #1 invitation to overnight theft in Florida roofing. Sitinel's magnetic ladder sensor alerts your foreman before they leave the site — and flags it to the central station if it stays up after hours.",
      d: "$10K+",
      l: "Avg single-event loss",
    },
    {
      n: "03 / PREMIUMS",
      h: "Carrier hiked me again.",
      p: "Without certified on-site monitoring, your broker has nothing to negotiate with. Every renewal without proof is money left on the table.",
      d: "Renewal",
      l: "Leverage your broker actually wants",
    },
  ];
  return (
    <section className="section" id="problem">
      <div className="wrap">
        <div className="section-head">
          <Reveal><Eyebrow>The Reality</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2>Three ways your<br/>jobsite bleeds money.</h2>
          </Reveal>
          <Reveal delay={160}>
            <p className="lead">
              Every roofing crew in Florida loses tens of thousands a year to
              problems that have one thing in common: no evidence on hand.
            </p>
          </Reveal>
        </div>
        <div className="problem-grid">
          {cards.map((c, i) => (
            <Reveal key={c.n} delay={i * 100}>
              <div className="problem-card">
                <div className="mark">
                  <span>{c.n}</span>
                  <span>{String(i + 1).padStart(2, "0")}/03</span>
                </div>
                <h3>{c.h}</h3>
                <p>{c.p}</p>
                <div className="dollar">
                  <span className="v tabular">{c.d}</span>
                  <span className="l">{c.l}</span>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Problem });