// Clean Pop, part 2: looks, booking, feed, list, footer, app + motion
// Lookbook: real client clips (assets/looks/look-XX.mp4 + .jpg poster).
// Desktop: rail scrolls, a clip plays while hovered.
// Phones (no hover): the rail glides, stops when a card reaches the middle,
// plays that clip once, then keeps going. No tapping needed.
const LOOKS = [['look-01','Burgundy curls'],['look-02','Color pop'],['look-03','Sculpted waves'],['look-04','Blue curls'],['look-05','Pixie cut'],['look-06','Honey curls'],['look-07','Pin curls'],['look-08','Sharp taper'],['look-09','Finger waves']];
const lookMobile = () => window.matchMedia('(hover: none), (max-width: 900px)').matches;

function CPLookVid({ id, hover }) {
  const ref = React.useRef(null);
  const play = () => { const v = ref.current; if (v) v.play().catch(() => {}); };
  const stop = () => { const v = ref.current; if (v) { v.pause(); v.currentTime = 0; } };
  // poster also set as the background so there is never a blank pink flash while the clip loads
  return <video ref={ref} className="cp-lookvid" src={`assets/looks/${id}.mp4`} poster={`assets/looks/${id}.jpg`}
    style={{ backgroundImage: `url(assets/looks/${id}.jpg)` }} muted loop={hover} playsInline preload="none" aria-hidden="true"
    onMouseEnter={hover ? play : undefined} onMouseLeave={hover ? stop : undefined} />;
}

function useLookRail(railRef, enabled) {
  React.useEffect(() => {
    if (!enabled) return;
    const rail = railRef.current, track = rail && rail.querySelector('.track');
    if (!track) return;
    const cards = [...track.children];
    const SPEED = 45;           // px per second while gliding
    let x = 0, last = 0, raf = 0, holding = false, visible = false, timer = 0, lastIdx = -1;
    const period = () => cards[LOOKS.length].offsetLeft - cards[0].offsetLeft;
    const centerOf = c => c.offsetLeft + c.offsetWidth / 2 + x;
    const resume = () => { holding = false; last = performance.now(); };
    let holdId = 0, safety = 0;
    const hold = (i) => {
      holding = true; lastIdx = i;
      const id = ++holdId, c = cards[i], v = c.querySelector('video');
      x += rail.clientWidth / 2 - centerOf(c);           // snap card to dead center
      track.style.transform = `translateX(${x}px)`;
      let fin = false;
      const done = () => {
        if (fin) return; fin = true;
        clearTimeout(safety); v.removeEventListener('ended', done); v.pause();
        timer = setTimeout(() => { if (id === holdId) resume(); }, 450);
      };
      v.currentTime = 0; v.addEventListener('ended', done);
      safety = setTimeout(done, 7000);                   // safety net if a clip stalls
      v.play().catch(() => setTimeout(done, 1500));      // autoplay blocked: still pause briefly on the photo
      // warm up the next clip so it starts instantly
      const n = cards[i + 1] && cards[i + 1].querySelector('video'); if (n) n.preload = 'auto';
    };
    const tick = (t) => {
      raf = requestAnimationFrame(tick);
      if (!visible || holding) { last = t; return; }
      const dt = Math.min(0.05, (t - (last || t)) / 1000); last = t;
      const mid = rail.clientWidth / 2, before = cards.map(centerOf);
      x -= SPEED * dt;
      const p = period(); if (-x >= p) { x += p; lastIdx = -1; }
      track.style.transform = `translateX(${x}px)`;
      for (let i = 0; i < cards.length; i++) {
        const now = centerOf(cards[i]);
        if (before[i] > mid && now <= mid && i !== lastIdx) { hold(i); break; }
      }
    };
    const io = new IntersectionObserver(([e]) => { visible = e.isIntersecting; }, { threshold: 0.4 });
    io.observe(rail);
    rail.classList.add('js');
    raf = requestAnimationFrame(tick);
    return () => { cancelAnimationFrame(raf); clearTimeout(timer); clearTimeout(safety); io.disconnect(); rail.classList.remove('js'); track.style.transform = ''; };
  }, [enabled]);
}

