const { Button, Select, Input, IndexTag } = window.MartiniVastgoedDesignSystem_adb8d1;

const MVP_KERN = { Va: '-0.05em', VA: '-0.05em' };
function Letters({ text, base }) {
  return text.split('').map((ch, i) => (
    <span key={i} className="mvp-l" style={{ display: 'inline-block', animationDelay: `${base + i * 45}ms`, marginLeft: (i > 0 && MVP_KERN[text[i - 1] + ch]) || 0 }}>{ch}</span>
  ));
}

/* display staat bewust NIET meer inline. Een inline display wint van elke
   class-regel, dus de media query hieronder die de stickers onder 900 wegzet
   deed al die tijd niets: op 390 stonden ze over het wordmark heen. Nu draagt
   .mvp-hero-sticker de display en kan de query hem overschrijven. */
function Sticker({ children, bg, ink, rotate, style }) {
  return (
    <span className="mvp-sticker mvp-hero-sticker" style={{ textAlign: 'center', background: bg, color: ink, border: '3px solid var(--mv-ink)', boxShadow: '5px 5px 0 var(--mv-ink)', padding: '14px 16px', font: '700 var(--fs-label)/1.3 var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.08em', transform: `rotate(${rotate}deg)`, ...style }}>{children}</span>
  );
}

