// Shared LP components (loaded after React + Babel)

const Check = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M3 8.5L6.5 12L13 4.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const Arrow = ({ size = 12 }) => (
  <svg className="arrow" width={size} height={size+4} viewBox="0 0 16 12" fill="none">
    <path d="M1 6h14m0 0l-5-5m5 5l-5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const Plus = () => (
  <svg className="pm" width="20" height="20" viewBox="0 0 20 20" fill="none">
    <path d="M10 4v12M4 10h12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
  </svg>
);

const LpNav = ({ ctaLabel, ctaHref }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`lp-nav ${scrolled ? "scrolled" : ""}`}>
      <a href="/" className="mark">
        <img src="../images/stylistcoach_logo.png" alt="Stylist Coach" style={{height:"26px",width:"auto",display:"block"}} />
      </a>
      <a href="index.html" className="back">
        <svg width="14" height="10" viewBox="0 0 14 10" fill="none">
          <path d="M5 1L1 5L5 9M1 5h12" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
        Terug naar hoofdsite
      </a>
    </nav>
  );
};

const FAQ = ({ items }) => {
  const [open, setOpen] = React.useState(0);
  return (
    <div className="faq">
      {items.map((it, i) => (
        <div key={i} className={`faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
          <div className="faq-q">
            <span>{it.q}</span>
            <Plus/>
          </div>
          <div className="faq-a">{it.a}</div>
        </div>
      ))}
    </div>
  );
};

const Testimonials = ({ items }) => (
  <div className="testi-strip">
    {items.map((t, i) => (
      <div key={i} className="testi">
        <div className="stars">★ ★ ★ ★ ★</div>
        <blockquote>"{t.q}"</blockquote>
        <div className="who">
          <div className="av">{t.n.charAt(0)}</div>
          <div>
            <div className="n">{t.n}</div>
            <div className="r">{t.r}</div>
          </div>
        </div>
      </div>
    ))}
  </div>
);

// reveal hook
const useReveal = () => {
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add("in"); });
    }, { threshold: 0.08 });
    document.querySelectorAll(".lp-section, .lp-hero, .lp-pull, .lp-footer").forEach(el => {
      el.classList.add("lp-reveal");
      io.observe(el);
    });
    return () => io.disconnect();
  }, []);
};

window.LpNav = LpNav;
window.FAQ = FAQ;
window.Testimonials = Testimonials;
window.useReveal = useReveal;
window.Check = Check;
window.Arrow = Arrow;
window.Plus = Plus;