function CPLooks() {
  const row = [...LOOKS, ...LOOKS];
  const railRef = React.useRef(null);
  const [mobile, setMobile] = React.useState(lookMobile);
  React.useEffect(() => {
    const mq = window.matchMedia('(hover: none), (max-width: 900px)');
    const on = () => setMobile(mq.matches);
    mq.addEventListener ? mq.addEventListener('change', on) : mq.addListener(on);
    return () => (mq.removeEventListener ? mq.removeEventListener('change', on) : mq.removeListener(on));
  }, []);
  useLookRail(railRef, mobile);
  return (
    <section className="cp-looks" id="looks" data-screen-label="Looks">
      <div className="cp-sechead">
        <div><div className="cp-eyebrow rv">The lookbook</div><h2 className="cp-h2 rv" style={{ '--d': '.08s' }}>Real dolls, real receipts.</h2></div>
        <a className="cp-btn line rv" href="#feed">All looks <span className="arr r" aria-hidden="true"></span></a>
      </div>
      <p className="cp-hint near"><span className="d">Hover to play</span></p>
      <div className="cp-lookrail" ref={railRef}>
        <div className="track">{row.map(([id, l], i) => (
          <div key={i} className="cp-look"><CPLookVid id={id} hover={!mobile} /><span>{l}</span></div>
        ))}</div>
      </div>
    </section>
  );
}

// Live booking calendar. Acuity for now; when she moves to GlossGenius, swap BOOK_URL.
const BOOK_URL = 'https://app.acuityscheduling.com/schedule/dcd8ff94';
function CPBook() {
  // Acuity's embed.js auto-sizes the iframe to its content (no inner scrollbar).
  // It only sees iframes that exist when it runs, so load it after mount.
  React.useEffect(() => {
    const sc = document.createElement('script');
    sc.src = 'https://embed.acuityscheduling.com/js/embed.js';
    document.body.appendChild(sc);
    return () => sc.remove();
  }, []);
  return (
    <section className="cp-book stacked" id="book" data-screen-label="Book">
      <div className="cp-bookcopy">
        <div>
          <div className="cp-eyebrow rv">Book online</div>
          <h2 className="cp-h1 sm rv" style={{ '--d': '.08s' }}>Book the chair.</h2>
        </div>
        <div>
          <p className="cp-body rv" style={{ '--d': '.16s' }}>Pick a service, pick a time, done. The whole calendar lives right here.</p>
          <p className="cp-note rv" style={{ '--d': '.24s' }}>Please arrive with your hair fully detangled. Quick weaves and services with tracks are Tuesdays only. $25 fee for cancellations within 24 hours. No children, please.</p>
        </div>
      </div>
      <div className="cp-cal embed rv" style={{ '--d': '.12s' }}>
        <iframe className="cp-calframe" src={BOOK_URL} title="Book an appointment at the pixie dollhouse" allow="payment"></iframe>
      </div>
      <a className="cp-calalt" href={BOOK_URL} target="_blank" rel="noopener" data-track="book">Trouble with the calendar? Open it in a new tab</a>
    </section>
  );
}

// Instagram feed: her videos (assets/feed/ig-XX.mp4 + .jpg photo) rolling inside the phone.
// Shows the photo while scrolling; the whole clip plays on hover (tap on phones).
const IG_POSTS = [
  ['post-01-done', 'Silk press on a whole lot of hair'],
  ['post-02', 'Pin curl pixie, flowers and all'],
  ['post-03', 'Sharp lines, fresh cut'],
  ['post-04', 'Short in front, length in back'],
  ['post-05', 'Big curls to a pin curl pixie'],
  ['post-06', 'From locs to pin curls'],
];

function CPFeedPost({ id, c, dupe }) {
  const ref = React.useRef(null);
  const [on, setOn] = React.useState(false);
  const play = (fromStart) => { const v = ref.current; if (!v) return; if (fromStart) v.currentTime = 0; v.play().catch(() => {}); };
  const pause = () => { const v = ref.current; if (v) v.pause(); };
  const stop = () => { const v = ref.current; if (v) { v.pause(); v.currentTime = 0; } };
  const mouse = e => e.pointerType === 'mouse';
  return (
    <div className={'post' + (on ? ' on' : '')} aria-hidden={dupe || undefined}
      onPointerEnter={e => mouse(e) && play(true)} onPointerLeave={e => mouse(e) && stop()}
      onPointerUp={e => { if (mouse(e) || e.target.closest('a')) return; const v = ref.current; v && !v.paused ? pause() : play(false); }}>
      <div className="media">
        <video ref={ref} src={`assets/feed/${id}.mp4`} poster={`assets/feed/${id}.jpg`} style={{ backgroundImage: `url(assets/feed/${id}.jpg)` }}
          muted playsInline preload="none" aria-hidden="true" onPlaying={() => setOn(true)} onPause={() => setOn(false)} onEnded={stop} />
        <span className="play" aria-hidden="true"></span>
      </div>
      <p><a href="https://instagram.com/chardae_85" target="_blank" rel="noopener" tabIndex={dupe ? -1 : undefined}><b>@chardae_85</b></a> {c}</p>
    </div>
  );
}

