// Clean Pop, part 1: nav, hero, marquee, manifesto, services, about
// Top 8 from her Acuity menu, prices match Acuity
const cpServices = [
  ['The big chop + relaxer','With relaxer · fresh start','Relaxer','$250'],
  ['The big chop','No relaxer · fresh start','Cut','$225'],
  ['Cut + style','Precision cut, styled to finish','Cut','$125'],
  ['Waves','Sculpted and laid','Style','$95'],
  ['Silk Press','No relaxer · silky straight','Style','$100'],
  ['Wash + style','Cleanse, condition, finish','Style','$95'],
  ['Relaxer + style','Relaxer with a styled finish','Relaxer','$110'],
  ['Permanent color','Custom-mixed, long-lasting','Color','$175+'],
];

function CPWords({ text, delay = 0, step = 0.06 }) {
  return text.split(' ').map((w, i) => (
    <React.Fragment key={i}><span className="w"><span style={{ animationDelay: `${delay + i * step}s` }}>{w}</span></span>{' '}</React.Fragment>
  ));
}

function CPNav() {
  return (
    <nav className="cp-nav" id="cpnav" aria-label="Main">
      <a href="#main" aria-label="the pixie dollhouse, home"><Logo h={40} /></a>
      <div className="cp-navlinks">{['Menu','About','Looks','Shop','Visit'].map(l => <a key={l} href={'#' + l.toLowerCase()}>{l}</a>)}</div>
      <a className="cp-btn ink" href="#book">Book <span className="arr" aria-hidden="true"></span></a>
    </nav>
  );
}

function CPStylist() {
  const [ok, setOk] = React.useState(true);
  return ok
    ? <img className="cp-stylistimg" src="assets/stylist.png" alt="the stylist" onError={() => setOk(false)} />
    : <div className="cp-stylistph"><Sticker kind="butterfly" color="#fff" size={40} /><span>Stylist PNG cutout</span><small>Save as assets/stylist.png (transparent background)</small></div>;
}

function CPHero() {
  return (
    <section className="cp-hero" data-screen-label="Hero">
      <div className="cp-herobg" aria-hidden="true"><div className="cp-par"><img src="assets/hero-salon.png" alt="" /></div></div>
      <div className="cp-herocopy">
        <div className="cp-chip rise" style={{ animationDelay: '.1s' }}><Sticker kind="butterfly" color={PD.pink} size={18} />Now booking fall ’26 · Cleveland Heights, OH</div>
        <div>
          <h1 className="cp-h1">
            <CPWords text="Hair so pretty it's a" delay={0.2} />
            <span className="w"><span className="doll" style={{ animationDelay: '.55s' }}>doll</span></span>{' '}
            <CPWords text="thing." delay={0.62} />
          </h1>
          <p className="cp-lede rise" style={{ animationDelay: '.9s' }}>Your whole appointment, start to finish. Cuts, color, silk presses and waves, all done with love.</p>
          <div className="cp-btnrow rise" style={{ animationDelay: '1.05s' }}>
            <a className="cp-btn ink lg" href="#book">Book your chair <span className="arr" aria-hidden="true"></span></a>
            <a className="cp-btn white lg" href="#menu">View menu</a>
          </div>
        </div>
      </div>
      <div className="cp-stylist">
        <CPStylist />
        <div className="cp-quote rise" style={{ animationDelay: '1.4s' }}>
          <div className="q">Started from the kitchen, now I'm here.</div>
          <div className="s">Chardae, owner</div>
        </div>
      </div>
    </section>
  );
}

function CPMarquee() {
  const items = ['Cuts','Color','Waves','Gloss','Silk Press','Beauty','Correction','Pixies'];
  const row = [...items, ...items];
  return (
    <div className="cp-marquee" aria-hidden="true">
      <div className="track">{row.map((t, i) => <span key={i} className="it">{t}<Sticker kind="butterfly" color={i % 2 ? PD.mint : PD.pink} size={34} /></span>)}</div>
    </div>
  );
}

function CPManifesto() {
  const parts = [
    ['Welcome to a hair salon that thinks', ''], ['two hours', 'pill'], ['with you is the', ''],
    ['whole point.', 'pink'], ['Shampoo included, always. No rotating stylist, no', ''], ['"is she almost done?"', 'mint'],
  ];
  return (
    <section className="cp-sec cp-manifesto" id="cpmanifesto" data-screen-label="Manifesto">
      <div className="cp-eyebrow rv">The idea</div>
      <p className="cp-mtext">
        {parts.map(([t, k], i) => k
          ? <span key={i} className={'mw mk-' + k}>{t}</span>
          : t.split(' ').map((w, j) => <span key={i + '-' + j} className="mw">{w}</span>)
        ).flat().reduce((a, el, i) => (i ? [...a, ' ', el] : [el]), [])}
      </p>
      <div className="cp-tags">{['No rush','No script','No judgment','Only good hair days'].map((t, i) => <span key={t} className="cp-tag rv" style={{ '--d': i * 0.08 + 's' }}>{t}</span>)}</div>
    </section>
  );
}

function CPServices() {
  return (
    <section className="cp-services" id="menu" data-screen-label="Menu">
      <div className="cp-svchead">
        <div className="cp-sticky">
          <div className="cp-eyebrow rv">The menu</div>
          <h2 className="cp-h2 rv" style={{ '--d': '.08s' }}>Eight ways to get done.</h2>
          <p className="cp-body rv" style={{ '--d': '.16s' }}>Starting prices. Shampoo included, always. Add a rinse or deep conditioner for $20 each. $25 fee for cancellations within 24 hours. No children, please.</p>
          <a className="cp-btn ink rv" style={{ '--d': '.24s' }} href="#book">Book a service <span className="arr" aria-hidden="true"></span></a>
        </div>
      </div>
      <div className="cp-svclist">
        {cpServices.map(([n, s, d, p], i) => (
          <a key={n} href="#book" className="cp-svc rv" style={{ '--d': i * 0.05 + 's' }}>
            <span className="num">{String(i + 1).padStart(2, '0')}</span>
            <span className="nm"><b>{n}</b><small>{s}</small></span>
            <span className="dur">{d}</span>
            <span className="pr">{p}</span>
            <span className="go"><span className="arr" aria-hidden="true"></span></span>
          </a>
        ))}
      </div>
    </section>
  );
}

function CPAbout() {
  return (
    <section className="cp-about" id="about" data-screen-label="About">
      <div className="cp-aboutimg rv">
        <div className="cp-par2"><img className="cp-aboutphoto" src="assets/about-chardae.jpg" alt="Chardae, stylist and owner of the pixie dollhouse" loading="lazy" /></div>
        <span className="cp-badge">The pixie herself</span>
      </div>
      <div className="cp-aboutcopy">
        <div className="cp-eyebrow light rv">About</div>
        <h2 className="cp-h2 rv" style={{ '--d': '.08s' }}>Made with <em>love</em>, scissors, and a strong wifi signal.</h2>
        <p className="cp-body light rv" style={{ '--d': '.16s' }}>I'm Chardae. Every client gets treated with love and care. My assistant, Stevie, will give you the best shampoo you ever had, and when you sit in my chair, you'll see why you'll keep coming back.</p>
        <div className="cp-stats rv" style={{ '--d': '.24s' }}>
          {[['20 yrs','behind the chair'],['1','chair, all yours'],['12','services']].map(([n, l]) => <div key={l}><b>{n}</b><span>{l}</span></div>)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { CPNav, CPHero, CPStylist, CPMarquee, CPManifesto, CPServices, CPAbout });