/* Shared components & SVG illustrations for Palmilha Inteligente */

const { useEffect, useRef, useState } = React;

// ============================================================
// Logo (official brand logo from manual de marca)
// ============================================================
function Logo({ variant = 'dark', className = '', size = 'md', withSlogan = false }) {
  const srcMap = {
    dark: withSlogan ? 'assets/logo-color.png' : 'assets/logo-color-compact.png',
    light: 'assets/logo-white.png'
  };
  const src = srcMap[variant] || srcMap.dark;
  const heights = { sm: 'h-7', md: 'h-9', lg: 'h-12', xl: 'h-16' };
  return (
    <a href="#top" className={`inline-flex items-center ${className}`} aria-label="Palmilha Inteligente">
      <img src={src} alt="Palmilha Inteligente" className={`${heights[size] || heights.md} w-auto select-none`} draggable="false" />
    </a>);

}

// ============================================================
// Reveal-on-scroll wrapper
// ============================================================
function Reveal({ children, delay = 0, as: As = 'div', className = '', ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) {el.classList.add('is-in');io.unobserve(el);}});
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <As ref={ref} className={`reveal ${delay ? 'reveal-delay-' + delay : ''} ${className}`} {...rest}>
      {children}
    </As>);

}

// ============================================================
// Section heading (eyebrow + title + lede)
// ============================================================
function SectionHead({ eyebrow, title, lede, align = 'center', tone = 'light', maxLede = 'max-w-2xl' }) {
  const eyebrowColor = tone === 'dark' ? 'text-turq-500' : 'text-petrol';
  const titleColor = tone === 'dark' ? 'text-white' : 'text-ink-900';
  const ledeColor = tone === 'dark' ? 'text-white/70' : 'text-ink-500';
  const alignClass = align === 'center' ? 'text-center mx-auto' : '';
  return (
    <div className={`${alignClass} max-w-3xl ${align === 'center' ? '' : ''}`}>
      {eyebrow &&
      <Reveal>
          <div className={`inline-flex items-center gap-2 text-[11px] font-semibold tracking-[0.18em] uppercase ${eyebrowColor}`}>
            <span className="inline-block h-px w-6 bg-current opacity-50"></span>
            {eyebrow}
          </div>
        </Reveal>
      }
      <Reveal delay={1}>
        <h2 className={`mt-4 font-display font-semibold text-[clamp(28px,4.4vw,46px)] leading-[1.08] ${titleColor}`}>
          {title}
        </h2>
      </Reveal>
      {lede &&
      <Reveal delay={2}>
          <p className={`mt-5 text-[17px] leading-relaxed ${ledeColor} ${maxLede} ${align === 'center' ? 'mx-auto' : ''}`}>
            {lede}
          </p>
        </Reveal>
      }
    </div>);

}

// ============================================================
// Buttons
// ============================================================
function Button({ as: As = 'a', variant = 'primary', size = 'md', icon, className = '', children, ...rest }) {
  const base = 'inline-flex items-center justify-center gap-2 font-semibold rounded-full transition-all duration-300 will-change-transform';
  const sizes = {
    sm: 'px-4 py-2 text-[13px]',
    md: 'px-5 py-3 text-[14px]',
    lg: 'px-7 py-4 text-[15px]'
  };
  const variants = {
    primary: 'bg-grad-turq text-white shadow-[0_10px_24px_-10px_rgba(30,199,230,0.65)] hover:shadow-[0_18px_36px_-12px_rgba(30,199,230,0.75)] hover:-translate-y-0.5',
    petrol: 'bg-petrol text-white hover:bg-petrol-600 shadow-[0_10px_24px_-12px_rgba(10,91,126,0.55)] hover:-translate-y-0.5',
    accent: 'bg-accent text-white hover:bg-accent-600 shadow-[0_10px_24px_-12px_rgba(215,48,69,0.55)] hover:-translate-y-0.5',
    ghost: 'bg-white text-petrol border border-ink-200 hover:border-petrol/40 hover:text-petrol-800 hover:-translate-y-0.5',
    outline: 'bg-transparent text-petrol border border-petrol/30 hover:bg-petrol hover:text-white',
    soft: 'bg-turq-100 text-petrol hover:bg-turq-100/70',
    onDark: 'bg-white text-petrol-900 hover:bg-turq-100 hover:-translate-y-0.5',
    onDarkGhost: 'bg-transparent text-white border border-white/30 hover:bg-white/10'
  };
  return (
    <As className={`${base} ${sizes[size]} ${variants[variant]} ${className}`} {...rest}>
      {children}
      {icon && <span className="inline-flex">{icon}</span>}
    </As>);

}