function CPFeed() {
  const feed = [...IG_POSTS, ...IG_POSTS];
  // the phone stops scrolling only while a video is actually playing
  const [playing, setPlaying] = React.useState(false);
  const scrRef = React.useRef(null);
  React.useEffect(() => {
    const el = scrRef.current; if (!el) return;
    const check = () => setPlaying([...el.querySelectorAll('video')].some(v => !v.paused && !v.ended));
    ['play', 'playing', 'pause', 'ended'].forEach(ev => el.addEventListener(ev, check, true));
    return () => ['play', 'playing', 'pause', 'ended'].forEach(ev => el.removeEventListener(ev, check, true));
  }, []);
  return (
    <section className="cp-feed" id="feed" data-screen-label="Feed">
      <div className="cp-phonewrap">
      <div className="cp-phone rv">
        <div className="scr" ref={scrRef} data-playing={playing ? '' : undefined}>
          <div className="bar"><span className="av"><Sticker kind="butterfly" color="#fff" size={20} /></span><div><b>@chardae_85</b><small>Hair studio · Cleveland Heights</small></div><a className="fl" href="https://instagram.com/chardae_85" target="_blank" rel="noopener">Follow</a></div>
          <div className="win"><div className="roll">{feed.map(([id, c], i) => <CPFeedPost key={i} id={id} c={c} dupe={i >= IG_POSTS.length} />)}</div></div>
        </div>
      </div>
        <p className="cp-hint under"><span className="d">Hover to play</span><span className="m">Tap to play</span></p>
      </div>
      <div className="cp-feedcopy">
        <div className="cp-eyebrow rv">The feed</div>
        <h2 className="cp-h2 rv" style={{ '--d': '.08s' }}>@chardae_85</h2>
        <p className="cp-body rv" style={{ '--d': '.16s' }}>Before-and-afters, behind-the-chair moments, and every cancellation opening, posted to stories first.</p>
        <div className="cp-btnrow rv" style={{ '--d': '.24s' }}><a className="cp-btn ink lg" href="https://instagram.com/chardae_85" target="_blank" rel="noopener">Follow <span className="arr r" aria-hidden="true"></span></a><a className="cp-btn white lg" href="#book">Book from IG <span className="arr" aria-hidden="true"></span></a></div>
      </div>
    </section>
  );
}

// Shop: her Amazon picks (Associate tag chardae85-20).
// Amazon's rules don't allow hosting their product photos, so tiles are designed;
// swap in her own product photos any time via `img`.
function CPShop() {
  const prods = [
    ['https://amzn.to/4B8GB5Z','pink','Style','Pencil flat iron','Skinny plates that get right to the root on short cuts and pixie edges.','Iron'],
    ['https://amzn.to/4rOEuzD','mint','Protect','Satin pixie wrap','Sleep in it. Keeps your wrap, waves and shine in place overnight.','Wrap'],
    ['https://amzn.to/3W9HZVy','cream','Set','Wrap foaming lotion','Light hold and shine for wraps and sculpted waves.','Foam'],
    ['https://amzn.to/4zieIXf','pink','Wrap','Wrap strips','Hold the wrap smooth and flat while it sets.','Strips'],
  ];
  return (
    <section className="cp-shop" id="shop" data-screen-label="Shop">
      <div className="cp-sechead">
        <div><div className="cp-eyebrow rv">Shop my shelf</div><h2 className="cp-h2 rv" style={{ '--d': '.08s' }}>What's on my shelf.</h2></div>
        <p className="cp-shopnote rv">The tools and products I actually use, ready to order.</p>
      </div>
      <div className="cp-shopgrid">
        {prods.map(([url, t, cat, name, why, word], i) => (
          <a key={url} className={`cp-prod rv tone-${t}`} style={{ '--d': i * 0.08 + 's' }} href={url} target="_blank" rel="sponsored nofollow noopener">
            <div className="ph"><span className="word" aria-hidden="true">{word}</span><span className="fly" aria-hidden="true"></span><span className="tag">Shop on Amazon</span></div>
            <small>{cat}</small>
            <b>{name}</b>
            <p>{why}</p>
            <span className="cp-btn ink">Shop now <span className="arr" aria-hidden="true"></span></span>
          </a>
        ))}
      </div>
      <p className="cp-disclose">As an Amazon Associate I earn from qualifying purchases.</p>
    </section>
  );
}

