// Molara — realistic tooth hero visual (SVG/CSS, no external media).

function ToothHero3D() {
  const [paused, setPaused] = React.useState(false);
  const ref = React.useRef(null);
  const [tilt, setTilt] = React.useState({ x: 0, y: 0 });

  const crownPath = `
    M258 64
    C287 45 320 50 343 72
    C358 86 367 105 374 126
    C397 118 421 127 438 148
    C468 186 458 241 437 288
    C423 318 419 346 414 372
    C406 413 376 438 335 436
    C310 435 290 425 273 410
    C260 399 240 399 227 410
    C210 425 190 435 165 436
    C124 438 94 413 86 372
    C81 346 77 318 63 288
    C42 241 32 186 62 148
    C79 127 103 118 126 126
    C133 105 142 86 157 72
    C180 50 213 45 242 64
    C247 67 253 67 258 64 Z
  `;
  const enamelBand = `
    M87 355
    C126 382 177 389 217 365
    C240 351 260 351 283 365
    C323 389 374 382 413 355
    C410 406 376 438 335 436
    C310 435 290 425 273 410
    C260 399 240 399 227 410
    C210 425 190 435 165 436
    C124 438 90 406 87 355 Z
  `;
  const leftRootPath = `
    M164 421
    C144 452 132 504 122 558
    C116 590 101 620 82 617
    C58 613 58 576 66 535
    C77 475 87 423 116 395
    C132 380 153 392 164 421 Z
  `;
  const centerRootPath = `
    M224 416
    C214 469 214 553 226 610
    C232 640 242 657 250 657
    C258 657 268 640 274 610
    C286 553 286 469 276 416
    C260 404 240 404 224 416 Z
  `;
  const rightRootPath = `
    M336 421
    C356 452 368 504 378 558
    C384 590 399 620 418 617
    C442 613 442 576 434 535
    C423 475 413 423 384 395
    C368 380 347 392 336 421 Z
  `;

  const onMove = (e) => {
    const r = ref.current.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width - 0.5;
    const py = (e.clientY - r.top) / r.height - 0.5;
    setTilt({ x: -py * 6, y: px * 8 });
  };
  const onLeave = () => setTilt({ x: 0, y: 0 });

  return (
    <div
      ref={ref}
      onMouseMove={onMove}
      onMouseLeave={onLeave}
      onClick={() => setPaused((p) => !p)}
      className={paused ? 'ml-real-tooth paused' : 'ml-real-tooth'}
      style={{
        position: 'relative',
        height: 560,
        borderRadius: 28,
        overflow: 'hidden',
        cursor: 'grab',
        perspective: 1200,
        background: 'transparent',
      }}
    >
      <div className="ml-real-aura"/>
      <div className="ml-real-orbit"/>
      <svg
        className="ml-real-svg"
        viewBox="0 0 500 700"
        preserveAspectRatio="xMidYMid meet"
        aria-hidden="true"
        style={{
          transform: `translateY(-1%) rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)`,
          transition: 'transform .35s cubic-bezier(.2,.7,.3,1)',
        }}
      >
        <defs>
          <linearGradient id="mlEnamel" x1="118" y1="38" x2="385" y2="458" gradientUnits="userSpaceOnUse">
            <stop offset="0%" stopColor="#fffdf4"/>
            <stop offset="22%" stopColor="#f8f0de"/>
            <stop offset="52%" stopColor="#e7d7bf"/>
            <stop offset="78%" stopColor="#d4c0a4"/>
            <stop offset="100%" stopColor="#a98465"/>
          </linearGradient>
          <linearGradient id="mlRoot" x1="126" y1="372" x2="380" y2="655" gradientUnits="userSpaceOnUse">
            <stop offset="0%" stopColor="#e8d5bb"/>
            <stop offset="42%" stopColor="#c9aa8a"/>
            <stop offset="74%" stopColor="#a67c5d"/>
            <stop offset="100%" stopColor="#6d4e3d"/>
          </linearGradient>
          <radialGradient id="mlCuspLight" cx="47%" cy="21%" r="57%">
            <stop offset="0%" stopColor="#ffffff" stopOpacity=".92"/>
            <stop offset="38%" stopColor="#fff3db" stopOpacity=".72"/>
            <stop offset="78%" stopColor="#c9ad8d" stopOpacity=".18"/>
            <stop offset="100%" stopColor="#8c6a52" stopOpacity=".2"/>
          </radialGradient>
          <radialGradient id="mlOcclusal" cx="50%" cy="24%" r="46%">
            <stop offset="0%" stopColor="#f5e2bf" stopOpacity=".76"/>
            <stop offset="58%" stopColor="#9e7050" stopOpacity=".18"/>
            <stop offset="100%" stopColor="#5a3b2e" stopOpacity="0"/>
          </radialGradient>
          <radialGradient id="mlGloss" cx="32%" cy="14%" r="40%">
            <stop offset="0%" stopColor="#ffffff" stopOpacity=".95"/>
            <stop offset="42%" stopColor="#ffffff" stopOpacity=".38"/>
            <stop offset="100%" stopColor="#ffffff" stopOpacity="0"/>
          </radialGradient>
          <filter id="mlSoftShadow" x="-35%" y="-35%" width="170%" height="170%">
            <feDropShadow dx="0" dy="28" stdDeviation="20" floodColor="#000000" floodOpacity=".42"/>
          </filter>
          <filter id="mlToothBlur" x="-30%" y="-30%" width="160%" height="160%">
            <feGaussianBlur stdDeviation="1.6"/>
          </filter>
        </defs>

        <ellipse className="ml-real-floor" cx="250" cy="646" rx="137" ry="26"/>
        <g className="ml-real-tooth-object" filter="url(#mlSoftShadow)">
          <path className="ml-real-root" d={leftRootPath}/>
          <path className="ml-real-root" d={rightRootPath}/>
          <path className="ml-real-root ml-real-root-center" d={centerRootPath}/>
          <path className="ml-real-root-shade" d="M86 427 C112 450 143 455 167 430 C150 471 139 526 126 583 C113 555 115 485 128 435 C117 430 101 427 86 427 Z"/>
          <path className="ml-real-root-shade right" d="M414 427 C388 450 357 455 333 430 C350 471 361 526 374 583 C387 555 385 485 372 435 C383 430 399 427 414 427 Z"/>
          <path className="ml-real-crown" d={crownPath}/>
          <path className="ml-real-cusp-light" d="M93 169 C135 125 190 121 225 150 C241 163 259 163 275 150 C310 121 365 125 407 169 C366 154 322 159 288 188 C266 207 234 207 212 188 C178 159 134 154 93 169 Z"/>
          <path className="ml-real-occlusal" d="M121 166 C165 102 216 111 239 148 C244 156 256 156 261 148 C284 111 335 102 379 166 C342 149 305 157 279 188 C263 207 237 207 221 188 C195 157 158 149 121 166 Z"/>
          <path className="ml-real-neck" d={enamelBand}/>
          <path className="ml-real-outline" d={crownPath}/>
          <path className="ml-real-root-outline" d={leftRootPath}/>
          <path className="ml-real-root-outline" d={centerRootPath}/>
          <path className="ml-real-root-outline" d={rightRootPath}/>
          <ellipse className="ml-real-gloss" cx="181" cy="177" rx="76" ry="128"/>
          <path className="ml-real-side-shadow" d="M343 80 C380 119 393 191 374 267 C362 318 365 375 326 418 C370 430 404 403 413 354 C420 315 438 280 447 237 C461 170 419 115 374 126 C368 107 358 87 343 80 Z"/>
          <g className="ml-real-grooves">
            <path d="M133 160 C169 184 206 190 239 175 C246 172 254 172 261 175 C294 190 331 184 367 160"/>
            <path d="M250 118 C248 157 248 199 250 246"/>
            <path d="M185 146 C200 170 218 188 239 202"/>
            <path d="M315 146 C300 170 282 188 261 202"/>
            <path d="M157 205 C184 217 214 220 242 211"/>
            <path d="M343 205 C316 217 286 220 258 211"/>
          </g>
          <g className="ml-real-root-lines">
            <path d="M118 420 C105 476 94 550 88 606"/>
            <path d="M250 423 C247 487 248 566 251 637"/>
            <path d="M382 420 C395 476 406 550 412 606"/>
          </g>
        </g>
      </svg>

      <style>{`
        .ml-real-svg {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          transform-style: preserve-3d;
        }
        .ml-real-aura {
          position: absolute;
          inset: 8% 2% 4%;
          background:
            radial-gradient(ellipse at 50% 52%, rgba(255,255,255,.2), rgba(126,234,255,.08) 42%, transparent 72%);
          filter: blur(20px);
          animation: ml-real-breathe 5.6s ease-in-out infinite;
        }
        .ml-real-orbit {
          position: absolute;
          left: 13%;
          right: 13%;
          bottom: 6%;
          height: 38%;
          border: 1px solid rgba(126,234,255,.12);
          border-top-color: rgba(255,255,255,.18);
          border-radius: 50%;
          transform: rotateX(66deg);
          opacity: .58;
        }
        .ml-real-floor {
          fill: rgba(0,0,0,.42);
          filter: blur(12px);
          animation: ml-real-shadow 5.2s ease-in-out infinite;
        }
        .ml-real-tooth-object {
          transform-origin: 250px 355px;
          animation: ml-real-float 5.2s ease-in-out infinite;
        }
        .ml-real-crown {
          fill: url(#mlEnamel);
          stroke: rgba(255,255,255,.46);
          stroke-width: 1.8;
        }
        .ml-real-root {
          fill: url(#mlRoot);
          stroke: rgba(255,247,231,.22);
          stroke-width: 1.2;
        }
        .ml-real-root-center {
          fill: rgba(214,190,162,.86);
        }
        .ml-real-root-shade {
          fill: rgba(63,42,31,.16);
          filter: url(#mlToothBlur);
        }
        .ml-real-root-shade.right {
          transform-origin: 250px 500px;
        }
        .ml-real-cusp-light {
          fill: url(#mlCuspLight);
          mix-blend-mode: screen;
          opacity: .72;
        }
        .ml-real-occlusal {
          fill: url(#mlOcclusal);
          opacity: .78;
          mix-blend-mode: multiply;
        }
        .ml-real-neck {
          fill: rgba(86,54,38,.16);
          filter: url(#mlToothBlur);
          mix-blend-mode: multiply;
        }
        .ml-real-side-shadow {
          fill: rgba(50,31,24,.2);
          filter: url(#mlToothBlur);
          mix-blend-mode: multiply;
        }
        .ml-real-outline,
        .ml-real-root-outline {
          fill: transparent;
          stroke: rgba(255,251,241,.48);
          stroke-width: 1.4;
        }
        .ml-real-root-outline {
          stroke: rgba(255,236,207,.22);
        }
        .ml-real-gloss {
          fill: url(#mlGloss);
          opacity: .58;
          mix-blend-mode: screen;
          animation: ml-real-gloss 6.2s ease-in-out infinite;
        }
        .ml-real-grooves path {
          fill: none;
          stroke: rgba(81,49,34,.46);
          stroke-width: 2.4;
          stroke-linecap: round;
          stroke-linejoin: round;
          filter: url(#mlToothBlur);
        }
        .ml-real-root-lines path {
          fill: none;
          stroke: rgba(77,49,37,.2);
          stroke-width: 1.8;
          stroke-linecap: round;
          filter: url(#mlToothBlur);
        }
        @keyframes ml-real-float {
          0%, 100% { transform: translateY(0) rotateZ(-1.5deg); }
          50% { transform: translateY(-13px) rotateZ(1.2deg); }
        }
        @keyframes ml-real-breathe {
          0%, 100% { opacity: .55; transform: scale(.97); }
          50% { opacity: .86; transform: scale(1.04); }
        }
        @keyframes ml-real-shadow {
          0%, 100% { opacity: .28; transform: scaleX(.88); }
          50% { opacity: .46; transform: scaleX(1.07); }
        }
        @keyframes ml-real-gloss {
          0%, 100% { opacity: .34; transform: translateX(-8px); }
          50% { opacity: .7; transform: translateX(18px); }
        }
        .ml-real-tooth.paused * { animation-play-state: paused !important; }
        @media (prefers-reduced-motion: reduce) {
          .ml-real-tooth * { animation-duration: 0s !important; animation-iteration-count: 1 !important; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { ToothHero3D });