// ============================================================
// Lucide-style icons (inline SVG, no external dep)
// ============================================================
const Ic = {
  base: { width: 22, height: 22, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' }
};
function Icon({ name, size = 22, className = '', strokeWidth = 1.8 }) {
  const common = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', className };
  switch (name) {
    case 'foot':
      return <svg {...common}><path d="M8 21c0-1.6 1-3 2.5-3.4 1.6-.5 2.5-1.6 2.5-3.6 0-2-1-3.2-2-4.2-1.2-1.2-1.5-2.4-1.2-4.5C10.2 3.6 11.7 2.5 13.4 2.5c2 0 3.6 1.6 3.6 4 0 3 .5 4.5 1.8 5.8 1 1 1.7 2.3 1.7 4 0 2.5-1.6 4.2-4.2 4.2-1.5 0-2.4-.6-3.4-.6-1 0-1.6.6-2.9.6" /></svg>;
    case 'spine':
      return <svg {...common}><path d="M12 3v18" /><path d="M9 5h6" /><path d="M9 9h6" /><path d="M9 13h6" /><path d="M9 17h6" /></svg>;
    case 'knee':
      return <svg {...common}><path d="M7 3v6c0 1.5.5 2.5 1.5 3.5L10 14v7" /><path d="M17 3v6c0 1.5-.5 2.5-1.5 3.5L14 14v7" /><circle cx="12" cy="14" r="2" /></svg>;
    case 'walk':
      return <svg {...common}><circle cx="13" cy="4" r="2" /><path d="M4 22l3-5 2.5-2L7 11l3-4 5 3-1 4 3 3v5" /></svg>;
    case 'posture':
      return <svg {...common}><circle cx="12" cy="4" r="2" /><path d="M12 6v6" /><path d="M6 9l6 3 6-3" /><path d="M12 12l-3 9" /><path d="M12 12l3 9" /></svg>;
    case 'activity':
      return <svg {...common}><path d="M22 12h-4l-3 8-6-16-3 8H2" /></svg>;
    case 'heart':
      return <svg {...common}><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" /></svg>;
    case 'shield':
      return <svg {...common}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /><path d="M9 12l2 2 4-4" /></svg>;
    case 'sparkle':
      return <svg {...common}><path d="M12 3l1.6 4.6L18 9l-4.4 1.4L12 15l-1.6-4.6L6 9l4.4-1.4z" /><path d="M19 16l.7 1.8L21.5 18l-1.8.7L19 20l-.7-1.3L16.5 18l1.8-.2z" /></svg>;
    case 'balance':
      return <svg {...common}><path d="M12 3v18" /><path d="M5 9h14" /><path d="M5 9l-3 6h6z" /><path d="M19 9l-3 6h6z" /></svg>;
    case 'check':
      return <svg {...common}><path d="M5 12l5 5 10-10" /></svg>;
    case 'arrow':
      return <svg {...common}><path d="M5 12h14" /><path d="M13 6l6 6-6 6" /></svg>;
    case 'whatsapp':
      return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className}><path d="M.057 24l1.687-6.163a11.867 11.867 0 0 1-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.817 11.817 0 0 1 8.413 3.488 11.82 11.82 0 0 1 3.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 0 0 1.51 5.26l-.999 3.648 3.978-.607zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.174.198-.298.297-.497.099-.198.05-.371-.025-.52-.074-.149-.669-1.612-.916-2.207-.241-.579-.486-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.463 1.065 2.876 1.213 3.074.149.198 2.095 3.2 5.076 4.487.71.306 1.263.489 1.695.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z" /></svg>;
    case 'phone':
      return <svg {...common}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z" /></svg>;
    case 'mail':
      return <svg {...common}><rect x="2" y="4" width="20" height="16" rx="2" /><path d="m22 6-10 7L2 6" /></svg>;
    case 'pin':
      return <svg {...common}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" /></svg>;
    case 'clock':
      return <svg {...common}><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></svg>;
    case 'menu':
      return <svg {...common}><path d="M3 6h18" /><path d="M3 12h18" /><path d="M3 18h18" /></svg>;
    case 'x':
      return <svg {...common}><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>;
    case 'plus':
      return <svg {...common}><path d="M12 5v14" /><path d="M5 12h14" /></svg>;
    case 'chev':
      return <svg {...common}><path d="m6 9 6 6 6-6" /></svg>;
    case 'star':
      return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className}><path d="m12 17.27 6.18 3.73-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" /></svg>;
    case 'instagram':
      return <svg {...common}><rect x="2" y="2" width="20" height="20" rx="5" /><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /><path d="M17.5 6.5h.01" /></svg>;
    case 'facebook':
      return <svg {...common}><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /></svg>;
    case 'yt':
      return <svg {...common}><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19.5C5.12 20 12 20 12 20s6.88 0 8.6-.5a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.33 29 29 0 0 0-.46-5.75z" /><path d="m9.75 15.02 5.75-3.27-5.75-3.27z" /></svg>;
    case 'scan':
      return <svg {...common}><path d="M3 7V5a2 2 0 0 1 2-2h2" /><path d="M17 3h2a2 2 0 0 1 2 2v2" /><path d="M21 17v2a2 2 0 0 1-2 2h-2" /><path d="M7 21H5a2 2 0 0 1-2-2v-2" /><path d="M7 12h10" /></svg>;
    case 'layers':
      return <svg {...common}><path d="M12 2 2 7l10 5 10-5-10-5z" /><path d="m2 17 10 5 10-5" /><path d="m2 12 10 5 10-5" /></svg>;
    case 'cpu':
      return <svg {...common}><rect x="4" y="4" width="16" height="16" rx="2" /><rect x="9" y="9" width="6" height="6" /><path d="M9 2v2" /><path d="M15 2v2" /><path d="M9 20v2" /><path d="M15 20v2" /><path d="M2 9h2" /><path d="M2 15h2" /><path d="M20 9h2" /><path d="M20 15h2" /></svg>;
    case 'target':
      return <svg {...common}><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" /></svg>;
    case 'send':
      return <svg {...common}><path d="m22 2-7 20-4-9-9-4z" /><path d="M22 2 11 13" /></svg>;
    default:
      return null;
  }
}