function CPVisit() {
  const hours = [['Mon','Closed'],['Tue to Sat','10am to 3:30pm'],['Sun','Closed']];
  return (
    <section className="cp-visit" id="visit" data-screen-label="Visit">
      <div className="cp-visitcopy">
        <div className="cp-eyebrow rv">Visit</div>
        <h2 className="cp-h2 rv" style={{ '--d': '.08s' }}>Come find the dollhouse.</h2>
        <address className="cp-addr rv" style={{ '--d': '.16s' }}>2122 S. Taylor Rd<br />Cleveland Heights, OH 44118</address>
        <p className="cp-note rv" style={{ '--d': '.2s' }}>By appointment only. Complimentary parking is available behind the salon.</p>
        <dl className="cp-hours rv" style={{ '--d': '.24s' }}>
          {hours.map(([d, h]) => <div key={d}><dt>{d}</dt><dd className={h === 'Closed' ? 'off' : ''}>{h}</dd></div>)}
        </dl>
        <div className="cp-btnrow rv" style={{ '--d': '.3s' }}>
          <a className="cp-btn ink lg" href="https://maps.google.com/?q=2122+S+Taylor+Rd,+Cleveland+Heights,+OH+44118" target="_blank" rel="noopener">Get directions <span className="arr" aria-hidden="true"></span></a>
          <a className="cp-btn white lg" href="mailto:hi@pixiedollhouse.com">Email the studio</a>
        </div>
      </div>
      <div className="cp-map rv" style={{ '--d': '.1s' }}>
        {/* Replace with: <iframe title="Map to the pixie dollhouse" src="https://www.google.com/maps?q=YOUR+ADDRESS&output=embed" loading="lazy"></iframe> */}
        <iframe title="Map to the pixie dollhouse" src="https://www.google.com/maps?q=2122+S+Taylor+Rd,+Cleveland+Heights,+OH+44118&output=embed" loading="lazy" style={{ width: '100%', height: '100%', border: 0, display: 'block' }}></iframe>
      </div>
    </section>
  );
}

function CPList() {
  const [state, setState] = React.useState('idle');
  const [email, setEmail] = React.useState('');
  function submit(e) {
    e.preventDefault();
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) { setState('invalid'); return; }
    setState('sending');
    window.pdTrack && pdTrack('generate_lead', 'Lead', { form: 'newsletter' });
    fetch('/', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: new URLSearchParams({ 'form-name': 'newsletter', email }) })
      .then(r => { if (r.ok) window.location.href = 'thanks.html'; else setState('sent'); })
      .catch(() => setState('sent'));
  }
  return (
    <section className="cp-list" id="list" data-screen-label="Newsletter">
      <div className="cp-listcopy">
      <div className="cp-eyebrow rv">The list</div>
      <h2 className="cp-h2 rv" style={{ '--d': '.08s' }}>Get the <em>good</em> emails.</h2>
      <p className="cp-body rv" style={{ '--d': '.16s' }}>First opportunities on cancellations and early access when products drop. One a month, max.</p>
      {state === 'sent'
        ? <div className="cp-sent">You're on the list, doll.</div>
        : <form name="newsletter" method="POST" action="thanks.html" data-netlify="true" netlify-honeypot="bot-field" onSubmit={submit} className="cp-form rv" style={{ '--d': '.24s' }}>
            <input type="hidden" name="form-name" value="newsletter" />
            <p hidden><label>Don't fill this out: <input name="bot-field" /></label></p>
            <label htmlFor="cp-email" className="sr">Email address</label>
            <input id="cp-email" type="email" name="email" autoComplete="email" required aria-invalid={state === 'invalid'} aria-describedby="cp-err" placeholder="Your email" value={email} onChange={e => { setEmail(e.target.value); setState('idle'); }} />
            <button type="submit" className="cp-btn ink" disabled={state === 'sending'}>{state === 'sending' ? 'Joining…' : 'Join the list'}</button>
          </form>}
      <div id="cp-err" className="cp-err" role="alert">{state === 'invalid' ? 'That email looks off. Try again?' : ''}</div>
      </div>
      <div className="cp-receiptwrap rv" style={{ '--d': '.15s' }} aria-hidden="true">
        <div className="cp-receipt">
          <div className="hd"><b>the pixie dollhouse</b><small>thank you for visiting, doll</small></div>
          {[['The Big Chop','$225'],['Rinse','+$20'],['Deep Conditioner','+$20'],['Aftercare Goodie','incl.'],['Good Company','always free']].map(([l, v]) => (
            <div key={l} className="ln"><span>{l}</span><span>{v}</span></div>
          ))}
          <div className="tot"><span>TOTAL</span><span>worth it</span></div>
          <div className="scan">SCAN TO REBOOK</div>
          <div className="dots">· · · · · · · · · · · · · · · ·</div>
        </div>
      </div>
    </section>
  );
}

