// Problem.jsx — "Sound familiar?" — 4 blocks in 2x2 grid

function Problem() {
  useLucide();
  const items = [
  {
    photoIcon: "inbox",
    photo: "Full email inbox",
    title: "Enquiries sitting there all day.",
    body: "Requests from new customers, sitting unanswered. By the time you get to them, the jobs went to whoever replied first."
  },
  {
    photoIcon: "phone-missed",
    photo: "Phone with missed call",
    title: "Missed calls while you're on the job.",
    body: "Every unanswered ring is a job that probably went somewhere else. Voicemail rarely brings them back."
  },
  {
    photoIcon: "file-stack",
    photo: "Invoices piled on a desk",
    title: "Invoices everywhere — and nowhere.",
    body: "Paper, email, WhatsApp — your bills and invoices are piling everywhere. Nothing in a system. Nothing searchable. You lose track of what's paid and what isn't."
  },
  {
    photoIcon: "calendar-clock",
    photo: "Missed reminder on phone",
    title: "The jobs that nearly happened.",
    body: "A customer said call me back. You meant to. Someone didn't confirm, someone didn't show. The diary has gaps you didn't plan for."
  }];


  return (
    <Section id="problem" bg="sand">
      <div style={{ marginBottom: 56, maxWidth: 720 }}>
        <Eyebrow>The headaches</Eyebrow>
        <h2 style={{
          fontSize: "clamp(36px, 5vw, 56px)", fontWeight: 800,
          letterSpacing: "-0.03em", lineHeight: 1.05,
          margin: "14px 0 0", color: "var(--ink)", textWrap: "balance"
        }}>Sound familiar?</h2>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20 }} className="grid-2">
        {items.map((p) =>
        <div key={p.title} style={{
          background: "#fff", borderRadius: 16, padding: 28,
          border: "1px solid var(--line)",
          display: "flex", gap: 24, alignItems: "flex-start",
          transition: "transform .2s var(--t-ease), box-shadow .2s var(--t-ease)"
        }}
        onMouseEnter={(e) => {e.currentTarget.style.transform = "translateY(-3px)";e.currentTarget.style.boxShadow = "var(--sh-md)";}}
        onMouseLeave={(e) => {e.currentTarget.style.transform = "translateY(0)";e.currentTarget.style.boxShadow = "none";}}>
            <div style={{ width: 64, flexShrink: 0 }}>
              <div style={{
                width: 64, height: 64, borderRadius: 14,
                background: "var(--blue-100)",
                color: "var(--blue)",
                display: "flex", alignItems: "center", justifyContent: "center",
                border: "1px solid var(--line-2)"
              }}>
                <i data-lucide={p.photoIcon} style={{ width: 28, height: 28, strokeWidth: 1.75 }}></i>
              </div>
            </div>
            <div style={{ paddingTop: 4, minWidth: 0 }}>
              <h3 style={{ fontSize: 19, fontWeight: 700, color: "var(--ink)",
              margin: "0 0 10px", lineHeight: 1.3, letterSpacing: "-0.01em" }}>{p.title}</h3>
              <p style={{ fontSize: 15, color: "var(--ink-soft)", margin: 0,
              lineHeight: 1.55, textWrap: "pretty" }}>{p.body}</p>
            </div>
          </div>
        )}
      </div>

      <div style={{
        marginTop: 56, textAlign: "center",
        display: "flex", flexDirection: "column", alignItems: "center", gap: 18
      }}>
        <p style={{ fontSize: 22, fontWeight: 600, lineHeight: 1.4,
          color: "var(--ink)", margin: 0, maxWidth: 620, textWrap: "balance",
          letterSpacing: "-0.015em" }}>
          All of this is fixable with AI. Quietly, in the background.<br />
          <span style={{ color: "var(--muted)", fontWeight: 500 }}>Call us — we'll sort it out.</span>
        </p>
        <a href="tel:07378242539"
        style={{
          display: "inline-flex", alignItems: "center", gap: 10,
          padding: "12px 18px", borderRadius: 12,
          background: "var(--ink)", color: "#fff",
          fontSize: 14, fontWeight: 600, textDecoration: "none",
          border: "1px solid var(--ink)",
          transition: "transform .12s var(--t-ease)"
        }}
        onMouseEnter={(e) => e.currentTarget.style.transform = "translateY(-1px)"}
        onMouseLeave={(e) => e.currentTarget.style.transform = "translateY(0)"}>
          <i data-lucide="phone" style={{ width: 14, height: 14, strokeWidth: 2.25 }}></i>
          Call us — 07378 242539
        </a>
      </div>
    </Section>);

}
window.Problem = Problem;