// Decorative SVG components — floral corners, hearts, timeline icons
// All in hand-drawn "watercolor" line style, matching the sello aesthetic.

const FloralSpray = ({ className = '', style = {}, ...rest }) => (
  <svg className={className} style={style} viewBox="0 0 240 200" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
    <defs>
      <radialGradient id="petalG" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stopColor="#c9d0e3" stopOpacity="0.9" />
        <stop offset="100%" stopColor="#8893B8" stopOpacity="0.4" />
      </radialGradient>
      <radialGradient id="leafG" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stopColor="#b8c4a8" stopOpacity="0.85" />
        <stop offset="100%" stopColor="#7a8770" stopOpacity="0.5" />
      </radialGradient>
    </defs>
    {/* Stems */}
    <path d="M20 170 Q 60 140 100 120 Q 150 100 200 70" stroke="#8a9a7a" strokeWidth="1.2" fill="none" opacity="0.6"/>
    <path d="M30 180 Q 80 160 130 140 Q 180 120 220 110" stroke="#8a9a7a" strokeWidth="1" fill="none" opacity="0.5"/>
    {/* Leaves */}
    <ellipse cx="60" cy="148" rx="14" ry="5" fill="url(#leafG)" transform="rotate(-25 60 148)"/>
    <ellipse cx="90" cy="130" rx="12" ry="4" fill="url(#leafG)" transform="rotate(-15 90 130)"/>
    <ellipse cx="150" cy="108" rx="16" ry="5" fill="url(#leafG)" transform="rotate(-20 150 108)"/>
    <ellipse cx="195" cy="85" rx="13" ry="5" fill="url(#leafG)" transform="rotate(-10 195 85)"/>
    <ellipse cx="115" cy="155" rx="10" ry="4" fill="url(#leafG)" transform="rotate(10 115 155)"/>
    <ellipse cx="170" cy="135" rx="12" ry="4" fill="url(#leafG)" transform="rotate(-5 170 135)"/>
    {/* Main flowers */}
    <g transform="translate(80 135)">
      {[0, 60, 120, 180, 240, 300].map(a => (
        <ellipse key={a} cx="0" cy="-10" rx="7" ry="11" fill="url(#petalG)" transform={`rotate(${a})`} opacity="0.85"/>
      ))}
      <circle r="3" fill="#6b7399"/>
    </g>
    <g transform="translate(140 110) scale(0.85)">
      {[0, 60, 120, 180, 240, 300].map(a => (
        <ellipse key={a} cx="0" cy="-10" rx="7" ry="11" fill="url(#petalG)" transform={`rotate(${a})`} opacity="0.85"/>
      ))}
      <circle r="3" fill="#6b7399"/>
    </g>
    <g transform="translate(200 78) scale(0.7)">
      {[0, 60, 120, 180, 240, 300].map(a => (
        <ellipse key={a} cx="0" cy="-10" rx="7" ry="11" fill="url(#petalG)" transform={`rotate(${a})`} opacity="0.85"/>
      ))}
      <circle r="3" fill="#6b7399"/>
    </g>
    {/* Small buds */}
    <circle cx="45" cy="165" r="4" fill="#a69fc4" opacity="0.7"/>
    <circle cx="170" cy="95" r="3" fill="#a69fc4" opacity="0.6"/>
    <circle cx="110" cy="125" r="3" fill="#a69fc4" opacity="0.6"/>
    <circle cx="220" cy="105" r="4" fill="#a69fc4" opacity="0.7"/>
  </svg>
);