// ============================================================
// FOOT + INSOLE shared path (anatomical, foot-shaped insole)
// ============================================================
// Mirrored, anatomically inspired left-foot insole outline
const INSOLE_PATH = "M120 14 C 96 14, 78 28, 70 50 C 64 68, 60 86, 58 110 C 56 134, 54 160, 56 184 C 58 208, 60 232, 66 254 C 72 274, 88 290, 110 294 C 130 298, 156 296, 172 286 C 184 278, 188 264, 188 246 C 188 220, 186 192, 184 168 C 182 144, 180 118, 176 92 C 172 64, 162 36, 148 24 C 140 18, 130 14, 120 14 Z";

// Real plantar foot photo (assets/pe.png, 1086x1448). Two traced silhouettes:
// FOOT_PX in image pixel coords (for the heat-overlay SVG, viewBox 0 0 1086 1448)
// FOOT_BB normalized 0..1 (for CSS clip-path on the <img>, objectBoundingBox).
const FOOT_PX = "M 445 107 L 554 147 L 612 187 L 625 227 L 677 267 L 712 307 L 737 347 L 744 387 L 744 427 L 754 467 L 764 507 L 767 547 L 762 587 L 753 627 L 746 667 L 741 707 L 735 747 L 727 787 L 717 827 L 706 867 L 697 907 L 690 947 L 684 987 L 678 1027 L 674 1067 L 675 1107 L 673 1147 L 668 1187 L 658 1227 L 639 1267 L 602 1307 L 540 1325 L 529 1325 L 471 1307 L 433 1267 L 415 1227 L 407 1187 L 405 1147 L 406 1107 L 406 1067 L 403 1027 L 399 987 L 394 947 L 388 907 L 385 867 L 384 827 L 383 787 L 381 747 L 376 707 L 369 667 L 360 627 L 350 587 L 338 547 L 327 507 L 322 467 L 324 427 L 331 387 L 340 347 L 345 307 L 341 267 L 339 227 L 349 187 L 367 147 L 416 107 Z";
const FOOT_BB = "M 0.4098 0.0739 L 0.5101 0.1015 L 0.5635 0.1291 L 0.5755 0.1568 L 0.6234 0.1844 L 0.6556 0.2120 L 0.6786 0.2396 L 0.6851 0.2673 L 0.6851 0.2949 L 0.6943 0.3225 L 0.7035 0.3501 L 0.7063 0.3778 L 0.7017 0.4054 L 0.6934 0.4330 L 0.6869 0.4606 L 0.6823 0.4883 L 0.6768 0.5159 L 0.6694 0.5435 L 0.6602 0.5711 L 0.6501 0.5988 L 0.6418 0.6264 L 0.6354 0.6540 L 0.6298 0.6816 L 0.6243 0.7093 L 0.6206 0.7369 L 0.6215 0.7645 L 0.6197 0.7921 L 0.6151 0.8198 L 0.6059 0.8474 L 0.5884 0.8750 L 0.5543 0.9026 L 0.4972 0.9151 L 0.4871 0.9151 L 0.4337 0.9026 L 0.3987 0.8750 L 0.3821 0.8474 L 0.3748 0.8198 L 0.3729 0.7921 L 0.3738 0.7645 L 0.3738 0.7369 L 0.3711 0.7093 L 0.3674 0.6816 L 0.3628 0.6540 L 0.3573 0.6264 L 0.3545 0.5988 L 0.3536 0.5711 L 0.3527 0.5435 L 0.3508 0.5159 L 0.3462 0.4883 L 0.3398 0.4606 L 0.3315 0.4330 L 0.3223 0.4054 L 0.3112 0.3778 L 0.3011 0.3501 L 0.2965 0.3225 L 0.2983 0.2949 L 0.3048 0.2673 L 0.3131 0.2396 L 0.3177 0.2120 L 0.3140 0.1844 L 0.3122 0.1568 L 0.3214 0.1291 L 0.3379 0.1015 L 0.3831 0.0739 Z";

