/* global React, Icon */

const SERVICES = [
  { icon: "home", title: "Nyt tag",
    body: "Vi er Monier-certificeret Tagpartner™, de eneste i Sønderjylland. Skift af tagsten, undertag, isolering og inddækninger. Byg-Garanti på det hele." },
  { icon: "camera", title: "Nye vinduer",
    body: "VinduesMester og VELFAC-forhandler. Kom forbi showroomet og se, rør og betjen vinduerne, før du vælger. Vi måler og monterer selv." },
  { icon: "wrench", title: "Tilbygning & ombygning",
    body: "Udestue, kvist, ekstra rum, totalrenovering. Fra første streg til afleveret nøgle. Byggeleder Thomas styrer hele projektet." },
  { icon: "hard-hat", title: "Tømrer & snedker",
    body: "Døre, gulve, indretning, terrasser, carporte. Alt fra mindre opgaver til hele entrepriser." },
  { icon: "cloud-rain", title: "Akut tagskade",
    body: "Storm, hagl eller utæthed? Vi rykker ud samme dag med afdækning, og laver det helt færdigt bagefter." },
  { icon: "shield-check", title: "VELUX dagslys",
    body: "VELUX-certificeret dagslysrådgiver. Ovenlys, kviste og lyskasser, så der kommer dagslys hele vejen ned." },
];

function Services({ onOpenQuote }) {
  const [hovered, setHovered] = React.useState(null);
  return (
    <section className="services section grain" id="services" data-screen-label="Services">
      <div className="container">
        <div className="services__head">
          <div>
            <span className="eyebrow">Hvad vi laver</span>
            <h2 className="section-title">Ærligt håndværk.<br/>Lokalt og certificeret.</h2>
          </div>
          <p className="section-sub">Vi er ét firma med fire specialer. Det betyder, at vi kan tage hele opgaven fra nyt tag til vinduer og tilbygning uden at involvere fire forskellige håndværkere.</p>
        </div>
        <div className="services__grid">
          {SERVICES.map((s, i) => (
            <article
              key={s.title}
              className={"service-card" + (hovered === i ? " service-card--hover" : "")}
              onMouseEnter={() => setHovered(i)}
              onMouseLeave={() => setHovered(null)}
              onClick={onOpenQuote}
            >
              <div className="service-card__icon"><Icon name={s.icon} size={28} stroke="#E5AC31" /></div>
              <h3 className="service-card__title" dangerouslySetInnerHTML={{ __html: s.title }}/>
              <p className="service-card__body" dangerouslySetInnerHTML={{ __html: s.body }}/>
              <div className="service-card__link">Læs mere <Icon name="arrow-right" size={14} stroke="#E5AC31" /></div>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        .services__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 48px; }
        .services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .service-card {
          padding: 28px; background: var(--surface-panel);
          border: 1px solid var(--surface-divider); border-radius: var(--radius-lg);
          box-shadow: var(--shadow-card); cursor: pointer;
          transition: transform var(--dur-fast) var(--ease-snappy), border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
        }
        .service-card--hover {
          transform: translateY(-3px);
          border-color: var(--accent);
          background: var(--surface-panel-hi);
          box-shadow: var(--shadow-card-hi);
        }
        .service-card__icon {
          width: 56px; height: 56px; border-radius: 10px;
          background: rgba(229,172,49,0.12);
          display: flex; align-items: center; justify-content: center;
        }
        .service-card__title { font-family: var(--font-display); font-weight: 700; font-size: 24px; text-transform: uppercase; letter-spacing: -0.005em; margin: 18px 0 8px; }
        .service-card__body { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--paper-dim); margin: 0 0 18px; }
        .service-card__link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
        @media (max-width: 960px) {
          .services__head { grid-template-columns: 1fr; }
          .services__grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 640px) {
          .services__grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Services });