const Heart = ({ size = 14, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
    <path d="M12 21s-8-5.5-8-12a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6.5-8 12-10 12z" opacity="0.85"/>
  </svg>
);

const Divider = () => (
  <div className="divider">
    <div className="divider-line"></div>
  </div>
);

// Timeline icons — simplified line drawings in the reference style
const IconBus = () => (
  <svg width="56" height="56" viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
    <rect x="12" y="10" width="32" height="30" rx="3" />
    <line x1="12" y1="20" x2="44" y2="20" />
    <rect x="16" y="24" width="10" height="7" />
    <rect x="30" y="24" width="10" height="7" />
    <line x1="18" y1="40" x2="18" y2="46" />
    <line x1="38" y1="40" x2="38" y2="46" />
    <circle cx="18" cy="46" r="2" />
    <circle cx="38" cy="46" r="2" />
    <circle cx="16" cy="16" r="1" fill="currentColor"/>
    <circle cx="40" cy="16" r="1" fill="currentColor"/>
  </svg>
);
const IconRings = () => (
  <svg width="56" height="56" viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round">
    <circle cx="22" cy="32" r="10" />
    <circle cx="34" cy="32" r="10" />
    <path d="M18 22 L22 17 L26 22" />
    <path d="M20 18 L22 14 L24 18" />
    <path d="M14 14 Q 16 12 18 14" strokeWidth="1"/>
    <path d="M38 18 Q 40 16 42 18" strokeWidth="1"/>
  </svg>
);
const IconCocktail = () => (
  <svg width="56" height="56" viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
    <path d="M14 14 L22 26 L22 40" />
    <path d="M34 14 L42 14 L36 26 L36 40" />
    <path d="M12 14 L24 14" />
    <path d="M18 44 L26 44" />
    <path d="M32 44 L40 44" />
    <circle cx="20" cy="19" r="1.5" fill="currentColor"/>
    <circle cx="38" cy="19" r="1" fill="currentColor"/>
  </svg>
);
const IconPlate = () => (
  <svg width="56" height="56" viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round">
    <circle cx="28" cy="30" r="14" />
    <circle cx="28" cy="30" r="10" />
    <line x1="14" y1="14" x2="14" y2="30" />
    <line x1="42" y1="14" x2="42" y2="30" />
    <path d="M12 14 L16 14 M40 14 L44 14" />
  </svg>
);
const IconCake = () => (
  <svg width="56" height="56" viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
    <path d="M26 10 Q 28 8 30 10 L30 14 L26 14 Z" />
    <rect x="22" y="16" width="12" height="8" rx="1" />
    <rect x="18" y="26" width="20" height="8" rx="1" />
    <rect x="14" y="36" width="28" height="8" rx="1" />
    <path d="M22 20 Q 25 22 28 20 Q 31 22 34 20" />
    <path d="M18 30 Q 22 32 26 30 Q 30 32 34 30 Q 37 32 38 30" />
  </svg>
);
const IconMic = () => (
  <svg width="56" height="56" viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round">
    <rect x="20" y="8" width="12" height="22" rx="6" />
    <path d="M16 24 Q 16 36 26 38 Q 36 36 36 24" />
    <line x1="26" y1="38" x2="26" y2="46" />
    <line x1="22" y1="46" x2="30" y2="46" />
    <circle cx="40" cy="16" r="1.5" fill="currentColor"/>
    <circle cx="44" cy="22" r="1" fill="currentColor"/>
  </svg>
);
const IconFood = () => (
  <svg width="56" height="56" viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round">
    <path d="M10 32 L46 32 L44 40 L12 40 Z" />
    <circle cx="22" cy="24" r="4" />
    <circle cx="30" cy="22" r="5" />
    <circle cx="38" cy="26" r="3" />
    <path d="M18 18 Q 20 14 22 18 M28 14 Q 30 10 32 14 M36 20 Q 38 16 40 20" strokeWidth="1"/>
  </svg>
);
const IconDisco = () => (
  <svg width="56" height="56" viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round">
    <circle cx="28" cy="28" r="14" />
    <path d="M28 14 L28 42 M14 28 L42 28" />
    <path d="M18 18 L38 38 M38 18 L18 38" />
    <circle cx="28" cy="28" r="8" />
    <path d="M44 12 L46 10 M12 44 L10 46" strokeWidth="1.5"/>
  </svg>
);

const TimelineIcon = ({ kind }) => {
  const map = { bus: IconBus, rings: IconRings, cocktail: IconCocktail, plate: IconPlate, cake: IconCake, mic: IconMic, food: IconFood, disco: IconDisco };
  const C = map[kind] || IconBus;
  return <C />;
};

// Falling petals background
const Petals = ({ count = 18 }) => {
  const petals = Array.from({ length: count }, (_, i) => {
    const left = Math.random() * 100;
    const size = 6 + Math.random() * 10;
    const duration = 18 + Math.random() * 18;
    const delay = -Math.random() * duration;
    const hue = Math.random() > 0.5 ? '#b8c0d8' : '#c9c0d8';
    return { left, size, duration, delay, hue, i };
  });
  return (
    <div className="bg-petals">
      {petals.map(p => (
        <span key={p.i} style={{
          position: 'absolute',
          left: p.left + '%',
          top: -20,
          width: p.size, height: p.size * 1.6,
          background: `radial-gradient(ellipse at 50% 30%, ${p.hue}, transparent 70%)`,
          borderRadius: '50% 50% 50% 50% / 60% 60% 40% 40%',
          opacity: 0.55,
          animation: `fall ${p.duration}s linear infinite`,
          animationDelay: p.delay + 's',
        }} />
      ))}
      <style>{`
        @keyframes fall {
          0% { transform: translateY(0) rotate(0deg); opacity: 0; }
          10% { opacity: 0.55; }
          90% { opacity: 0.55; }
          100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
        }
      `}</style>
    </div>
  );
};

// Ornate top frame wreath (simplified version of the sello)
const Wreath = ({ size = 340 }) => (
  <svg width={size} height={size} viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <radialGradient id="wPetal" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stopColor="#c9d0e3" />
        <stop offset="100%" stopColor="#7a85ac" stopOpacity="0.7" />
      </radialGradient>
      <radialGradient id="wLeaf">
        <stop offset="0%" stopColor="#b8c4a8" />
        <stop offset="100%" stopColor="#6a7760" stopOpacity="0.8"/>
      </radialGradient>
    </defs>
    {/* Gold geometric frame — hexagonal */}
    <g stroke="#c9b88c" strokeWidth="1.2" fill="none" opacity="0.85">
      <path d="M200 30 L 350 110 L 350 260 L 200 340 L 50 260 L 50 110 Z" />
      <path d="M200 42 L 340 118 L 340 252 L 200 328 L 60 252 L 60 118 Z" opacity="0.5"/>
    </g>
    {/* Bottom floral cluster */}
    <g transform="translate(200 290)">
      {/* Big center flower */}
      <g>
        {[0, 45, 90, 135, 180, 225, 270, 315].map(a => (
          <ellipse key={a} cx="0" cy="-16" rx="10" ry="18" fill="url(#wPetal)" transform={`rotate(${a})`} opacity="0.9"/>
        ))}
        <circle r="5" fill="#4a5378"/>
      </g>
      {/* Side flowers */}
      <g transform="translate(-60 10) scale(0.7)">
        {[0, 60, 120, 180, 240, 300].map(a => (
          <ellipse key={a} cx="0" cy="-14" rx="8" ry="14" fill="url(#wPetal)" transform={`rotate(${a})`} opacity="0.85"/>
        ))}
        <circle r="4" fill="#4a5378"/>
      </g>
      <g transform="translate(60 8) scale(0.75)">
        {[0, 60, 120, 180, 240, 300].map(a => (
          <ellipse key={a} cx="0" cy="-14" rx="8" ry="14" fill="url(#wPetal)" transform={`rotate(${a})`} opacity="0.85"/>
        ))}
        <circle r="4" fill="#4a5378"/>
      </g>
      {/* Buds */}
      <g transform="translate(-100 -10) scale(0.5)">
        {[0, 72, 144, 216, 288].map(a => (
          <ellipse key={a} cx="0" cy="-12" rx="7" ry="12" fill="url(#wPetal)" transform={`rotate(${a})`} opacity="0.8"/>
        ))}
        <circle r="3" fill="#4a5378"/>
      </g>
      <g transform="translate(100 -14) scale(0.45)">
        {[0, 72, 144, 216, 288].map(a => (
          <ellipse key={a} cx="0" cy="-12" rx="7" ry="12" fill="url(#wPetal)" transform={`rotate(${a})`} opacity="0.8"/>
        ))}
        <circle r="3" fill="#4a5378"/>
      </g>
      {/* Leaves */}
      <ellipse cx="-35" cy="-20" rx="18" ry="6" fill="url(#wLeaf)" transform="rotate(-40 -35 -20)" opacity="0.8"/>
      <ellipse cx="40" cy="-22" rx="20" ry="7" fill="url(#wLeaf)" transform="rotate(40 40 -22)" opacity="0.8"/>
      <ellipse cx="-80" cy="0" rx="16" ry="5" fill="url(#wLeaf)" transform="rotate(-20 -80 0)" opacity="0.7"/>
      <ellipse cx="80" cy="0" rx="16" ry="5" fill="url(#wLeaf)" transform="rotate(20 80 0)" opacity="0.7"/>
      <ellipse cx="-120" cy="-4" rx="12" ry="4" fill="url(#wLeaf)" transform="rotate(-10 -120 -4)" opacity="0.6"/>
      <ellipse cx="120" cy="-6" rx="12" ry="4" fill="url(#wLeaf)" transform="rotate(10 120 -6)" opacity="0.6"/>
    </g>
    {/* Top small flowers */}
    <g transform="translate(115 85) scale(0.5)">
      {[0, 60, 120, 180, 240, 300].map(a => (
        <ellipse key={a} cx="0" cy="-12" rx="7" ry="12" fill="url(#wPetal)" transform={`rotate(${a})`} opacity="0.7"/>
      ))}
      <circle r="3" fill="#4a5378"/>
    </g>
    <g transform="translate(285 85) scale(0.45)">
      {[0, 60, 120, 180, 240, 300].map(a => (
        <ellipse key={a} cx="0" cy="-12" rx="7" ry="12" fill="url(#wPetal)" transform={`rotate(${a})`} opacity="0.7"/>
      ))}
      <circle r="3" fill="#4a5378"/>
    </g>
  </svg>
);

// Reveal-on-scroll helpers (used by Story photos)
const useReveal = (threshold = 0.15) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { el.classList.add('in'); io.disconnect(); }
    }, { threshold });
    io.observe(el);
    return () => io.disconnect();
  }, [threshold]);
  return ref;
};
const Reveal = ({ children, className = '', style, as: Tag = 'div' }) => {
  const ref = useReveal();
  return <Tag ref={ref} className={`fx-reveal ${className}`} style={style}>{children}</Tag>;
};
const MaskReveal = ({ children, className = '', style, onClick }) => {
  const ref = useReveal();
  return <div ref={ref} className={`fx-mask-reveal ${className}`} style={style} onClick={onClick}>{children}</div>;
};

// Parallax: every element with [data-parallax="0.3"] moves at scroll * factor
const useParallax = () => {
  React.useEffect(() => {
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) return;
    let raf = 0;
    const update = () => {
      const els = document.querySelectorAll('[data-parallax]');
      const sy = window.pageYOffset || document.documentElement.scrollTop;
      const vh = window.innerHeight;
      els.forEach((el) => {
        const factor = parseFloat(el.dataset.parallax) || 0;
        const rect = el.getBoundingClientRect();
        const elementCenter = rect.top + rect.height / 2;
        const fromCenter = elementCenter - vh / 2;
        const offset = -fromCenter * factor;
        el.style.transform = `translate3d(0, ${offset.toFixed(1)}px, 0)`;
      });
    };
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => { update(); raf = 0; });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    update();
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);
};

Object.assign(window, { FloralSpray, Heart, Divider, TimelineIcon, Petals, Wreath, Reveal, MaskReveal, useParallax });
