// Hizmetler — services section with 3 layout variants (tweakable)
const { useState: useStateSv } = React;

const SERVICES = [
  { id: "cilt",   name: "Cilt Bakımı",       desc: "HydraFacial, kimyasal peeling, mikroiğneleme — cildin doğal ışığını geri kazandıran klinik protokoller.", duration: "60–90 dk", from: "₺2.400", glyph: "01" },
  { id: "kalici", name: "Kalıcı Makyaj",     desc: "Pudra etkisi, ipek kaş, doğal dudak — kişiye özel çizim, doğal renk teknolojisi ile.", duration: "120 dk", from: "₺6.500", glyph: "02" },
  { id: "kas",    name: "Kaş & Kirpik",      desc: "İpek lifting, hibrit lash, brow lamination. Sade ifadenin güçlü detayı.", duration: "45–75 dk", from: "₺1.200", glyph: "03" },
  { id: "tirnak", name: "Protez Tırnak",     desc: "Russian manicure, jel uygulamaları, klinik ofis düzeyinde hijyen.", duration: "90 dk",   from: "₺900",   glyph: "04" },
  { id: "medikal",name: "Medikal Bakım",     desc: "Akne, leke ve genç görünüm protokolleri — dermatolog danışmanlığı eşliğinde.", duration: "75 dk",   from: "₺3.200", glyph: "05" },
  { id: "lazer",  name: "Lazer Epilasyon",   desc: "Yeni nesil diod lazer ile tüm cilt tipleri için güvenli, kalıcı çözüm.", duration: "30–60 dk", from: "₺850",   glyph: "06" },
  { id: "makeup", name: "Makeup Studio",     desc: "Davet, gelin ve editorial makyaj — atelye stüdyosunda profesyonel ışık altında.", duration: "60 dk",   from: "₺2.800", glyph: "07" },
];

function ServiceIcon({ kind }) {
  const c = "#1a1410";
  const map = {
    cilt: <g stroke={c} strokeWidth="0.8" fill="none"><circle cx="20" cy="20" r="12"/><path d="M14 20a6 6 0 0112 0"/><circle cx="20" cy="20" r="2" fill={c}/></g>,
    kalici: <g stroke={c} strokeWidth="0.8" fill="none"><path d="M8 28c4-10 12-16 24-16"/><path d="M28 12l4-4M28 12l-2 6"/></g>,
    kas:    <g stroke={c} strokeWidth="0.8" fill="none"><path d="M8 18c6-4 18-4 24 0"/><path d="M10 24c4-2 16-2 20 0"/></g>,
    tirnak: <g stroke={c} strokeWidth="0.8" fill="none"><rect x="12" y="8"  width="16" height="22" rx="8"/><path d="M14 22h12"/></g>,
    medikal:<g stroke={c} strokeWidth="0.8" fill="none"><path d="M20 6v28M6 20h28"/><circle cx="20" cy="20" r="10"/></g>,
    lazer:  <g stroke={c} strokeWidth="0.8" fill="none"><path d="M20 6v8M20 26v8M6 20h8M26 20h8M10 10l5 5M30 30l-5-5M10 30l5-5M30 10l-5 5"/></g>,
    makeup: <g stroke={c} strokeWidth="0.8" fill="none"><path d="M14 8l12 4-2 22h-8l-2-22z"/><path d="M16 14h8"/></g>,
  };
  return <svg viewBox="0 0 40 40" width="40" height="40">{map[kind] || map.cilt}</svg>;
}

function ServiceCardEditorial({ s }) {
  return (
    <a href={`#randevu-${s.id}`} className="svc-card svc-edit" data-cursor="hover">
      <div className="svc-img"><Visual.Portrait tone={["champ","blush","ivory","champ","ink","champ","blush"][s.id.charCodeAt(0) % 7]} label={`SERVICE · ${s.glyph}`} /></div>
      <div className="svc-body">
        <div className="svc-top">
          <span className="svc-num">{s.glyph}</span>
          <ServiceIcon kind={s.id} />
        </div>
        <h3 className="svc-title">{s.name}</h3>
        <p className="svc-desc">{s.desc}</p>
        <div className="svc-meta">
          <span>{s.duration}</span><span>·</span><span>başlangıç {s.from}</span>
        </div>
        <div className="svc-cta">
          <span>Randevu Al</span>
          <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
        </div>
      </div>
    </a>
  );
}