// Foot photo + pressure heatmap module. `id` must be unique per instance so the
// clip/gradient ids don't collide. `heat` = [{x,y,rx,ry,c,o}] in image px coords.
function FootPhoto({ id, heat = [], blend = 'multiply', edge = '#1EC7E6', pad = 'px-8 pt-12 pb-20', points = [] }) {
  return (
    <div className={`absolute inset-0 flex items-center justify-center ${pad}`}>
      <div className="relative h-full" style={{ aspectRatio: '1086 / 1448' }}>
        <svg width="0" height="0" style={{ position: 'absolute' }} aria-hidden="true">
          <defs>
            <clipPath id={`${id}-bb`} clipPathUnits="objectBoundingBox"><path d={FOOT_BB} /></clipPath>
          </defs>
        </svg>
        <img
          src="assets/pe.png" alt="Mapa plantar do pé" draggable="false"
          className="absolute inset-0 w-full h-full select-none"
          style={{ clipPath: `url(#${id}-bb)`, WebkitClipPath: `url(#${id}-bb)` }} />
        <svg viewBox="0 0 1086 1448" preserveAspectRatio="none" className="absolute inset-0 w-full h-full">
          <defs>
            {heat.map((h, i) => (
              <radialGradient key={i} id={`${id}-g${i}`} cx="0.5" cy="0.5" r="0.5">
                <stop offset="0" stopColor={h.c} stopOpacity={h.o} />
                <stop offset="0.55" stopColor={h.c} stopOpacity={h.o * 0.4} />
                <stop offset="1" stopColor={h.c} stopOpacity="0" />
              </radialGradient>
            ))}
            <clipPath id={`${id}-px`}><path d={FOOT_PX} /></clipPath>
          </defs>
          <path d={FOOT_PX} fill="none" stroke={edge} strokeWidth="5" opacity="0.5" />
          <g clipPath={`url(#${id}-px)`} style={{ mixBlendMode: blend }}>
            {heat.map((h, i) => (
              <ellipse key={i} cx={h.x} cy={h.y} rx={h.rx} ry={h.ry} fill={`url(#${id}-g${i})`}>
                <animate attributeName="rx" from={h.rx * 0.5} to={h.rx} dur="0.6s" fill="freeze" />
              </ellipse>
            ))}
          </g>
          {points.map((p, i) => (
            <g key={i}>
              <circle cx={p.x} cy={p.y} r="34" fill="#1EC7E6" opacity="0.18" className="pressure-point" style={{ animationDelay: p.d || '0s', transformOrigin: `${p.x}px ${p.y}px` }} />
              <circle cx={p.x} cy={p.y} r="13" fill="none" stroke="#1EC7E6" strokeWidth="3" />
              <circle cx={p.x} cy={p.y} r="4" fill="#1EC7E6" />
            </g>
          ))}
        </svg>
      </div>
    </div>
  );
}

