// Service & garantie
const PageService = ({ setPage }) => {
  const langCtx = React.useContext(window.LangContext || React.createContext({ lang:"nl", t: (nl)=>nl }));
  const t = langCtx.t || ((nl) => nl);
  return (
  <div className="page">
    <section style={{padding:"56px 0 40px", background:"var(--paper)", borderBottom:"1px solid var(--line)"}}>
      <div className="wrap-narrow">
        <div className="eyebrow" style={{marginBottom:14}}>{t("Service & garantie","Service & warranty")}</div>
        <h1 className="h-display" style={{fontSize:"clamp(36px,5.5vw,64px)", marginBottom:18}}>
          {t("Gekocht is","Purchased is")} <span className="accent">{t("niet alleen.","not alone.")}</span>
        </h1>
        <p style={{color:"var(--ink-dim)", fontSize:17, lineHeight:1.6, maxWidth:680}}>
          {t(
            "Een e-bike gaat lang mee, maar er kan altijd iets stuk — een lekke band of een knipperend display. Hieronder lees je hoe garantie en service bij ons werken.",
            "An e-bike lasts a long time, but something can always break — a flat tyre or a flashing display. Below you'll read how warranty and service work with us."
          )}
        </p>
      </div>
    </section>

    {/* Top stats */}
    <section style={{padding:"40px 0"}}>
      <div className="wrap-narrow" style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap:16}} className="four-col">
        {[
          {n:t("Garantie","Warranty"), l:t("Fabrieksgarantie","Factory warranty")},
          {n:"Utrecht",                l:t("Ophalen in de showroom","Pickup at the showroom")},
          {n:"Mollie",                 l:t("Veilig betalen","Secure payment")},
          {n:t("Eerlijk","Honest"),    l:t("Advies zonder druk","Advice without pressure")},
        ].map(s => (
          <div key={s.n} className="card" style={{padding:24, textAlign:"center"}}>
            <div className="h-display accent" style={{fontSize:34}}>{s.n}</div>
            <div className="mono" style={{fontSize:11, color:"var(--ink-mute)", letterSpacing:".1em", textTransform:"uppercase", marginTop:6}}>{s.l}</div>
          </div>
        ))}
      </div>
      <style>{`@media (max-width:780px){.four-col{grid-template-columns:1fr 1fr !important}}`}</style>
    </section>

    {/* Garantie tabel */}
    <section style={{padding:"40px 0"}}>
      <div className="wrap-narrow">
        <SecHead eyebrow={t("Garantie","Warranty")} title={t("Fabrieksgarantie op je e-bike.","Factory warranty on your e-bike.")}/>
        <div className="card" style={{padding:28}}>
          <p style={{color:"var(--ink-dim)", fontSize:15, lineHeight:1.7, marginBottom:14}}>
            {t(
              "Je Zyro e-bike heeft fabrieksgarantie op de belangrijkste onderdelen, zoals frame, motor, accu en elektronica. Normale slijtage (zoals banden en remblokken) en schade door ongeval, modificatie of opvoeren vallen daar niet onder.",
              "Your Zyro e-bike comes with a factory warranty on the main parts, such as the frame, motor, battery and electronics. Normal wear (like tyres and brake pads) and damage from accidents, modification or tuning are not covered."
            )}
          </p>
          <p style={{color:"var(--ink-dim)", fontSize:15, lineHeight:1.7}}>
            {t(
              "Een probleem binnen de garantieperiode? Neem contact op via WhatsApp of het contactformulier met een korte omschrijving (een foto of video helpt). Dan kijken we er samen naar.",
              "A problem within the warranty period? Contact us via WhatsApp or the contact form with a short description (a photo or video helps). We'll look into it together."
            )}
          </p>
        </div>
      </div>
    </section>

    {/* Service flow */}
    <section style={{padding:"40px 0"}}>
      <div className="wrap-narrow">
        <SecHead eyebrow={t("Service in 3 stappen","Service in 3 steps")} title={t("Snel, simpel, in NL.","Fast, simple, in NL.")}/>
        <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:16}} className="three-col">
          {[
            {n:"01", i:"chat",  ti:t("Meld je probleem","Report your issue"),     b:t("Stuur ons een bericht via WhatsApp of het contactformulier. Een foto of video erbij helpt ons verder.","Send us a message via WhatsApp or the contact form. A photo or video helps us understand it.")},
            {n:"02", i:"check", ti:t("We kijken mee","We take a look"),            b:t("We bekijken samen wat er aan de hand is en welke mogelijkheden er zijn — eerlijk en zonder verrassingen.","We look at what's going on together and what the options are — honestly and without surprises.")},
            {n:"03", i:"tools", ti:t("Oplossen op afspraak","Fix it by appointment"), b:t("Onder garantie regelen we het. Daarbuiten maken we een afspraak en geven we vooraf een prijsopgave.","Under warranty we sort it out. Otherwise we make an appointment and give you a quote up front.")},
          ].map(s => (
            <div key={s.n} className="card" style={{padding:24, textAlign:"center"}}>
              <div style={{width:50, height:50, borderRadius:50, background:"var(--paper)", color:"var(--accent)", display:"grid", placeItems:"center", margin:"0 auto 14px", border:"1.5px solid var(--accent)"}}>
                <Icon name={s.i} size={20}/>
              </div>
              <div className="mono" style={{fontSize:11, color:"var(--accent)", letterSpacing:".18em", marginBottom:8}}>{s.n}</div>
              <h4 className="h-display" style={{fontSize:18, marginBottom:8, textTransform:"uppercase"}}>{s.ti}</h4>
              <p style={{color:"var(--ink-dim)", fontSize:13.5}}>{s.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Maintenance pricing */}
    <section style={{padding:"40px 0"}}>
      <div className="wrap-narrow">
        <SecHead eyebrow={t("Onderhoud & reparatie","Maintenance & repair")} title={t("Buiten de garantie","Outside warranty")} sub={t("Heb je onderhoud of een reparatie nodig die niet onder garantie valt?","Need maintenance or a repair that isn't covered by warranty?")}/>
        <div className="card" style={{padding:28}}>
          <p style={{color:"var(--ink-dim)", fontSize:15, lineHeight:1.7}}>
            {t(
              "Neem contact op via WhatsApp of het contactformulier met een korte omschrijving van wat er nodig is. We geven je vooraf een eerlijke prijsopgave, zodat je niet voor verrassingen komt te staan. Is een reparatie niet rendabel? Dan zeggen we dat ook.",
              "Contact us via WhatsApp or the contact form with a short description of what you need. We'll give you an honest quote up front, so there are no surprises. If a repair isn't worth it, we'll tell you."
            )}
          </p>
        </div>
      </div>
    </section>

    {/* Retour & Levering info */}
    <section style={{padding:"40px 0"}}>
      <div className="wrap-narrow" style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:16}} className="two-col">
        <div className="card" style={{padding:28}}>
          <div className="gap-12" style={{marginBottom:14}}>
            <div style={{width:36, height:36, borderRadius:8, background:"var(--accent-soft)", color:"var(--accent)", display:"grid", placeItems:"center"}}>
              <Icon name="truck" size={18}/>
            </div>
            <h3 className="h-display" style={{fontSize:20}}>{t("Levering","Delivery")}</h3>
          </div>
          <ul style={{listStyle:"none", display:"flex", flexDirection:"column", gap:8, color:"var(--ink-dim)", fontSize:14}}>
            <li>{t("Gratis ophalen in onze showroom in Utrecht","Free pickup at our Utrecht showroom")}</li>
            <li>{t("Bezorgen waar beschikbaar — de bezorgkosten zie je in de checkout","Delivery where available — shipping costs are shown at checkout")}</li>
            <li>{t("Na je bestelling nemen we contact op over de levering","After your order we'll contact you about delivery")}</li>
            <li>{t("Geleverd in transportverpakking — montage optioneel (+€50)","Delivered in transport packaging — assembly optional (+€50)")}</li>
          </ul>
        </div>
        <div className="card" style={{padding:28}}>
          <div className="gap-12" style={{marginBottom:14}}>
            <div style={{width:36, height:36, borderRadius:8, background:"var(--accent-soft)", color:"var(--accent)", display:"grid", placeItems:"center"}}>
              <Icon name="arrowLeft" size={18}/>
            </div>
            <h3 className="h-display" style={{fontSize:20}}>{t("Retourneren","Returns")}</h3>
          </div>
          <ul style={{listStyle:"none", display:"flex", flexDirection:"column", gap:8, color:"var(--ink-dim)", fontSize:14}}>
            <li>{t("Wettelijk herroepingsrecht: 14 dagen bedenktijd","Legal right of withdrawal: 14-day cooling-off period")}</li>
            <li>{t("Product ongebruikt en in originele staat","Product unused and in original condition")}</li>
            <li>{t("Meld je retour via e-mail of WhatsApp","Report your return via email or WhatsApp")}</li>
            <li>{t("Terugbetaling na ontvangst en controle","Refund after we receive and check the item")}</li>
          </ul>
        </div>
        <style>{`@media (max-width:780px){.two-col{grid-template-columns:1fr !important}}`}</style>
      </div>
    </section>

    {/* Service FAQ */}
    <section style={{padding:"40px 0 96px"}}>
      <div className="wrap-narrow">
        <SecHead eyebrow={t("Service vragen","Service questions")} title={t("Veelgesteld.","Common questions.")}/>
        <div style={{display:"flex", flexDirection:"column", gap:10}}>
          <FAQItem
            q={t("Ik woon niet in Utrecht. Kan ik toch geholpen worden?","I don't live in Utrecht. Can you still help me?")}
            a={t("Ja. Neem contact op via WhatsApp of het formulier, dan bespreken we samen de beste oplossing — bijvoorbeeld een afspraak in Utrecht of opsturen. We zijn een nieuw bedrijf en bouwen onze service stap voor stap uit.","Yes. Contact us via WhatsApp or the form and we'll discuss the best solution together — for example an appointment in Utrecht or shipping. We're a new company and are building out our service step by step.")}
          />
          <FAQItem
            q={t("Mijn accu houdt minder lang vol dan vroeger. Valt dat onder garantie?","My battery doesn't last as long as before. Is that covered?")}
            a={t("Mogelijk. Binnen de garantieperiode valt de accu onder de fabrieksgarantie bij een aantoonbaar defect (normale slijtage uitgezonderd). Neem contact op, dan kijken we er samen naar.","Possibly. Within the warranty period the battery is covered by the factory warranty for a demonstrable defect (normal wear excluded). Contact us and we'll look into it together.")}
          />
          <FAQItem
            q={t("Kan ik onderdelen los bestellen?","Can I order parts separately?")}
            a={t("Stuur ons een berichtje met welk onderdeel je zoekt, dan kijken we wat mogelijk is. We houden dit bewust persoonlijk — er is hiervoor geen aparte webshop.","Send us a message with the part you're looking for and we'll see what's possible. We keep this personal on purpose — there's no separate webshop for it.")}
          />
          <FAQItem
            q={t("Wat als mijn Zyro buiten garantie kapot is?","What if my Zyro breaks outside warranty?")}
            a={t("Neem contact op met een korte omschrijving. We geven je vooraf een eerlijke prijsopgave. Is een reparatie niet rendabel, dan zeggen we dat ook.","Contact us with a short description. We'll give you an honest quote up front. If a repair isn't worth it, we'll say so.")}
          />
        </div>
      </div>
    </section>
  </div>
  );
};
window.PageService = PageService;