/* Services — clean light cards, high-contrast text, vibrant accents */

function Services() {
  // Cursor-tracking shine on each service card.
  const onCardMove = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    const x = ((e.clientX - r.left) / r.width)  * 100;
    const y = ((e.clientY - r.top)  / r.height) * 100;
    e.currentTarget.style.setProperty("--shine-x", x + "%");
    e.currentTarget.style.setProperty("--shine-y", y + "%");
  };
  const items = [
    {
      num: "01",
      tag: "Design",
      title: "Custom website design",
      body: "Designed from scratch for your business — not picked off a template shelf. Responsive, fast, and easy to update.",
      tint: "#0F8C5F",          // emerald
      tintText: "#0B7349",      // darker for tag/link readability
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="2" y="3" width="20" height="14" rx="2"/>
          <line x1="8" y1="21" x2="16" y2="21"/>
          <line x1="12" y1="17" x2="12" y2="21"/>
        </svg>
      ),
    },
    {
      num: "02",
      tag: "Discovery",
      title: "SEO & AI answer engines",
      body: "Get found on Google, ChatGPT, and Perplexity. Premium adds structured AEO so AI assistants surface your business.",
      tint: "#E68A19",          // amber
      tintText: "#B66B0A",      // darker amber for readable text
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="11" cy="11" r="7"/>
          <line x1="16" y1="16" x2="21" y2="21"/>
        </svg>
      ),
    },
    {
      num: "03",
      tag: "Infrastructure",
      title: "Hosting, domain & email",
      body: "EU-hosted with SSL, backups, your own domain and email — all handled. You'll never see a renewal email.",
      tint: "#8B5CF6",          // lighter plum
      tintText: "#6D40D9",      // darker plum for text
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="4" width="18" height="6" rx="1"/>
          <rect x="3" y="14" width="18" height="6" rx="1"/>
          <circle cx="7" cy="7" r="0.5" fill="currentColor"/>
          <circle cx="7" cy="17" r="0.5" fill="currentColor"/>
        </svg>
      ),
    },
    {
      num: "04",
      tag: "Support",
      title: "Maintenance & updates",
      body: "Premium includes unlimited edits and new pages. Standard includes monthly edits. Starter gets help on-demand.",
      tint: "#E04E66",          // coral
      tintText: "#B5384C",      // darker coral for text
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
        </svg>
      ),
    },
  ];

  return (
    <section id="services" className="services">
      <div className="container">
        <div className="section-head services-head">
          <span className="eyebrow">What we do</span>
          <h2>Everything your business needs to be <span className="h-accent">online</span>.</h2>
          <p className="lead">One studio, one subscription. Design, hosting, domain, email, and SEO — all sorted, all included.</p>
        </div>
        <div className="services-grid">
          {items.map((it, i) => (
            <article
              key={it.title}
              className="service-card"
              style={{"--card-tint": it.tint, "--card-tint-text": it.tintText}}
              onPointerMove={onCardMove}
            >
              <div className="service-card-top">
                <div className="service-icon-wrap" aria-hidden="true">
                  {it.icon}
                </div>
                <span className="service-num">{it.num}</span>
              </div>
              <div className="service-card-body">
                <span className="service-tag">{it.tag}</span>
                <h3>{it.title}</h3>
                <p>{it.body}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        .services { background: var(--paper); }
        .services-head { max-width: 760px; }

        .services-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 14px;
        }
        @media (max-width: 1020px) { .services-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
        @media (max-width: 540px)  { .services-grid { grid-template-columns: 1fr; gap: 12px; } }

        .service-card {
          position: relative;
          background:
            radial-gradient(140% 80% at 100% 0%, color-mix(in srgb, var(--card-tint) 16%, transparent) 0%, transparent 70%),
            color-mix(in srgb, var(--card-tint) 5%, var(--surface));
          border: 1px solid color-mix(in srgb, var(--card-tint) 18%, var(--border));
          border-radius: var(--r-lg);
          padding: clamp(22px, 2.4vw, 28px) clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 26px);
          min-height: 240px;
          display: flex;
          flex-direction: column;
          gap: 20px;
          overflow: hidden;
          isolation: isolate;
          transform: perspective(800px) rotateX(0deg) rotateY(0deg) translateZ(0);
          transform-style: preserve-3d;
          transition: transform 320ms var(--ease-out-soft),
                      box-shadow var(--dur-base) var(--ease-out-soft),
                      border-color var(--dur-base) var(--ease-out-soft),
                      background var(--dur-base) var(--ease-out-soft);
        }
        /* Interactive shine — follows cursor via --shine-x / --shine-y set in JS */
        .service-card::after {
          content: "";
          position: absolute;
          inset: 0;
          background: radial-gradient(220px circle at var(--shine-x, 50%) var(--shine-y, 50%),
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0) 60%);
          opacity: 0;
          pointer-events: none;
          z-index: 0;
          transition: opacity 280ms var(--ease-out-soft);
        }
        .service-card:hover::after { opacity: 1; }
        .service-card > * { position: relative; z-index: 1; }
        .service-card:hover {
          transform: translateY(-6px);
          box-shadow: 0 18px 38px rgba(20,20,20,0.10);
          border-color: color-mix(in srgb, var(--card-tint) 40%, var(--border));
          background:
            radial-gradient(140% 80% at 100% 0%, color-mix(in srgb, var(--card-tint) 22%, transparent) 0%, transparent 70%),
            color-mix(in srgb, var(--card-tint) 8%, var(--surface));
        }

        .service-card-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .service-icon-wrap {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          background: var(--surface);
          color: var(--card-tint-text);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.6) inset,
            0 4px 12px rgba(20, 20, 20, 0.06);
          transition: transform var(--dur-base) var(--ease-out-soft);
        }
        .service-card:hover .service-icon-wrap {
          transform: scale(1.08) rotate(-3deg);
        }
        .service-icon-wrap svg { width: 24px; height: 24px; }

        .service-num {
          font-family: var(--font-display);
          font-style: italic;
          font-weight: 500;
          font-size: 22px;
          line-height: 1;
          color: var(--ink-faint);
          letter-spacing: -0.02em;
        }

        .service-card-body {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
        .service-tag {
          font-family: var(--font-body);
          font-weight: 700;
          font-size: 10.5px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--card-tint-text);
        }
        .service-card h3 {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 20px;
          line-height: 1.2;
          margin: 0;
          color: var(--ink);
          letter-spacing: -0.02em;
        }
        .service-card p {
          font-family: var(--font-body);
          font-size: 14.5px;
          line-height: 1.6;
          color: var(--ink-soft);
          margin: 4px 0 0;
        }
      `}</style>
    </section>
  );
}

window.Services = Services;