// ============================================================
// INSOLE SCAN — Hero visual
// Top-down insole with pressure heatmap, animated scan,
// pulsing pressure pads, axis grid + floating HUD readouts.
// ============================================================
function InsoleScan() {
  return (
    <div className="relative w-full aspect-[5/6] max-w-[440px] mx-auto">
      {/* Bezel / panel */}
      <div className="absolute inset-0 rounded-[40px] bg-grad-soft border border-ink-100 overflow-hidden shadow-card">
        <div className="absolute inset-0 bg-grid opacity-50"></div>
        <div className="absolute inset-x-0 top-0 h-[40%] bg-gradient-to-b from-turq-100/40 to-transparent"></div>
        <div className="absolute -bottom-32 -right-20 w-64 h-64 rounded-full bg-turq-500/15 blur-3xl"></div>
        <CornerBrackets />

        {/* Top HUD strip */}
        <div className="absolute top-4 left-5 right-5 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <span className="relative flex h-1.5 w-1.5">
              <span className="absolute inline-flex h-full w-full rounded-full bg-accent opacity-75 animate-ping"></span>
              <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-accent"></span>
            </span>
            <span className="text-[9.5px] font-mono tracking-[0.22em] uppercase text-petrol-700">PI-Sense · LIVE</span>
          </div>
          <span className="text-[9.5px] font-mono tracking-[0.22em] uppercase text-ink-400">L · FOOT</span>
        </div>

        {/* Bottom data bar */}
        <div className="absolute bottom-4 left-5 right-5 grid grid-cols-3 gap-1.5">
          {[
          { l: 'Antepé', v: '18', u: 'kPa', c: '#1EC7E6' },
          { l: 'Arco', v: 'A.C', u: 'tipo', c: '#0A5B7E' },
          { l: 'Calcâneo', v: '22', u: 'kPa', c: '#D73045' }].
          map((c) =>
          <div key={c.l} className="bg-white/85 backdrop-blur border border-ink-100 rounded-lg px-2 py-1.5">
              <div className="flex items-center gap-1">
                <span className="w-1 h-1 rounded-full" style={{ background: c.c }}></span>
                <span className="text-[8.5px] uppercase tracking-[0.16em] text-ink-400">{c.l}</span>
              </div>
              <div className="mt-0.5 flex items-baseline gap-1">
                <span className="font-mono font-semibold text-[13px] leading-none" style={{ color: c.c }}>{c.v}</span>
                <span className="text-[8.5px] text-ink-400">{c.u}</span>
              </div>
            </div>
          )}
        </div>

        {/* Animated scan line */}
        <div className="absolute inset-x-6 top-12 bottom-20 overflow-hidden">
          <div className="scan-line w-full absolute left-0 right-0 animate-scan"></div>
        </div>
      </div>

      {/* Main illustration — real plantar foot photo + pressure heatmap */}
      <FootPhoto
        id="scan"
        blend="multiply"
        edge="#1EC7E6"
        pad="px-10 pt-14 pb-20"
        heat={[
          { x: 530, y: 1190, rx: 175, ry: 150, c: '#D73045', o: 0.55 },
          { x: 435, y: 380,  rx: 135, ry: 115, c: '#D73045', o: 0.5 },
          { x: 650, y: 440,  rx: 95,  ry: 80,  c: '#FFB347', o: 0.45 },
          { x: 430, y: 820,  rx: 120, ry: 175, c: '#1EC7E6', o: 0.4 },
          { x: 650, y: 780,  rx: 110, ry: 150, c: '#1EC7E6', o: 0.4 },
        ]}
        points={[
          { x: 435, y: 380 },
          { x: 530, y: 1190 },
          { x: 430, y: 820, d: '0.6s' },
          { x: 650, y: 780, d: '1.1s' },
          { x: 650, y: 440, d: '1.6s' },
        ]}
      />

      {/* Floating HUD labels (DOM, above SVG) */}
      <Hud top="22%" right="-6%" label="Antepé" value="18 kPa" />
      <Hud top="50%" left="-6%" label="Arco médio" value="A. Cavo" />
      <Hud bottom="24%" right="-2%" label="Calcâneo" value="22 kPa" />
    </div>);

}

