/* =========== Werkwijze — clean editorial timeline =========== */
function Werkwijze(){
  const t = useT();
  useDocumentMeta({
    title: t('Werkwijze · van eerste gesprek tot oplevering','Process · from first conversation to delivery'),
    description: t('Onze stappen voor uw trouwdag: kennismaking, boeking, opvolggesprek, de dag zelf en aflevering. Snelle preview binnen 1 tot 3 dagen, volledige aflevering binnen maximaal 2 maanden, alle reiskosten in België inbegrepen.','Our steps for your wedding day: introduction, booking, follow-up meeting, the day itself and delivery. Quick preview within 1 to 3 days, full delivery within a maximum of 2 months, all travel costs within Belgium included.'),
    image: '/assets/werkwijze-hero.jpg',
  });
  return (
    <Page label="Werkwijze">
      <Nav current="/werkwijze" solid/>

      {/* HERO */}
      <section style={{paddingTop:160, paddingBottom:60}}>
        <div className="wrap">
          <div className="reveal" style={{maxWidth:960}}>
            <div className="h-number">{t('WERKWIJZE','PROCESS')}</div>
            <h1 className="h-display" style={{fontSize:'clamp(48px,7vw,104px)', marginTop:32, lineHeight:.95}}>
              {t(<>Van eerste <span className="italic-serif">gesprek</span><br/>tot tastbaar <span className="italic-serif">aandenken</span>.</>,
                 <>From first <span className="italic-serif">conversation</span><br/>to a tangible <span className="italic-serif">keepsake</span>.</>)}
            </h1>
            <p style={{fontSize:17, lineHeight:1.7, color:'var(--ink-80)', maxWidth:920, marginTop:40}}>
              {t('We geloven in structuur en transparantie. Zo weet u precies wat te verwachten, van de eerste kennismaking tot na de oplevering, en voelt u zich volledig zorgeloos richting uw dag.','We believe in structure and transparency. That way you know exactly what to expect, from the first introduction to after delivery, and you can feel completely at ease as your day approaches.')}
            </p>
          </div>
        </div>
      </section>

      {/* Hero beeld */}
      <section>
        <div className="wrap-wide">
          <Img src="/assets/werkwijze-hero.jpg" alt={t('Trouwlocatie vastgelegd door Wedding Visions tijdens een huwelijk in België','Wedding venue captured by Wedding Visions during a wedding in Belgium')} ar="21/9" className="reveal wrk-hero-img"/>
        </div>
      </section>

      {/* TIMELINE */}
      <section style={{padding:'140px 0 40px'}}>
        <div className="wrap" style={{maxWidth:1120}}>
          <div className="vtl">
            <div className="vtl__line" aria-hidden="true"/>
            {SITE.werkwijze.map((s, i)=>{
              const icons = ['chat','rings','doc','calendar','camera','film'];
              return (
                <div key={i} className={'vtl__step reveal '+(i%2===0?'left':'right')}>
                  <div className="vtl__card">
                    <div className="wrk-step__time">{tphrase(s.time)}</div>
                    <h2 className="h-display wrk-step__title">{tphrase(s.title)}</h2>
                    <p className="wrk-step__desc">{tphrase(s.desc)}</p>
                    <ul className="wrk-step__list">
                      {s.bullets.map((b,j)=>(
                        <li key={j}><span className="dash"/><span>{tphrase(b)}</span></li>
                      ))}
                    </ul>
                    {s.cta && (
                      <div style={{marginTop:24}}>
                        <Link to={s.cta.to} className="btn btn-primary" data-cursor="hover">
                          {tphrase(s.cta.label)} <span className="arrow"></span>
                        </Link>
                      </div>
                    )}
                  </div>
                  <div className="vtl__node"><ProcessIcon name={icons[i % icons.length]}/></div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* EXTRA INFO */}
      <section style={{background:'var(--paper)', padding:'120px 0'}}>
        <div className="wrap">
          <div className="reveal" style={{marginBottom:60}}>
            <div className="h-number">{t('BELANGRIJK OM TE WETEN','GOOD TO KNOW')}</div>
            <h2 className="h-display" style={{fontSize:'clamp(32px,4vw,56px)', marginTop:16, lineHeight:.95}}>
              {t(<>Afspraken &<br/><span className="italic-serif">garanties</span>.</>,
                 <>Agreements &<br/><span className="italic-serif">guarantees</span>.</>)}
            </h2>
          </div>
          <div className="info-grid">
            {SITE.werkwijzeExtra.map((x,i)=>(
              <div key={i} className="reveal" style={{paddingTop:24, borderTop:'1px solid var(--ink)'}}>
                <h3 className="h-display" style={{fontSize:28, marginBottom:16, lineHeight:1.1}}>{tphrase(x.t)}</h3>
                <p style={{fontSize:14, lineHeight:1.75, color:'var(--ink-80)'}}>{tphrase(x.b)}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{background:'var(--cocoa)', color:'var(--ivory)', padding:'120px 0'}}>
        <div className="wrap" style={{textAlign:'center'}}>
          <div className="reveal">
            <div className="h-number" style={{color:'rgba(255,255,255,.5)'}}>{t('KLAAR OM TE BEGINNEN?','READY TO BEGIN?')}</div>
            <h2 className="h-display" style={{fontSize:'clamp(40px,5.5vw,76px)', marginTop:24, lineHeight:1}}>
              {t(<>Alles begint<br/>met een <span className="italic-serif">gesprek</span>.</>,
                 <>It all begins<br/>with a <span className="italic-serif">conversation</span>.</>)}
            </h2>
            <div style={{marginTop:48}}>
              <Link to="/contact" className="btn btn-ghost-light" data-cursor="hover">
                {t('Plan vrijblijvend gesprek','Book a no-obligation call')} <span className="arrow"></span>
              </Link>
            </div>
          </div>
        </div>
      </section>

      <Footer/>

      <style>{`
        .wrk-hero-img img{object-position:center 65%}

        /* Verticale tijdlijn: centrale lijn, kaarten afwisselend links/rechts, node met icoon */
        .vtl{position:relative; max-width:1040px; margin:0 auto}
        .vtl__line{
          position:absolute; left:50%; top:10px; bottom:10px;
          width:1px; background:var(--rule); transform:translateX(-50%);
        }
        .vtl__step{
          position:relative;
          display:grid; grid-template-columns:1fr 1fr; column-gap:92px;
          padding-bottom:64px;
        }
        .vtl__step:last-child{padding-bottom:0}
        .vtl__card{
          background:var(--paper); border:1px solid var(--rule);
          padding:32px 34px;
        }
        .vtl__step.left .vtl__card{grid-column:1}
        .vtl__step.right .vtl__card{grid-column:2}
        .vtl__node{
          position:absolute; left:50%; top:8px; transform:translateX(-50%);
          width:58px; height:58px; border-radius:999px;
          background:var(--accent); color:#fff;
          display:flex; align-items:center; justify-content:center;
          box-shadow:0 0 0 8px var(--ivory); z-index:2;
        }
        .wrk-step__time{
          display:inline-block;
          font-size:10px; letter-spacing:.28em; text-transform:uppercase;
          color:var(--gold);
          border:1px solid var(--rule);
          padding:6px 12px; border-radius:999px;
          margin-bottom:18px;
        }
        .wrk-step__title{
          font-size:clamp(26px,3vw,40px);
          line-height:1.05;
          margin-bottom:18px;
        }
        .wrk-step__desc{
          font-size:15px;
          line-height:1.75;
          color:var(--ink-80);
          margin-bottom:24px;
        }
        .wrk-step__list{
          list-style:none;
          display:flex; flex-direction:column; gap:10px;
          padding-top:20px; border-top:1px solid var(--rule);
        }
        .wrk-step__list li{
          display:flex; gap:14px;
          font-size:14px; color:var(--ink-80);
        }
        .wrk-step__list .dash{
          width:16px; height:1px; background:var(--gold);
          margin-top:9px; flex-shrink:0;
        }
        .info-grid{
          display:grid;
          grid-template-columns:repeat(3,1fr);
          gap:40px;
        }
        @media (max-width:1024px){
          .info-grid{grid-template-columns:1fr 1fr; gap:32px}
        }
        @media (max-width:820px){
          .vtl__line{left:28px; transform:none}
          .vtl__step{grid-template-columns:1fr; column-gap:0; padding-left:78px; padding-bottom:40px}
          .vtl__step.left .vtl__card, .vtl__step.right .vtl__card{grid-column:1}
          .vtl__node{left:28px; top:6px; width:50px; height:50px; box-shadow:0 0 0 6px var(--ivory)}
          .vtl__card{padding:26px 22px}
          .info-grid{grid-template-columns:1fr}
        }
        @media (max-width:600px){
          .vtl__step{padding-left:62px; padding-bottom:32px}
          .vtl__line{left:22px}
          .vtl__node{left:22px; width:44px; height:44px; box-shadow:0 0 0 5px var(--ivory)}
          .vtl__card{padding:22px 18px}
          .wrk-step__title{font-size:clamp(22px,7vw,30px)}
          .wrk-step__desc{font-size:14px}
          .vtl__node svg{width:18px; height:18px}
        }
        @media (orientation:landscape) and (max-height:520px){
          .vtl__step{padding-bottom:28px}
        }
      `}</style>
    </Page>
  );
}

Object.assign(window, { Werkwijze });