function ServiceCardMinimal({ s }) {
  return (
    <a href={`#randevu-${s.id}`} className="svc-row" data-cursor="hover">
      <span className="svc-num">{s.glyph}</span>
      <h3>{s.name}</h3>
      <p>{s.desc}</p>
      <span className="svc-from">{s.from}</span>
      <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4" className="svc-arrow"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
    </a>
  );
}

function ServiceCardStacked({ s, i }) {
  return (
    <a href={`#randevu-${s.id}`} className="svc-stack" data-cursor="hover">
      <div className="svc-stack-img"><Visual.Stilllife /></div>
      <div className="svc-stack-body">
        <div className="svc-num">{s.glyph}</div>
        <h3>{s.name}</h3>
        <div className="svc-stack-meta">{s.duration} · {s.from}</div>
        <p>{s.desc}</p>
      </div>
    </a>
  );
}

function HizmetlerSection({ layout = "editorial" }) {
  return (
    <div className="hiz section-pad">
      <style>{`
        .hiz { background: var(--bg); }
        .hiz-head {
          display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end;
          margin-bottom: 80px;
        }
        @media (max-width: 880px) { .hiz-head { grid-template-columns: 1fr; gap: 30px; } }
        .hiz-h {
          font-family: var(--serif); font-weight: 300;
          font-size: clamp(48px, 7vw, 110px);
          line-height: 0.95; letter-spacing: -0.02em;
          margin: 12px 0 0;
        }
        .hiz-h em { font-style: italic; color: #5a4530; }
        .hiz-lead { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 44ch; }

        /* Editorial grid */
        .hiz-grid {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
        }
        @media (max-width: 1100px) { .hiz-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 640px)  { .hiz-grid { grid-template-columns: 1fr; } }

        .svc-card {
          position: relative;
          display: block;
          color: inherit; text-decoration: none;
          background: var(--paper);
          border: 1px solid var(--line-soft);
          border-radius: 4px;
          overflow: hidden;
          transition: transform 600ms cubic-bezier(.2,.8,.2,1), box-shadow 600ms ease, border-color 400ms ease;
        }
        .svc-card:hover {
          transform: translateY(-6px);
          box-shadow: 0 40px 80px -50px rgba(26,20,16,0.4), 0 0 0 1px rgba(201,169,97,0.3);
          border-color: transparent;
        }
        .svc-img { aspect-ratio: 4/3; overflow: hidden; }
        .svc-img > div { transition: transform 1600ms cubic-bezier(.2,.8,.2,1); }
        .svc-card:hover .svc-img > div { transform: scale(1.06); }
        .svc-body { padding: 28px 24px 26px; position: relative; }
        .svc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .svc-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; color: var(--muted); }
        .svc-title {
          font-family: var(--serif); font-weight: 400;
          font-size: 28px; line-height: 1; margin: 0 0 14px;
          letter-spacing: -0.01em;
        }
        .svc-desc {
          font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 16px;
        }
        .svc-meta {
          display: flex; gap: 8px;
          font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
          text-transform: uppercase; color: var(--muted);
          padding-top: 16px; border-top: 1px solid var(--line);
          margin-bottom: 14px;
        }
        .svc-cta {
          display: flex; align-items: center; gap: 8px;
          font-size: 12px; letter-spacing: 0.04em;
          color: var(--ink); font-weight: 500;
        }
        .svc-cta svg { width: 14px; transition: transform 360ms cubic-bezier(.2,.8,.2,1); }
        .svc-card:hover .svc-cta svg { transform: translateX(4px); }

        /* Minimal list layout */
        .hiz-list { border-top: 1px solid var(--line); }
        .svc-row {
          display: grid;
          grid-template-columns: 60px 1.6fr 2fr 100px 24px;
          gap: 24px; align-items: center;
          padding: 32px 12px;
          border-bottom: 1px solid var(--line);
          color: inherit; text-decoration: none;
          transition: background 400ms ease, padding 400ms ease, color 400ms ease;
          position: relative;
          overflow: hidden;
        }
        .svc-row::before {
          content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
          background: linear-gradient(90deg, rgba(201,169,97,0.12), transparent 60%);
          transition: width 600ms cubic-bezier(.2,.8,.2,1);
        }
        .svc-row:hover { padding-left: 24px; padding-right: 0; }
        .svc-row:hover::before { width: 100%; }
        .svc-row .svc-num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; color: var(--muted); }
        .svc-row h3 {
          font-family: var(--serif); font-weight: 400;
          font-size: clamp(24px, 2.4vw, 36px); margin: 0;
          letter-spacing: -0.01em;
        }
        .svc-row p { color: var(--muted); font-size: 13.5px; margin: 0; line-height: 1.5; }
        .svc-from { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); text-align: right; letter-spacing: 0.06em; }
        .svc-arrow { width: 18px; transition: transform 480ms cubic-bezier(.2,.8,.2,1); }
        .svc-row:hover .svc-arrow { transform: translateX(8px); }
        @media (max-width: 880px) {
          .svc-row { grid-template-columns: 40px 1fr 24px; gap: 14px; padding: 22px 10px; }
          .svc-row p, .svc-row .svc-from { display: none; }
        }

        /* Stacked / overlap */
        .hiz-stack {
          display: grid; grid-template-columns: repeat(7, 1fr);
          gap: 14px;
        }
        @media (max-width: 1100px) { .hiz-stack { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 640px)  { .hiz-stack { grid-template-columns: 1fr; } }
        .svc-stack {
          color: inherit; text-decoration: none;
          display: grid; grid-template-rows: 1fr auto;
          background: var(--paper);
          overflow: hidden;
          border-radius: 2px;
          transition: transform 500ms cubic-bezier(.2,.8,.2,1);
        }
        .svc-stack:hover { transform: translateY(-4px); }
        .svc-stack-img { aspect-ratio: 3/4; overflow: hidden; }
        .svc-stack-img > div { transition: transform 1400ms cubic-bezier(.2,.8,.2,1); }
        .svc-stack:hover .svc-stack-img > div { transform: scale(1.06); }
        .svc-stack-body { padding: 16px 14px 18px; }
        .svc-stack-body .svc-num { font-family: var(--mono); font-size: 9px; letter-spacing: 0.24em; color: var(--muted); }
        .svc-stack-body h3 {
          font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.1;
          margin: 6px 0 6px;
        }
        .svc-stack-meta { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; }
        .svc-stack p { display: none; }
      `}</style>

      <div className="container">
        <div className="hiz-head">
          <div className="reveal">
            <div className="eyebrow">— Hizmetlerimiz</div>
            <h2 className="hiz-h">
              Sade ve <em>özenli</em><br/>
              bir hizmet menüsü
            </h2>
          </div>
          <div className="reveal reveal-d1">
            <p className="hiz-lead">
              Yedi temel başlık altında, kişiye özel olarak şekillenen bir bakım menüsü.
              Her hizmet, klinik standartlarda hijyen ve uzman gözetiminde uygulanır.
            </p>
            <div className="ornate" style={{marginTop: 20, maxWidth: 360}}>
              <i /><span>Atelye · Yıldırım</span><i />
            </div>
          </div>
        </div>

        {layout === "editorial" && (
          <div className="hiz-grid">
            {SERVICES.map((s, i) => (
              <div key={s.id} className={`reveal reveal-d${(i % 4) + 1}`}>
                <ServiceCardEditorial s={s} />
              </div>
            ))}
          </div>
        )}
        {layout === "list" && (
          <div className="hiz-list">
            {SERVICES.map((s, i) => (
              <div key={s.id} className={`reveal reveal-d${(i % 3) + 1}`}>
                <ServiceCardMinimal s={s} />
              </div>
            ))}
          </div>
        )}
        {layout === "stacked" && (
          <div className="hiz-stack">
            {SERVICES.map((s, i) => (
              <div key={s.id} className={`reveal reveal-d${(i % 4) + 1}`}>
                <ServiceCardStacked s={s} i={i} />
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

window.HizmetlerSection = HizmetlerSection;
window.SERVICES = SERVICES;