const SERVICES = [
  {
    num: "01",
    title: "Persoonlijk Stijladvies",
    short: "Kleuren, silhouetten en combinaties — afgestemd op wie jij wil zijn.",
    for: ["Wie toe is aan een nieuwe stijlrichting","Vrouwen in een levensfase-transitie","Professionals die een volgende stap zetten"],
    process: ["Intake & stijlgesprek","Analyse kleur & silhouet","Stijlprofiel op papier","Outfit-richtlijnen voor jouw leven"],
    includes: ["Stijlprofiel","Kleuranalyse","Combinatietips","Nazorg per e-mail"],
    duration: "± 3 uur",
    image: "editorial portret — stylingadvies",
  },
  {
    num: "02",
    title: "Garderobe Check",
    short: "Samen je kast door: wat klopt, wat mag weg, en wat mist er nog.",
    for: ["Overvolle kasten zonder outfit","Wie kleding wil uitzuiveren","Vrouwen die tijd willen besparen in de ochtend"],
    process: ["Inventaris bestaande kleding","Keep, combine, let go","Buildable base & accents","Shopping-lijst voor gaten"],
    includes: ["Kastanalyse","Combinaties in beeld","Shoppinglijst","Tweedehands-richtlijnen"],
    duration: "± 4 uur",
    image: "kast & kleding — garderobe check",
  },
  {
    num: "03",
    title: "Coaching & Groei",
    short: "Stijl als spiegel voor wie je aan het worden bent — innerlijk eerst.",
    for: ["Vrouwen in transitie","Wie weer wil voelen wat eigen is","Na een breuk, nieuwe baan, of nieuwe fase"],
    process: ["Waar sta je nu?","Wat wil je uitstralen?","Wat houdt je tegen?","Vertaling naar stijl & keuzes"],
    includes: ["3 sessies","Reflectie-oefeningen","Persoonlijk stijlkompas","Opvolggesprek"],
    duration: "3 sessies",
    image: "ruimte — reflectie & koffie",
  },
  {
    num: "04",
    title: "1-op-1 Coaching",
    short: "Langer traject voor wie écht wil doorpakken op zelfexpressie.",
    for: ["Wie ruimte wil maken","Vrouwen die klaar zijn om te veranderen","Wie diepgang zoekt, niet alleen tips"],
    process: ["Kennismaking","Verdiepende sessies","Praktische tools","Integratie in dagelijks leven"],
    includes: ["6 sessies","Werkboek","WhatsApp-support","Stijlbegeleiding onderweg"],
    duration: "6 sessies · 3 maanden",
    image: "sessie — 1 op 1",
  },
  {
    num: "05",
    title: "Personal Shopping",
    short: "Samen shoppen in de stad of online — kloppend met jouw stijl en budget.",
    for: ["Wie shoppen overweldigend vindt","Last van miskopen","Geen tijd maar wel zin in iets nieuws"],
    process: ["Voorbereiding & budget","Route of online-selectie","Passen & beslissen","Thuis combineren"],
    includes: ["Shop-route","Pas-sessies","Outfit-combinaties","Retourbegeleiding"],
    duration: "± 4 uur",
    image: "winkelstraat — personal shopping",
  },
];

const Chevron = () => (
  <svg className="chev" viewBox="0 0 20 20" fill="none">
    <path d="M10 4v12M4 10h12" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
  </svg>
);

const ServicesList = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <div className="svc-list">
      {SERVICES.map((s, i) => (
        <div key={s.num} className={`svc-row ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
          <div className="num">№ {s.num}</div>
          <div className="title">{s.title}</div>
          <div className="desc">{s.short}</div>
          <div className="meta">
            <span>{s.duration}</span>
            <span>Prijs op aanvraag</span>
          </div>
          <Chevron />
          <div className="expand">
            <div className="svc-expand-grid">
              <div>
                <div className="k">Voor wie</div>
                <ul>{s.for.map((x,j)=><li key={j}>{x}</li>)}</ul>
              </div>
              <div>
                <div className="k">Het proces</div>
                <ul>{s.process.map((x,j)=><li key={j}>{x}</li>)}</ul>
              </div>
              <div>
                <div className="k">Wat je krijgt</div>
                <ul>{s.includes.map((x,j)=><li key={j}>{x}</li>)}</ul>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

const ServicesGrid = () => (
  <div className="svc-cards">
    {SERVICES.slice(0,6).map(s => (
      <div key={s.num} className="svc-card">
        <div className="head">
          <span className="num">№ {s.num}</span>
          <span className="dur">{s.duration}</span>
        </div>
        <h3>{s.title}</h3>
        <div className="desc">{s.short}</div>
        <div className="incl">Wat je krijgt</div>
        <ul>
          {s.includes.slice(0,4).map((x,i)=><li key={i}>{x}</li>)}
        </ul>
        <a href="#contact" className="link">Plan een gesprek <span>→</span></a>
      </div>
    ))}
  </div>
);

const ServicesScroll = () => (
  <div className="svc-scroll">
    {SERVICES.map(s => (
      <div key={s.num} className="svc-slide">
        <Placeholder label={s.image} id={`svc-${s.num}`} className="media" />
        <div className="body">
          <div className="num">№ {s.num} · {s.duration}</div>
          <h3>{s.title}</h3>
          <div className="desc">{s.short}</div>
          <div className="tags">
            {s.includes.slice(0,3).map((x,i)=><span key={i} className="tag">{x}</span>)}
          </div>
          <a href="#contact" className="link" style={{alignSelf:"flex-start",fontSize:12,letterSpacing:"0.2em",textTransform:"uppercase",borderBottom:"1px solid currentColor",paddingBottom:4,textDecoration:"none"}}>
            Plan een gesprek →
          </a>
        </div>
      </div>
    ))}
  </div>
);

const Services = ({ variant = "list" }) => {
  return (
    <section id="services" className={`services v-${variant}`}>
      <div className="wrap">
        <div className="section-mark">
          <span className="num">№ 03</span>
          <span className="name">Diensten</span>
          <span className="spacer"></span>
          <span className="meta">— Fashion styling &amp; coaching</span>
        </div>
        <div className="services-header" style={{marginTop:40}}>
          <h2>
            Een <em>persoonlijke</em><br/>aanpak, altijd.
          </h2>
          <div className="services-intro">
            Elk traject begint met een gesprek. Ik werk nooit volgens
            een standaard formule — alles wordt afgestemd op wie je bent,
            waar je staat en waar je naartoe wilt.
          </div>
        </div>

        {variant === "list" && <ServicesList />}
        {variant === "grid" && <ServicesGrid />}
        {variant === "scroll" && <ServicesScroll />}
      </div>
    </section>
  );
};

window.Services = Services;