// ============================================================
// INSOLE TECH — Technology section visual
// Detailed top-down insole, dark theme, animated heatmap,
// readouts, ruler ticks, and a corner "STEP COUNT" tile.
// ============================================================
function InsoleTech() {
  return (
    <div className="relative w-full aspect-[5/6] max-w-[540px] mx-auto">
      {/* Panel */}
      <div className="absolute inset-0 rounded-[40px] overflow-hidden border border-white/10 bg-petrol-900/50 backdrop-blur shadow-[0_30px_80px_-30px_rgba(0,0,0,0.6)]">
        <div className="absolute inset-0 bg-grid opacity-[0.10]"></div>
        <div className="absolute -top-32 -right-20 w-72 h-72 rounded-full bg-turq-500/15 blur-3xl"></div>
        <div className="absolute -bottom-32 -left-20 w-72 h-72 rounded-full bg-accent/10 blur-3xl"></div>
        <CornerBrackets />
        {/* HUD top */}
        <div className="absolute top-5 left-6 right-6 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <span className="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
            <span className="font-mono text-[10px] tracking-[0.22em] uppercase text-white/70">SCAN · 001 · ATIVO</span>
          </div>
          <span className="font-mono text-[10px] tracking-[0.22em] uppercase text-turq-500">PI-Sense™ v2</span>
        </div>
        {/* Scan line */}
        <div className="absolute inset-x-10 top-14 bottom-24 overflow-hidden">
          <div className="scan-line w-full absolute left-0 right-0 animate-scan"></div>
        </div>
      </div>

      {/* Left-side ruler */}
      <div className="absolute left-3 top-16 bottom-24 flex flex-col justify-between py-2 hidden sm:flex">
        {[...Array(9)].map((_, i) =>
        <div key={i} className="flex items-center gap-1">
            <div className={`h-px ${i % 2 === 0 ? 'w-3 bg-white/50' : 'w-1.5 bg-white/25'}`}></div>
            {i % 2 === 0 && <span className="font-mono text-[8px] text-white/40">{i * 30}</span>}
          </div>
        )}
      </div>

      {/* Stats column on right */}
      <div className="absolute right-3 top-16 hidden sm:flex flex-col gap-2 w-28">
        {[
        { label: 'Suporte', value: 92, color: '#1EC7E6' },
        { label: 'Conforto', value: 87, color: '#49D7EE' },
        { label: 'Apoio', value: 95, color: '#1EC7E6' }].
        map((s) =>
        <div key={s.label} className="bg-white/[0.06] border border-white/10 rounded-lg p-2">
            <div className="flex items-center justify-between">
              <span className="text-[9px] uppercase tracking-[0.16em] text-white/55">{s.label}</span>
              <span className="font-mono text-[10px] font-semibold" style={{ color: s.color }}>{s.value}%</span>
            </div>
            <div className="mt-1.5 h-1 bg-white/10 rounded-full overflow-hidden">
              <div className="h-full rounded-full" style={{ width: s.value + '%', background: `linear-gradient(90deg, #0A5B7E, ${s.color})` }}></div>
            </div>
          </div>
        )}
      </div>

      {/* Foot photo + pressure heatmap (dark theme) */}
      <FootPhoto
        id="tech"
        blend="screen"
        edge="#49D7EE"
        pad="px-14 pt-16 pb-24"
        heat={[
          { x: 530, y: 1190, rx: 180, ry: 155, c: '#D73045', o: 0.6 },
          { x: 435, y: 380,  rx: 140, ry: 120, c: '#D73045', o: 0.55 },
          { x: 650, y: 440,  rx: 100, ry: 90,  c: '#FFB347', o: 0.5 },
          { x: 430, y: 820,  rx: 125, ry: 185, c: '#1EC7E6', o: 0.5 },
          { x: 650, y: 780,  rx: 115, ry: 160, c: '#1EC7E6', o: 0.5 },
        ]}
        points={[
          { x: 435, y: 380 },
          { x: 530, y: 1190 },
          { x: 430, y: 820, d: '0.5s' },
          { x: 650, y: 780, d: '1.0s' },
          { x: 650, y: 440, d: '1.5s' },
        ]}
      />

      {/* Bottom HUD readouts */}
      <div className="absolute bottom-5 left-6 right-6 grid grid-cols-3 gap-2">
        {[
        { l: 'Antepé', v: '18.4', u: 'kPa', c: 'text-turq-500' },
        { l: 'Arco', v: 'A.C', u: 'tipo', c: 'text-turq-500' },
        { l: 'Calcâneo', v: '22.1', u: 'kPa', c: 'text-accent' }].
        map((c) =>
        <div key={c.l} className="bg-white/[0.06] backdrop-blur border border-white/10 rounded-xl px-3 py-2">
            <div className="text-[8.5px] uppercase tracking-[0.18em] text-white/55">{c.l}</div>
            <div className={`mt-0.5 flex items-baseline gap-1 ${c.c}`}>
              <span className="font-mono font-semibold text-[14px] leading-none">{c.v}</span>
              <span className="text-[9px] text-white/40">{c.u}</span>
            </div>
          </div>
        )}
      </div>
    </div>);

}

