/* global React */
const { useState, useEffect, useRef, useMemo, useCallback } = React;

// ─── Icons (inline, currentColor) ───
const Icon = {
  arrow: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 12h14M13 6l6 6-6 6"/>
    </svg>
  ),
  plus: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}>
      <path d="M12 5v14M5 12h14"/>
    </svg>
  ),
  check: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M4 12.5l5 5L20 6"/>
    </svg>
  ),
  star: (p) => (
    <svg viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
    </svg>
  ),
  whatsapp: (p) => (
    <svg viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M17.5 14.4c-.3-.2-1.8-.9-2.1-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5 0-.2 0-.3 0-.5-.1-.2-.7-1.7-.9-2.3-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4 0 1.4 1 2.7 1.2 2.9.2.2 2 3 4.8 4.2.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.8-.7 2-1.5.2-.7.2-1.4.2-1.5-.1-.2-.3-.3-.6-.4zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18c-1.5 0-2.9-.4-4.2-1.1l-.3-.2-3.1.8.8-3-.2-.3C4.4 14.9 4 13.5 4 12c0-4.4 3.6-8 8-8s8 3.6 8 8-3.6 8-8 8z"/>
    </svg>
  ),
  shield: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M12 3l8 3v5c0 4.5-3.4 8.6-8 10-4.6-1.4-8-5.5-8-10V6l8-3z"/>
      <path d="M9 12l2 2 4-4"/>
    </svg>
  ),
  privacy: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="5" y="10" width="14" height="10" rx="2"/>
      <path d="M8 10V7a4 4 0 018 0v3"/>
    </svg>
  ),
  hotmart: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="12" cy="12" r="9"/>
      <path d="M9 8l6 4-6 4V8z" fill="currentColor"/>
    </svg>
  ),
  method: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M4 4h12v6H4zM8 14h12v6H8z"/>
      <path d="M4 10l4 4M16 4l4 6"/>
    </svg>
  ),
  process: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="6" cy="6" r="2"/>
      <circle cx="18" cy="6" r="2"/>
      <circle cx="6" cy="18" r="2"/>
      <circle cx="18" cy="18" r="2"/>
      <path d="M8 6h8M6 8v8M18 8v8M8 18h8"/>
    </svg>
  ),
  label: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M3 8l9-5 9 5v8l-9 5-9-5V8z"/>
      <path d="M3 8l9 5 9-5M12 13v8"/>
    </svg>
  ),
  brain: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M9 4a3 3 0 00-3 3v1a3 3 0 00-2 2.83V13a3 3 0 002 2.83V17a3 3 0 003 3"/>
      <path d="M15 4a3 3 0 013 3v1a3 3 0 012 2.83V13a3 3 0 01-2 2.83V17a3 3 0 01-3 3"/>
      <path d="M12 4v16"/>
    </svg>
  ),
  sales: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M3 20h18M5 20V10l7-5 7 5v10"/>
      <path d="M10 20v-6h4v6"/>
    </svg>
  ),
  grid: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="3" y="3" width="7" height="7"/>
      <rect x="14" y="3" width="7" height="7"/>
      <rect x="3" y="14" width="7" height="7"/>
      <rect x="14" y="14" width="7" height="7"/>
    </svg>
  ),
  form: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="5" y="3" width="14" height="18" rx="2"/>
      <path d="M9 8h6M9 12h6M9 16h4"/>
    </svg>
  ),
  planner: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="3" y="5" width="18" height="16" rx="2"/>
      <path d="M3 9h18M8 3v4M16 3v4"/>
    </svg>
  ),
  chat: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M21 12a8 8 0 01-11.5 7.2L3 21l1.8-6.5A8 8 0 1121 12z"/>
    </svg>
  ),
  community: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="9" cy="9" r="3"/>
      <circle cx="17" cy="11" r="2.5"/>
      <path d="M3 19c0-3 3-5 6-5s6 2 6 5"/>
      <path d="M15 19c0-2 1.5-3.5 3.5-3.5S22 17 22 19"/>
    </svg>
  ),
  simbolo: (p) => (
    <svg viewBox="0 0 44 20" fill="currentColor" {...p}>
      <path d="M 9.96 0 C 11.257 0 12.514 0.245 13.729 0.731 C 14.945 1.219 16.04 1.948 17.012 2.92 C 17.048 2.957 17.047 3.002 17.012 3.057 L 16.381 3.694 C 16.323 3.749 16.276 3.749 16.24 3.694 C 15.29 2.739 14.233 2.003 13.071 1.489 C 11.911 0.976 10.727 0.692 9.52 0.638 C 8.313 0.581 7.151 0.754 6.035 1.157 C 4.919 1.562 3.922 2.195 3.045 3.057 C 2.185 3.923 1.554 4.916 1.152 6.036 C 0.749 7.154 0.58 8.319 0.643 9.531 C 0.707 10.743 0.991 11.933 1.495 13.1 C 1.998 14.265 2.726 15.326 3.676 16.282 C 4.646 17.236 5.708 17.97 6.86 18.483 C 8.013 18.997 9.196 19.282 10.411 19.339 C 11.628 19.394 12.795 19.225 13.908 18.831 C 14.96 18.458 15.896 17.866 16.72 17.062 C 16.598 16.949 16.478 16.834 16.362 16.714 C 15.56 15.884 14.932 14.917 14.473 13.8 C 14.001 12.683 13.771 11.498 13.771 10.232 C 13.771 8.966 14.001 7.78 14.454 6.676 C 14.908 5.571 15.529 4.604 16.318 3.774 C 17.108 2.945 18.034 2.296 19.09 1.815 C 20.152 1.336 21.282 1.092 22.494 1.092 C 22.948 1.092 23.451 1.123 23.991 1.191 C 24.538 1.26 25.092 1.386 25.657 1.573 C 26.223 1.76 26.775 1.997 27.322 2.296 C 27.869 2.589 28.366 2.97 28.819 3.425 L 28.217 4.056 C 27.912 3.6 27.546 3.201 27.105 2.852 C 26.67 2.509 26.199 2.215 25.694 1.978 C 25.191 1.741 24.663 1.566 24.104 1.461 C 23.551 1.349 23.01 1.298 22.488 1.298 C 21.413 1.298 20.394 1.529 19.438 1.997 C 18.487 2.453 17.654 3.095 16.946 3.9 C 16.238 4.711 15.677 5.659 15.268 6.744 C 14.858 7.83 14.652 8.997 14.652 10.226 C 14.652 11.455 14.877 12.615 15.324 13.706 C 15.771 14.792 16.362 15.747 17.101 16.552 C 17.84 17.363 18.686 17.999 19.637 18.46 C 20.587 18.922 21.563 19.159 22.575 19.159 C 24.085 19.159 25.44 18.76 26.633 17.955 C 27.826 17.157 28.739 16.071 29.38 14.705 L 30.212 12.908 C 28.783 12.622 27.409 12.347 26.092 12.085 C 24.775 11.822 23.619 11.497 22.625 11.111 C 21.631 10.724 20.855 10.232 20.295 9.646 C 19.729 9.052 19.487 8.303 19.549 7.393 C 19.853 8.167 20.357 8.816 21.059 9.327 C 21.767 9.845 22.613 10.275 23.595 10.631 C 24.576 10.987 25.664 11.286 26.856 11.529 C 28.05 11.773 29.268 12.015 30.511 12.253 L 35.53 1.373 L 36.413 1.373 L 44 19.091 L 43.118 19.091 C 43.087 19.023 43.056 18.96 43.03 18.904 C 43.006 18.848 42.975 18.773 42.944 18.691 C 42.322 17.799 41.546 17.044 40.626 16.427 C 39.7 15.809 38.687 15.285 37.587 14.842 C 36.487 14.405 35.319 14.037 34.096 13.737 C 32.865 13.444 31.641 13.177 30.417 12.939 L 29.609 14.711 C 28.97 16.127 28.043 17.263 26.838 18.117 C 25.626 18.972 24.21 19.396 22.575 19.396 C 21.363 19.396 20.227 19.153 19.158 18.672 C 18.307 18.29 17.544 17.795 16.866 17.193 C 15.93 18.113 14.882 18.806 13.717 19.269 C 12.491 19.755 11.239 20 9.96 20 C 8.68 20 7.426 19.755 6.198 19.269 C 4.973 18.782 3.876 18.044 2.908 17.053 C 1.94 16.078 1.213 14.98 0.729 13.761 C 0.243 12.539 0 11.281 0 9.988 C 0 8.693 0.243 7.436 0.729 6.216 C 1.213 4.994 1.94 3.895 2.908 2.92 C 3.876 1.949 4.969 1.219 6.187 0.731 C 7.403 0.245 8.661 0 9.96 0 Z M 30.74 12.277 C 31.914 12.496 33.082 12.74 34.244 13.015 C 35.406 13.282 36.5 13.613 37.531 14 C 38.562 14.387 39.508 14.868 40.353 15.441 C 41.203 16.015 41.906 16.713 42.459 17.543 C 41.297 14.879 40.154 12.222 39.029 9.583 C 37.905 6.944 36.768 4.286 35.624 1.623 L 30.74 12.277 Z"/>
    </svg>
  ),
};

// ─── Logo block (full wordmark image) ───
function Logo({size = "md"}) {
  const heights = {sm: 22, md: 56, lg: 80};
  const h = heights[size] || heights.md;
  return (
    <div className="brand-logo" style={{height: h}}>
      <img src="assets/logo-full.png" alt="CCA — Cosmetologia Consciente aplicada" style={{height: "100%", width: "auto", display: "block"}}/>
    </div>
  );
}

// ─── Scroll Reveal hook ───
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("is-in");
          io.unobserve(e.target);
        }
      });
    }, {threshold: 0.12, rootMargin: "0px 0px -8% 0px"});
    el.querySelectorAll(".reveal").forEach(n => io.observe(n));
    return () => io.disconnect();
  }, []);
  return ref;
}

// ─── CTA Button ───
function CTA({children = "Quero entrar no CCA", style, className = ""}) {
  return (
    <a href="#comprar" className={`btn btn--gold ${className}`} style={style}>
      {children}
      <Icon.arrow className="arrow" style={{width: 18, height: 18}}/>
    </a>
  );
}

// Export to window
Object.assign(window, {Icon, Logo, useReveal, CTA});
