/* SERVICES — editorial minimal: hairline list of services, large detail panel,
   slate type on bone. No arches, no flourishes. */

const SERVICE_IMAGES = {
  chef:     "images/service-private-dinner.svg",
  yoga:     "uploads/service-yoga.jpeg",
  workshop: "uploads/service-workshop.jpeg",
  yacht:    "uploads/service-yacht.jpeg",
  coach:    "uploads/service-coach.jpeg",
  yoga1:    "uploads/service-yoga.jpeg",
};

function Services({ t }) {
  const [active, setActive] = React.useState(0);
  const services = t.services;

  return (
    <section className="section bg-cream services" data-screen-label="03 Services" id="services">
      <div className="section-inner">
        <header className="services-head">
          <div className="sec-badge">
            <span className="num">03</span>
            <span className="bar" />
            <span>{t.servicesEyebrow}</span>
          </div>
          <h2 className="services-title display">
            <span>{t.servicesTitle1}</span>{" "}
            <span className="italic-serif">{t.servicesTitle2}</span>
          </h2>
          <p className="services-desc italic-serif">{t.servicesDesc}</p>
        </header>

        <div className="services-stage">
          <div className="services-tabs">
            {services.map((s, i) => (
              <button
                key={s.id}
                className={`s-tab ${active === i ? "active" : ""}`}
                onClick={() => setActive(i)}
                onMouseEnter={() => setActive(i)}
              >
                <span className="s-tab-num mono">{String(i+1).padStart(2,"0")}</span>
                <span className="s-tab-name">
                  <span>{s.name1}</span>{" "}
                  <span className="italic-serif">{s.name2}</span>
                </span>
                <span className="s-tab-arrow italic-serif">→</span>
              </button>
            ))}
          </div>

          <div className="services-detail">
            <div className="detail-image">
              {services[active].id === "chef" ? (
                <video
                  src="uploads/service-chef.mp4"
                  autoPlay
                  muted
                  loop
                  playsInline
                  style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover", display: "block", background: "#0e0e0e" }}
                />
              ) : (
                <img src={SERVICE_IMAGES[services[active].id]} alt={services[active].imgLabel} style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover", display: "block" }} />
              )}
              <div className="detail-image-cap">
                <span className="mono">No. {String(active+1).padStart(2,"0")} / {String(services.length).padStart(2,"0")}</span>
                <span className="italic-serif">{services[active].name1} {services[active].name2}</span>
              </div>
            </div>

            <div className="detail-content">
              <h3 className="detail-title display">
                <span>{services[active].name1}</span>{" "}
                <span className="italic-serif">{services[active].name2}</span>
              </h3>
              <p className="detail-summary italic-serif">{services[active].summary}</p>
              <p className="detail-body">{services[active].body}</p>

              <ul className="detail-points">
                {services[active].points.map((p, j) => (
                  <li key={j}>
                    <span className="point-num mono">{String(j+1).padStart(2,"0")}</span>
                    <span>{p}</span>
                  </li>
                ))}
              </ul>

              <div className="detail-meta">
                <div className="meta-item">
                  <span className="meta-label mono">{t.metaWhere}</span>
                  <span className="meta-val">{services[active].meta1}</span>
                </div>
                <div className="meta-item">
                  <span className="meta-label mono">{t.metaSize}</span>
                  <span className="meta-val">{services[active].meta2}</span>
                </div>
              </div>

              <a href="#contact" className="btn btn-filled detail-cta">
                <span>{t.servicesCta}</span>
                <span className="arrow">→</span>
              </a>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .services-head {
          display: grid;
          grid-template-columns: auto 1fr 1fr;
          align-items: end;
          padding-bottom: 80px;
          gap: 48px;
          border-bottom: 1px solid var(--line-soft);
        }
        .services-title {
          font-size: clamp(48px, 8vw, 130px);
          font-weight: 300;
          line-height: 0.95;
          letter-spacing: -0.03em;
          color: var(--slate-ink);
        }
        .services-title .italic-serif { color: var(--slate); }
        .services-desc {
          font-size: 16px;
          line-height: 1.5;
          color: var(--muted);
          max-width: 32ch;
          justify-self: end;
        }
        @media (max-width: 1100px) {
          .services-head { grid-template-columns: 1fr; }
          .services-desc { justify-self: start; max-width: 48ch; }
        }

        .services-stage {
          display: grid;
          grid-template-columns: 360px 1fr;
          gap: clamp(40px, 6vw, 96px);
          align-items: start;
          padding-top: 64px;
        }
        @media (max-width: 1100px) {
          .services-stage { grid-template-columns: 1fr; }
        }

        .services-tabs {
          display: flex;
          flex-direction: column;
          border-top: 1px solid var(--line);
        }
        .s-tab {
          display: grid;
          grid-template-columns: 36px 1fr 24px;
          align-items: baseline;
          gap: 18px;
          padding: 22px 0;
          border-bottom: 1px solid var(--line);
          background: transparent;
          border-left: none;
          border-right: none;
          border-top: none;
          text-align: left;
          cursor: pointer;
          color: var(--slate);
          transition: color 0.5s var(--ease-out), padding 0.5s var(--ease-out);
          font-family: var(--display);
        }
        .s-tab:hover, .s-tab.active { color: var(--slate-ink); padding-left: 12px; }
        .s-tab-num {
          font-size: 10px;
          color: var(--muted);
        }
        .s-tab.active .s-tab-num { color: var(--slate-ink); }
        .s-tab-name {
          font-size: 22px;
          line-height: 1.15;
          font-weight: 300;
          letter-spacing: -0.01em;
        }
        .s-tab-name .italic-serif { color: var(--slate); }
        .s-tab.active .s-tab-name .italic-serif { color: var(--slate-ink); }
        .s-tab-arrow {
          font-size: 18px;
          color: var(--muted);
          opacity: 0;
          transform: translateX(-6px);
          transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), color 0.5s var(--ease-out);
        }
        .s-tab.active .s-tab-arrow {
          opacity: 1;
          transform: translateX(0);
          color: var(--slate-ink);
        }

        .services-detail {
          display: grid;
          grid-template-columns: 360px 1fr;
          gap: clamp(40px, 5vw, 80px);
          align-items: start;
        }
        @media (max-width: 1100px) {
          .services-detail { grid-template-columns: 1fr; }
          .detail-image { max-width: 320px; }
        }

        .detail-image { position: relative; }
        .detail-image-cap {
          display: flex;
          flex-direction: column;
          gap: 4px;
          margin-top: 14px;
          color: var(--muted);
          font-size: 12px;
        }
        .detail-image-cap .mono { font-size: 10px; }

        .detail-title {
          font-size: clamp(40px, 5.5vw, 84px);
          line-height: 0.95;
          color: var(--slate-ink);
          margin-bottom: 24px;
          font-weight: 300;
          letter-spacing: -0.025em;
        }
        .detail-title .italic-serif { color: var(--slate); font-weight: 300; }

        .detail-summary {
          font-size: clamp(18px, 1.6vw, 24px);
          line-height: 1.4;
          color: var(--slate);
          margin-bottom: 28px;
          padding-bottom: 28px;
          border-bottom: 1px solid var(--line-soft);
          max-width: 56ch;
          font-weight: 300;
        }

        .detail-body {
          font-size: 15px;
          line-height: 1.75;
          color: var(--slate);
          max-width: 60ch;
          margin-bottom: 40px;
          font-weight: 300;
        }

        .detail-points {
          list-style: none;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 0;
          margin-bottom: 48px;
          border-top: 1px solid var(--line-soft);
        }
        @media (max-width: 600px) {
          .detail-points { grid-template-columns: 1fr; }
        }
        .detail-points li {
          display: flex;
          gap: 14px;
          font-size: 14px;
          color: var(--slate);
          align-items: baseline;
          padding: 16px 0;
          border-bottom: 1px solid var(--line-soft);
        }
        .point-num { color: var(--muted); flex-shrink: 0; font-size: 10px; }

        .detail-meta {
          display: flex;
          gap: 64px;
          align-items: flex-start;
          padding: 24px 0;
          border-top: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
          margin-bottom: 40px;
          flex-wrap: wrap;
        }
        .meta-item { display: flex; flex-direction: column; gap: 6px; }
        .meta-label { font-size: 10px; color: var(--muted); }
        .meta-val { font-size: 18px; color: var(--slate-ink); font-family: var(--display); font-weight: 300; }

        .detail-cta { animation: detail-fade 0.6s var(--ease-out); }
        @keyframes detail-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
      `}</style>
    </section>
  );
}

window.Services = Services;