// Backwards-compat: FootScan alias used in Hero
const FootScan = InsoleScan;

function PressurePoint({ cx, cy, small, delay = '0s' }) {
  const r = small ? 3 : 4.5;
  return (
    <g>
      <circle cx={cx} cy={cy} r={r * 2.4} fill="#1EC7E6" opacity="0.18" className="pressure-point" style={{ animationDelay: delay, transformOrigin: `${cx}px ${cy}px` }} />
      <circle cx={cx} cy={cy} r={r} fill="#1EC7E6" />
      <circle cx={cx} cy={cy} r={r * 0.45} fill="#fff" />
    </g>);

}

function CornerBrackets() {
  const cls = "absolute w-5 h-5 border-turq-500/60";
  return (
    <>
      <div className={`${cls} top-3 left-3 border-t-2 border-l-2 rounded-tl-md`}></div>
      <div className={`${cls} top-3 right-3 border-t-2 border-r-2 rounded-tr-md`}></div>
      <div className={`${cls} bottom-3 left-3 border-b-2 border-l-2 rounded-bl-md`}></div>
      <div className={`${cls} bottom-3 right-3 border-b-2 border-r-2 rounded-br-md`}></div>
    </>);

}

function Hud({ top, left, right, bottom, label, value }) {
  const style = {};
  if (top) style.top = top;
  if (left) style.left = left;
  if (right) style.right = right;
  if (bottom) style.bottom = bottom;
  return (
    <div className="absolute hidden sm:flex items-center gap-2 z-10" style={style}>
      <div className="w-8 h-px bg-turq-500"></div>
      <div className="bg-white/95 backdrop-blur border border-ink-200 rounded-lg px-2.5 py-1.5 shadow-soft">
        <div className="text-[9px] uppercase tracking-[0.16em] text-ink-400 leading-none">{label}</div>
        <div className="text-[12px] font-semibold text-petrol mt-0.5 leading-none">{value}</div>
      </div>
    </div>);

}

Object.assign(window, { Logo, Reveal, SectionHead, Button, Icon, FootScan, InsoleScan, InsoleTech, FootPhoto, PressurePoint, CornerBrackets, Hud, INSOLE_PATH, FOOT_PX, FOOT_BB });