function CPFooter() {
  return (
    <footer className="cp-foot" data-screen-label="Footer">
      <div className="cp-foottop">
        <h2 className="cp-mega rv">Come <span className="one">get <em>doll'd up.</em></span></h2>
        <a className="cp-btn pink lg rv" style={{ '--d': '.1s' }} href="#book">Book a chair <span className="arr" aria-hidden="true"></span></a>
      </div>
      <div className="cp-footgrid">
        {[['Visit',[['2122 S. Taylor Rd','#visit'],['Cleveland Heights, OH 44118','#visit'],['Tue to Sat · by appointment','#visit']]],['Say hi',[['hi@pixiedollhouse.com','mailto:hi@pixiedollhouse.com'],['@chardae_85','https://instagram.com/chardae_85']]],['Site',[['Menu','#menu'],['About','#about'],['Looks','#looks'],['Book','#book']]],['Soon',[['Shop my shelf','#shop'],['Gift cards','#list']]]].map(([t, ls]) => (
          <nav key={t} aria-label={t}><small>{t}</small>{ls.map(([l, href]) => <a key={l} href={href}>{l}</a>)}</nav>
        ))}
      </div>
      <div className="cp-footbot"><span>© {new Date().getFullYear()} the pixie dollhouse</span><span><a href="policies.html">Policies</a> · <a href="privacy.html">Privacy</a> · <a href="terms.html">Terms</a></span></div>
    </footer>
  );
}

function CleanPop() {
  React.useEffect(() => {
    const io = new IntersectionObserver(es => es.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }), { threshold: 0.12, rootMargin: '0px 0px -6% 0px' });
    document.querySelectorAll('.rv').forEach(el => io.observe(el));
    const nav = document.getElementById('cpnav');
    const man = document.getElementById('cpmanifesto');
    const words = [...document.querySelectorAll('.mw')];
    const pars = [...document.querySelectorAll('.cp-par, .cp-par2')];
    let raf = 0;
    const tick = () => {
      raf = 0;
      const y = window.scrollY, vh = window.innerHeight;
      nav.classList.toggle('scrolled', y > 30);
      pars.forEach(p => { const r = p.parentElement.getBoundingClientRect(); const c = (r.top + r.height / 2 - vh / 2) / vh; p.style.transform = `translate3d(0, ${c * -60}px, 0) scale(1.12)`; });
      const r = man.getBoundingClientRect();
      const prog = Math.min(1, Math.max(0, (vh * 0.85 - r.top) / (r.height * 0.9)));
      const lit = prog * words.length;
      words.forEach((w, i) => w.style.setProperty('--o', Math.min(1, Math.max(0.14, lit - i + 0.14))));
    };
    const on = () => { if (!raf) raf = requestAnimationFrame(tick); };
    window.addEventListener('scroll', on, { passive: true });
    window.addEventListener('resize', on);
    tick();
    return () => { io.disconnect(); window.removeEventListener('scroll', on); window.removeEventListener('resize', on); };
  }, []);
  return (
    <div className="cp-root">
      <CPNav />
      <main id="main">
      <CPHero />
      <CPMarquee />
      <CPManifesto />
      <CPServices />
      <CPAbout />
      <CPTraining />
      <CPLooks />
      <CPBook />
      <CPFeed />
      <CPShop />
      <CPList />
      <CPVisit />
      </main>
      <CPFooter />
    </div>
  );
}
Object.assign(window, { CleanPop });