function Marquee() {
  const items = ['Te huur in Groningen', 'Sinds 1992', 'Appartementen', "Studio's", 'Herenhuizen', 'Kamers', 'Gratis waardebepaling'];
  const innerRef = React.useRef(null);
  React.useEffect(() => {
    const inner = innerRef.current;
    if (!inner) return;
    // motion.js drijft de marquee op de snelheid uit Lenis, zie MOTION-PLAN.md.
    if (window.MV_TAKEOVER) return;
    let target = 0, current = 0, last = window.scrollY, raf = 0;
    const tick = () => {
      raf = 0;
      current += (target - current) * 0.09;
      const track = inner.firstElementChild;
      const w = track ? track.offsetWidth : 1;
      if (w > 0) inner.style.transform = `translate3d(${-(((current % w) + w) % w)}px,0,0)`;
      if (Math.abs(target - current) > 0.2) raf = requestAnimationFrame(tick);
    };
    const onScroll = () => {
      const y = window.scrollY;
      target += (y - last) * 0.28;
      last = y;
      if (!raf) raf = requestAnimationFrame(tick);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, []);
  const Track = ({ ariaHidden }) => (
    <div className="mvp-track" aria-hidden={ariaHidden} style={{ display: 'flex', flexShrink: 0, minWidth: '100%', alignItems: 'center', gap: '2.5rem', padding: '14px 1.25rem' }}>
      {items.map((t, i) => (
        <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: '2.5rem', font: '800 1.35rem/1 var(--font-display)', textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--mv-ink)', whiteSpace: 'nowrap' }}>{t}<span aria-hidden="true">→</span></span>
      ))}
    </div>
  );
  return (
    <div style={{ overflow: 'hidden', background: 'var(--mv-green)', borderTop: '3px solid var(--mv-ink)' }}>
      <div ref={innerRef} data-marquee style={{ display: 'flex', willChange: 'transform' }}>
        <Track /><Track ariaHidden="true" /><Track ariaHidden="true" />
      </div>
    </div>
  );
}

function HeroPlayful({ onSearch }) {
  const towerRef = React.useRef(null);
  const secRef = React.useRef(null);
  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    // motion.js doet de muisparallax met een quickTo, zonder CSS-transitie
    // erbovenop. Zie MOTION-PLAN.md sectie 4, punt 4.
    if (window.MV_TAKEOVER) return;
    const sec = secRef.current;
    const onMove = (e) => {
      const r = sec.getBoundingClientRect();
      const dx = (e.clientX - r.left) / r.width - 0.5, dy = (e.clientY - r.top) / r.height - 0.5;
      if (towerRef.current) towerRef.current.style.transform = `translate(${dx * -16}px, ${dy * -10}px)`;
    };
    sec.addEventListener('mousemove', onMove);
    return () => sec.removeEventListener('mousemove', onMove);
  }, []);
  return (
    <section ref={secRef} id="hero" style={{ position: 'relative', background: 'var(--mv-bone)', borderBottom: '3px solid var(--mv-ink)', overflow: 'hidden' }}>

      <div ref={towerRef} aria-hidden="true" data-tower className="mvp-tower-wrap" style={{ position: 'absolute', right: 'clamp(0.5rem,5vw,6rem)', top: '4%', zIndex: 0, pointerEvents: 'none', transition: 'transform .3s ease-out' }}>
        <img src="assets/tower-tilted.webp" alt="" className="mvp-tower" style={{ display: 'block', height: 'clamp(380px,52vw,660px)', width: 'auto', filter: 'drop-shadow(14px 18px 0 var(--mv-pink))' }} />
      </div>

      <Sticker bg="var(--mv-pink)" ink="var(--mv-ink)" rotate={6} style={{ position: 'absolute', right: 'clamp(1rem,20vw,22rem)', top: '9%', zIndex: 2 }}>Nieuw aanbod<br />wekelijks</Sticker>
      <Sticker bg="var(--mv-tangerine)" ink="var(--mv-ink)" rotate={-5} style={{ position: 'absolute', right: 'clamp(0.5rem,7vw,8rem)', bottom: '22%', zIndex: 2 }}>Groningen<br />van boven</Sticker>
      <div style={{ position: 'relative', zIndex: 1, maxWidth: 'var(--maxw)', margin: '0 auto', padding: 'clamp(3rem,7vw,5.5rem) var(--gutter) clamp(2.5rem,5vw,4rem)' }}>
        <IndexTag label="Groningen · sinds 1992" accent="pink" />
        <h1 style={{ margin: '18px 0 0', font: '900 var(--fs-mega)/0.86 var(--font-display)', letterSpacing: 'var(--ls-mega)', color: 'var(--mv-ink)' }}>
          <span className="mvp-mask" style={{ display: 'block', overflow: 'hidden', paddingBottom: '0.04em' }}><Letters text="Martini" base={80} /></span>
          <span className="mvp-mask" style={{ display: 'block', overflow: 'hidden', paddingBottom: '0.24em', marginBottom: '-0.18em' }}><Letters text="Vastgoed" base={420} /><span className="mvp-l" style={{ display: 'inline-block', color: 'var(--mv-green)', animationDelay: '820ms' }}>.</span></span>
        </h1>
        <p style={{ maxWidth: '30ch', margin: '26px 0 0', font: '500 var(--fs-body-xl)/1.35 var(--font-body)', letterSpacing: '-0.01em', color: 'var(--mv-ink)' }}>
          De makelaar die Groningen van boven kent, en daarom precies weet wat elke woning <span style={{ background: 'var(--mv-green)', padding: '0 0.12em', boxDecorationBreak: 'clone', WebkitBoxDecorationBreak: 'clone' }}>beneden waard is</span>.
        </p>
        <form onSubmit={(e) => { e.preventDefault(); onSearch && onSearch(); }} className="mvp-search" style={{ marginTop: 'clamp(2rem,4vw,3rem)', maxWidth: 840, display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', gap: 14, background: 'var(--mv-ink)', border: '3px solid var(--mv-ink)', boxShadow: '5px 5px 0 var(--mv-ink)', padding: 18, transition: 'transform .18s, box-shadow .18s' }}>
          <PlayfulField label="Wijk"><Select options={['Alle wijken', 'Binnenstad', 'Oosterpoort', 'Helpman', 'Noorderplantsoen']} wrapStyle={{ minWidth: 180 }} /></PlayfulField>
          <PlayfulField label="Type"><Select options={['Alle types', 'Appartement', 'Studio', 'Huis', 'Kamer']} wrapStyle={{ minWidth: 160 }} /></PlayfulField>
          <PlayfulField label="Max. huur"><Input prefix="€" placeholder="1.500" wrapStyle={{ minWidth: 140 }} /></PlayfulField>
          <Button type="submit" variant="primary" size="lg" iconRight={<span aria-hidden="true">→</span>} style={{ flex: 1, minWidth: 150 }}>Zoek woning</Button>
        </form>
      </div>
      <Marquee />
      <style>{`
        .mvp-l{animation:mvpDrop .7s cubic-bezier(.2,.9,.25,1) both;transition:transform .18s,color .18s}
        .mvp-l:hover{transform:translateY(-0.08em) rotate(-4deg);color:var(--mv-pink)}
        @keyframes mvpDrop{from{transform:translateY(110%)}to{transform:translateY(0)}}
        .mvp-tower{animation:mvpSway 8s ease-in-out infinite alternate;transform-origin:50% 95%}
        @keyframes mvpSway{from{transform:rotate(-1.2deg) translateY(0)}to{transform:rotate(1.4deg) translateY(-12px)}}
        .mvp-hero-sticker{display:inline-block}
        .mvp-sticker{animation:mvpPop .5s cubic-bezier(.3,1.6,.5,1) both 1s}
        .mvp-sticker:nth-of-type(2){animation-delay:1.2s}
        @keyframes mvpPop{from{scale:0;rotate:12deg}to{scale:1}}
        .mvp-search:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--mv-pink)}
        @media(prefers-reduced-motion:reduce){.mvp-l,.mvp-tower,.mvp-sticker{animation:none}}
        @media(max-width:900px){.mvp-tower-wrap,.mvp-hero-sticker{display:none}}
      `}</style>
    </section>
  );
}

function PlayfulField({ label, children }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
      <span style={{ font: '700 var(--fs-label-sm)/1 var(--font-mono)', letterSpacing: 'var(--ls-label)', textTransform: 'uppercase', color: 'var(--mv-bone)' }}>{label}</span>
      {children}
    </div>
  );
}
Object.assign(window, { HeroPlayful });