/* Her Nail — Key Visual SVG (evocation of the granddaughter + grandmother illustration) */
/* Inspired by the hapinal key visual: oval frame, ribbons (rose/mint/lavender), pearls, cream base. */

function KeyVisualSVG({ showLabel = true }) {
  return (
    <div style={{ width: "100%", height: "100%", position: "relative", overflow: "hidden" }}>
      <img src="assets/hero-key-visual.png?v=3" alt="Her Nail key visual"
           style={{
             width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", display: "block",
             WebkitMaskImage: "linear-gradient(to right, transparent 0%, rgba(0,0,0,0.3) 2%, rgba(0,0,0,0.85) 5%, #000 8%, #000 92%, rgba(0,0,0,0.85) 95%, rgba(0,0,0,0.3) 98%, transparent 100%)",
             maskImage: "linear-gradient(to right, transparent 0%, rgba(0,0,0,0.3) 2%, rgba(0,0,0,0.85) 5%, #000 8%, #000 92%, rgba(0,0,0,0.85) 95%, rgba(0,0,0,0.3) 98%, transparent 100%)",
           }}/>
    </div>
  );
}

function KeyVisualSVGLegacy({ showLabel = true }) {
  return (
    <svg viewBox="0 0 720 1000" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block" }}>
      <defs>
        <radialGradient id="kv-bg" cx="50%" cy="45%" r="70%">
          <stop offset="0%" stopColor="#fdf6ec"/>
          <stop offset="70%" stopColor="#f4e7d5"/>
          <stop offset="100%" stopColor="#ecd9c2"/>
        </radialGradient>
        <linearGradient id="rib-rose" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#f2b8bf"/>
          <stop offset="100%" stopColor="#c97b87"/>
        </linearGradient>
        <linearGradient id="rib-mint" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#d6eae1"/>
          <stop offset="100%" stopColor="#8fb8a9"/>
        </linearGradient>
        <linearGradient id="rib-lav" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#d5c6e0"/>
          <stop offset="100%" stopColor="#9c88b0"/>
        </linearGradient>
        <radialGradient id="pearl" cx="35%" cy="30%">
          <stop offset="0%" stopColor="#ffffff"/>
          <stop offset="60%" stopColor="#f4ebe0"/>
          <stop offset="100%" stopColor="#d8c6b0"/>
        </radialGradient>
        <pattern id="dots" width="14" height="14" patternUnits="userSpaceOnUse">
          <circle cx="2" cy="2" r="1.1" fill="#e8d4bc" opacity="0.5"/>
        </pattern>
      </defs>

      {/* Cream background */}
      <rect width="720" height="1000" fill="url(#kv-bg)"/>

      {/* Dotted halftone accents */}
      <rect x="0" y="0" width="180" height="200" fill="url(#dots)" opacity="0.7"/>
      <rect x="540" y="800" width="180" height="200" fill="url(#dots)" opacity="0.6"/>

      {/* Oval frame */}
      <ellipse cx="360" cy="500" rx="280" ry="360" fill="none" stroke="#c97b87" strokeWidth="1.5" opacity="0.55"/>
      <ellipse cx="360" cy="500" rx="268" ry="348" fill="none" stroke="#c97b87" strokeWidth="0.5" opacity="0.4"/>

      {/* Inner cream oval (where the figures sit) */}
      <ellipse cx="360" cy="500" rx="258" ry="338" fill="#fbf3e6" opacity="0.7"/>

      {/* FIGURES — abstracted forms (granddaughter left, grandmother right) */}
      <g clipPath="url(#figclip)">
        <defs>
          <clipPath id="figclip">
            <ellipse cx="360" cy="500" rx="258" ry="338"/>
          </clipPath>
        </defs>

        {/* Grandmother — right (silver-blonde hair, warm skin, lace collar) */}
        <g>
          {/* body/shoulder lace */}
          <path d="M340 640 Q360 600 420 600 Q540 600 560 700 L560 860 L320 860 Z" fill="#f0e7d8"/>
          <path d="M340 640 Q360 600 420 600 Q540 600 560 700 L560 860 L320 860 Z" fill="url(#dots)" opacity="0.6"/>
          {/* neck */}
          <ellipse cx="450" cy="555" rx="32" ry="30" fill="#f2d8c3"/>
          {/* head */}
          <ellipse cx="455" cy="480" rx="80" ry="90" fill="#f5dcc8"/>
          {/* hair — blonde/silver */}
          <path d="M385 450 Q380 390 460 380 Q540 380 550 460 Q555 490 540 500 Q530 440 480 430 Q420 440 400 490 Q390 500 385 450 Z" fill="#e9d5b0"/>
          <path d="M395 450 Q395 410 460 405 Q525 405 535 465" fill="none" stroke="#c9a876" strokeWidth="1" opacity="0.6"/>
          {/* cheek blush */}
          <ellipse cx="420" cy="510" rx="14" ry="8" fill="#e8a7ae" opacity="0.45"/>
          {/* smiling eye (curved line) */}
          <path d="M420 485 Q430 478 442 485" fill="none" stroke="#3a2a24" strokeWidth="2" strokeLinecap="round"/>
          <path d="M475 485 Q485 478 497 485" fill="none" stroke="#3a2a24" strokeWidth="2" strokeLinecap="round"/>
          {/* smile */}
          <path d="M440 525 Q458 538 478 525" fill="none" stroke="#8a5a52" strokeWidth="2" strokeLinecap="round"/>

          {/* Hand raised to cheek — showing painted nails */}
          <ellipse cx="400" cy="555" rx="28" ry="22" fill="#f2d8c3" transform="rotate(-18 400 555)"/>
          {/* fingers */}
          <g transform="translate(380 540) rotate(-20)">
            <rect x="0" y="0" width="9" height="26" rx="4" fill="#f2d8c3"/>
            <rect x="12" y="-4" width="9" height="28" rx="4" fill="#f2d8c3"/>
            <rect x="24" y="-2" width="9" height="27" rx="4" fill="#f2d8c3"/>
            <rect x="36" y="2" width="9" height="24" rx="4" fill="#f2d8c3"/>
            {/* painted nails — multicolor */}
            <rect x="0.5" y="0" width="8" height="5" rx="2" fill="#e8a7ae"/>
            <rect x="12.5" y="-4" width="8" height="5" rx="2" fill="#bfd9cf"/>
            <rect x="24.5" y="-2" width="8" height="5" rx="2" fill="#c8b8d4"/>
            <rect x="36.5" y="2" width="8" height="5" rx="2" fill="#f2b8bf"/>
          </g>
        </g>

        {/* Granddaughter — left (dark hair, holding hand mirror) */}
        <g>
          {/* shoulder */}
          <path d="M140 700 Q180 620 260 620 Q340 620 360 700 L360 860 L140 860 Z" fill="#d9c8b0"/>
          {/* kimono pattern hint */}
          <circle cx="250" cy="720" r="30" fill="#e8a7ae" opacity="0.5"/>
          <circle cx="240" cy="755" r="22" fill="#c97b87" opacity="0.35"/>
          {/* neck */}
          <ellipse cx="265" cy="570" rx="28" ry="28" fill="#f0d2b8"/>
          {/* head */}
          <ellipse cx="270" cy="490" rx="85" ry="95" fill="#f2d4ba"/>
          {/* dark hair — pulled back bun */}
          <path d="M195 460 Q190 380 275 370 Q350 370 355 450 Q355 480 345 490 Q340 410 280 405 Q220 410 205 495 Q200 490 195 460 Z" fill="#3a2a24"/>
          <circle cx="350" cy="420" r="28" fill="#3a2a24"/>
          {/* cheek blush */}
          <ellipse cx="238" cy="520" rx="14" ry="8" fill="#e8a7ae" opacity="0.5"/>
          {/* smiling eyes */}
          <path d="M235 495 Q247 485 260 495" fill="none" stroke="#2a1a14" strokeWidth="2.2" strokeLinecap="round"/>
          <path d="M290 495 Q302 485 315 495" fill="none" stroke="#2a1a14" strokeWidth="2.2" strokeLinecap="round"/>
          {/* big smile */}
          <path d="M255 545 Q275 565 300 548" fill="none" stroke="#8a3a3a" strokeWidth="2.5" strokeLinecap="round"/>
          <path d="M258 548 Q275 558 295 550" fill="#ffffff"/>

          {/* hand mirror — golden */}
          <g transform="translate(160 620) rotate(-15)">
            <ellipse cx="60" cy="50" rx="55" ry="62" fill="#d4b078"/>
            <ellipse cx="60" cy="50" rx="48" ry="55" fill="#e8cc94"/>
            <ellipse cx="45" cy="35" rx="15" ry="20" fill="#f5e2b8" opacity="0.7"/>
            {/* handle */}
            <rect x="50" y="108" width="20" height="100" rx="8" fill="#c9a876"/>
            <rect x="52" y="110" width="4" height="96" fill="#e8cc94" opacity="0.6"/>
          </g>
        </g>

      </g>

      {/* RIBBONS — curling around the oval */}
      {/* Rose ribbon — top left curl */}
      <path d="M80 100 Q200 60 280 140 Q360 210 260 260 Q180 290 200 200 Q220 140 320 130"
            fill="none" stroke="url(#rib-rose)" strokeWidth="16" strokeLinecap="round" opacity="0.92"/>
      {/* Mint ribbon — top right */}
      <path d="M640 90 Q540 110 520 200 Q520 260 600 250 Q660 230 620 170 Q580 130 680 100"
            fill="none" stroke="url(#rib-mint)" strokeWidth="14" strokeLinecap="round" opacity="0.88"/>
      {/* Lavender ribbon — center top weaving */}
      <path d="M300 60 Q400 100 440 180 Q460 240 380 240 Q320 220 360 150"
            fill="none" stroke="url(#rib-lav)" strokeWidth="12" strokeLinecap="round" opacity="0.85"/>
      {/* Rose ribbon — bottom left */}
      <path d="M60 780 Q160 740 240 800 Q300 860 220 900 Q140 920 180 830 Q200 780 260 790"
            fill="none" stroke="url(#rib-rose)" strokeWidth="14" strokeLinecap="round" opacity="0.9"/>
      {/* Mint ribbon — bottom right */}
      <path d="M480 820 Q560 780 640 830 Q700 880 620 920 Q540 920 580 860"
            fill="none" stroke="url(#rib-mint)" strokeWidth="13" strokeLinecap="round" opacity="0.85"/>

      {/* Pearls */}
      {[
        [120, 60, 10], [580, 120, 12], [680, 380, 9],
        [60, 480, 11], [640, 620, 10], [80, 780, 8],
        [480, 80, 9], [260, 940, 10], [540, 960, 9],
        [180, 980, 8], [380, 940, 7]
      ].map(([cx, cy, r], i) => (
        <g key={i}>
          <circle cx={cx} cy={cy} r={r} fill="url(#pearl)"/>
          <circle cx={cx - r*0.3} cy={cy - r*0.3} r={r*0.25} fill="#ffffff" opacity="0.8"/>
        </g>
      ))}

      {/* Sparkles */}
      {[[160, 880], [560, 780], [380, 80]].map(([cx, cy], i) => (
        <g key={i} transform={`translate(${cx} ${cy})`}>
          <path d="M0 -8 L1.5 -1.5 L8 0 L1.5 1.5 L0 8 L-1.5 1.5 L-8 0 L-1.5 -1.5 Z" fill="#c9a876" opacity="0.7"/>
        </g>
      ))}

      {showLabel && (
        <text x="360" y="988" textAnchor="middle" fill="#9a867a" fontSize="9" letterSpacing="3" fontFamily="monospace">
          KEY VISUAL — GRANDMOTHER × GRANDDAUGHTER
        </text>
      )}
    </svg>
  );
}

Object.assign(window, { KeyVisualSVG });