/* global React */

const ServiceIcon = ({ kind }) => {
  const icons = {
    deck: (
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <path d="M3 8h18M3 13h18M3 18h18" />
        <path d="M5 3v18M12 3v18M19 3v18" />
      </svg>
    ),
    roof: (
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <path d="M2 12L12 4l10 8" />
        <path d="M5 10v10h14V10" />
        <path d="M9 20v-6h6v6" />
      </svg>
    ),
    concrete: (
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <path d="M3 18h18M3 14h18M3 10h18M3 6h18" />
        <circle cx="7" cy="8" r="0.8" fill="currentColor" />
        <circle cx="14" cy="12" r="0.8" fill="currentColor" />
        <circle cx="18" cy="16" r="0.8" fill="currentColor" />
      </svg>
    ),
    handyman: (
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <path d="M14.7 6.3a3 3 0 00-4.2 4.2l-7 7 2 2 7-7a3 3 0 004.2-4.2l-1.5 1.5L13 8l1.7-1.7z" />
      </svg>
    ),
    repair: (
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <path d="M12 2v4M12 18v4M2 12h4M18 12h4" />
        <circle cx="12" cy="12" r="5" />
      </svg>
    ),
    consult: (
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
      </svg>
    ),
  };
  return icons[kind] || icons.deck;
};

const services = [
  {
    n: "01",
    icon: "deck",
    title: "Decks, patios &\u00a0outdoor living",
    desc: "Hand-built decks, pergolas, and stone patios designed for foothill weather and Sunday afternoons.",
    items: ["Custom redwood & composite decks", "Pergolas, gazebos, arbors", "Outdoor kitchens & fire features", "Pavers, flagstone, retaining walls"],
  },
  {
    n: "02",
    icon: "roof",
    title: "Roofing &\u00a0weather repair",
    desc: "Comp shingle, metal, and torch-down — plus the storm patches that just can't wait.",
    items: ["Full re-roofs and tear-offs", "Leak repair & flashing", "Gutters & downspouts", "Insurance claim support"],
  },
  {
    n: "03",
    icon: "concrete",
    title: "Concrete &\u00a0foundations",
    desc: "From driveways and walkways to slab pours and foundation repair on hillside lots.",
    items: ["Driveways, walkways, slabs", "Foundation repair & leveling", "Stamped & broom-finish", "Drainage & french drains"],
  },
  {
    n: "04",
    icon: "handyman",
    title: "Handyman &\u00a0small jobs",
    desc: "The 'honey-do' list, the squeaky stair, the gate that won't latch. No job too small.",
    items: ["Door & window repair", "Drywall, trim, paint touch-ups", "Fence repair & gates", "Hourly rate, two-hour minimum"],
  },
  {
    n: "05",
    icon: "repair",
    title: "Remodels &\u00a0additions",
    desc: "Kitchen, bath, and whole-home additions designed in conversation with the way you actually live.",
    items: ["Kitchen & bath remodels", "ADUs & in-law additions", "Window & door replacement", "Aging-in-place modifications"],
  },
  {
    n: "06",
    icon: "consult",
    title: "Consultations &\u00a0estimates",
    desc: "We'll come out, walk the property, and give you an honest read — usually within the same week.",
    items: ["Free in-person estimates", "Second-opinion consultations", "Project planning & sequencing", "Material & vendor referrals"],
  },
];

const Services = () => {
  return (
    <section className="section services" id="services" data-screen-label="02 Services">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">What we do</div>
            <h2>Old-fashioned trades, done well.</h2>
          </div>
          <p className="lede">
            We're a small crew. That means the same hands that bid your job
            are the ones swinging the hammer. We work on referrals more often
            than not — so we'd rather do six things well than sixty things halfway.
          </p>
        </div>

        <div className="services-grid">
          {services.map(s => (
            <article key={s.n} className="service-card">
              <div className="icon"><ServiceIcon kind={s.icon} /></div>
              <div className="num-badge">— {s.n} —</div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <ul>
                {s.items.map(i => <li key={i}>{i}</li>)}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Services = Services;