const { useState, useEffect, useMemo } = React;

/* ============================================================
   BOTANICAL SVG ELEMENTS
   ============================================================ */

/* Single leaf outline with center vein and side veins */
function LeafSVG({ size = 40, rotation = 0, flip = false, color = 'currentColor', strokeW = 1, style = {} }) {
  const sc = flip ? -1 : 1;
  return (
    <svg width={size} height={size * 1.4} viewBox="0 0 40 56" fill="none"
         stroke={color} strokeLinecap="round" strokeLinejoin="round"
         style={{ transform: `rotate(${rotation}deg) scaleX(${sc})`, ...style }}>
      <path d="M20,4 C13,12 8,24 10,36 C12,44 16,50 20,52 C24,50 28,44 30,36 C32,24 27,12 20,4Z" strokeWidth={strokeW}/>
      <path d="M20,8 L20,50" strokeWidth={strokeW * 0.5}/>
      <path d="M20,16 L13,12" strokeWidth={strokeW * 0.4}/>
      <path d="M20,16 L27,12" strokeWidth={strokeW * 0.4}/>
      <path d="M20,24 L11,20" strokeWidth={strokeW * 0.4}/>
      <path d="M20,24 L29,20" strokeWidth={strokeW * 0.4}/>
      <path d="M20,32 L12,30" strokeWidth={strokeW * 0.35}/>
      <path d="M20,32 L28,30" strokeWidth={strokeW * 0.35}/>
      <path d="M20,40 L14,39" strokeWidth={strokeW * 0.3}/>
      <path d="M20,40 L26,39" strokeWidth={strokeW * 0.3}/>
    </svg>
  );
}

/* Small simple leaf for scatter patterns */
function SmallLeafSVG({ size = 20, rotation = 0, color = 'currentColor', strokeW = 0.7 }) {
  return (
    <svg width={size} height={size * 1.3} viewBox="0 0 20 26" fill="none"
         stroke={color} strokeLinecap="round"
         style={{ transform: `rotate(${rotation}deg)` }}>
      <path d="M10,2 C6,7 4,14 5,19 C7,23 9,25 10,25 C11,25 13,23 15,19 C16,14 14,7 10,2Z" strokeWidth={strokeW}/>
      <path d="M10,5 L10,23" strokeWidth={strokeW * 0.5}/>
      <path d="M10,10 L7,8" strokeWidth={strokeW * 0.35}/>
      <path d="M10,10 L13,8" strokeWidth={strokeW * 0.35}/>
      <path d="M10,15 L7,14" strokeWidth={strokeW * 0.3}/>
      <path d="M10,15 L13,14" strokeWidth={strokeW * 0.3}/>
    </svg>
  );
}

/* Fern branch — a curving stem with small leaflets */
function FernSVG({ width = 80, rotation = 0, color = 'currentColor', strokeW = 0.7 }) {
  return (
    <svg width={width} height={width * 0.4} viewBox="0 0 80 32" fill="none"
         stroke={color} strokeLinecap="round"
         style={{ transform: `rotate(${rotation}deg)` }}>
      <path d="M4,16 Q20,14 40,16 Q60,18 76,14" strokeWidth={strokeW}/>
      <path d="M16,15 Q19,10 17,6" strokeWidth={strokeW * 0.6}/>
      <path d="M28,16 Q25,20 27,25" strokeWidth={strokeW * 0.6}/>
      <path d="M42,16 Q45,11 43,7" strokeWidth={strokeW * 0.6}/>
      <path d="M54,17 Q51,21 53,26" strokeWidth={strokeW * 0.6}/>
      <path d="M66,15 Q69,10 67,6" strokeWidth={strokeW * 0.6}/>
    </svg>
  );
}


/* ============================================================
   BOTANICAL TEXTURE — positioned leaves on sections
   ============================================================ */
const TEXTURE_PRESETS = {
  hero: [
    { type: 'leaf', x: '4%', y: '12%', size: 52, rot: -20, opacity: 0.08 },
    { type: 'leaf', x: '92%', y: '8%', size: 40, rot: 35, opacity: 0.06, flip: true },
    { type: 'small', x: '88%', y: '65%', size: 28, rot: -50, opacity: 0.07 },
    { type: 'fern', x: '6%', y: '78%', w: 90, rot: 10, opacity: 0.06 },
    { type: 'small', x: '15%', y: '45%', size: 22, rot: 40, opacity: 0.05 },
    { type: 'leaf', x: '80%', y: '82%', size: 36, rot: 20, opacity: 0.05 },
  ],
  sectionA: [
    { type: 'leaf', x: '3%', y: '8%', size: 38, rot: -15, opacity: 0.05 },
    { type: 'small', x: '96%', y: '55%', size: 24, rot: 30, opacity: 0.04 },
    { type: 'fern', x: '88%', y: '12%', w: 70, rot: -20, opacity: 0.04 },
  ],
  sectionB: [
    { type: 'small', x: '5%', y: '70%', size: 26, rot: -25, opacity: 0.05 },
    { type: 'leaf', x: '94%', y: '20%', size: 34, rot: 40, opacity: 0.04, flip: true },
    { type: 'fern', x: '10%', y: '15%', w: 65, rot: 5, opacity: 0.04 },
  ],
  sectionC: [
    { type: 'leaf', x: '92%', y: '75%', size: 42, rot: -30, opacity: 0.05 },
    { type: 'small', x: '4%', y: '30%', size: 22, rot: 50, opacity: 0.04 },
    { type: 'fern', x: '85%', y: '10%', w: 75, rot: -15, opacity: 0.04 },
    { type: 'small', x: '8%', y: '85%', size: 20, rot: -10, opacity: 0.03 },
  ],
  dark: [
    { type: 'leaf', x: '5%', y: '10%', size: 55, rot: -18, opacity: 0.06 },
    { type: 'leaf', x: '90%', y: '70%', size: 45, rot: 25, opacity: 0.05, flip: true },
    { type: 'fern', x: '80%', y: '8%', w: 100, rot: -10, opacity: 0.04 },
    { type: 'small', x: '12%', y: '80%', size: 28, rot: 35, opacity: 0.05 },
    { type: 'small', x: '50%', y: '90%', size: 24, rot: -40, opacity: 0.04 },
  ],
};

function BotanicalTexture({ preset = 'sectionA', color = '#2D5F4A', intensity = 1 }) {
  const items = TEXTURE_PRESETS[preset] || TEXTURE_PRESETS.sectionA;
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none', zIndex: 1 }}>
      {items.map((item, i) => {
        const op = (item.opacity || 0.05) * intensity;
        const st = { position: 'absolute', left: item.x, top: item.y, opacity: op, color };
        if (item.type === 'leaf') return <LeafSVG key={i} size={item.size} rotation={item.rot} flip={item.flip} color={color} style={st} />;
        if (item.type === 'small') return <div key={i} style={st}><SmallLeafSVG size={item.size} rotation={item.rot} color={color} /></div>;
        if (item.type === 'fern') return <div key={i} style={st}><FernSVG width={item.w} rotation={item.rot} color={color} /></div>;
        return null;
      })}
    </div>
  );
}


/* ============================================================
   VINE DIVIDER — horizontal botanical separator
   ============================================================ */
function VineDivider({ color = '#2D5F4A', accentColor = '#C4A265', opacity = 0.2, intensity = 1 }) {
  const op = opacity * intensity;
  return (
    <div className="vine-divider-wrap" style={{ opacity: op }}>
      <svg viewBox="0 0 1200 44" fill="none" strokeLinecap="round" strokeLinejoin="round"
           style={{ width: '100%', height: 44, display: 'block' }}>
        {/* Main vine curve */}
        <path d="M0,22 C80,20 160,24 240,22 S400,20 480,22 S640,24 720,22 S880,20 960,22 S1120,24 1200,22"
              stroke={color} strokeWidth="1"/>
        {/* Small leaves branching off the vine */}
        {[
          { x: 140, y: 18, r: -35 },
          { x: 300, y: 26, r: 30 },
          { x: 460, y: 16, r: -25 },
          { x: 740, y: 28, r: 35 },
          { x: 900, y: 16, r: -30 },
          { x: 1060, y: 26, r: 25 },
        ].map((l, i) => (
          <g key={i} transform={`translate(${l.x},${l.y}) rotate(${l.r})`}>
            <path d="M0,5 C2,1 6,0 7,4 C6,7 2,7 0,5Z" stroke={color} strokeWidth="0.7"/>
            <line x1="0.5" y1="5" x2="6" y2="3.5" stroke={color} strokeWidth="0.35"/>
          </g>
        ))}
        {/* Center ornament — gold diamond */}
        <path d="M600,16 L606,22 L600,28 L594,22 Z" fill={accentColor} opacity="0.5"/>
        <path d="M600,18 L604,22 L600,26 L596,22 Z" fill="none" stroke={accentColor} strokeWidth="0.5" opacity="0.8"/>
      </svg>
    </div>
  );
}


/* ============================================================
   HEADLINES
   ============================================================ */
const HEADLINES_V3 = {
  charme: "Seu Evento em um Sítio com Charme e Natureza em Jacarepaguá",
  alugue: "Alugue o Sítio Perfeito para Seu Evento no Rio de Janeiro",
  celebre: "Celebre em um Espaço com Natureza e Estrutura em Jacarepaguá"
};

/* Rotating headline hook */
function useRotatingHeadline() {
  const headlines = Object.values(HEADLINES_V3);
  const [idx, setIdx] = useState(0);
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    const timer = setInterval(() => {
      setVisible(false);
      setTimeout(() => {
        setIdx(i => (i + 1) % headlines.length);
        setVisible(true);
      }, 700);
    }, 5000);
    return () => clearInterval(timer);
  }, []);

  return {
    text: headlines[idx],
    style: {
      opacity: visible ? 1 : 0,
      transform: visible ? 'translateY(0)' : 'translateY(-16px)',
      transition: 'opacity 0.6s ease, transform 0.6s ease',
    },
  };
}


/* ============================================================
   SITE HEADER V3 — ELEGANT FOREST GREEN
   ============================================================ */
function SiteHeaderV3({ scrolled, mobileOpen, setMobileOpen }) {
  const linkClick = () => setMobileOpen(false);
  return (
    <header className={`header-v3 ${scrolled ? 'scrolled' : ''}`}>
      <div className="container">
        <div className="nav-inner">
          <a href="#inicio" className="logo-v3">
            <img src="images/logo.png" alt="Casa da Mãe Joana" style={{ height: 40, borderRadius: '50%' }}/>
            <span>Casa da Mãe Joana</span>
          </a>
          <nav className={`nav-links-v3 ${mobileOpen ? 'open' : ''}`}>
            <a href="#sobre" className="nav-link-v3" onClick={linkClick}>O Espaço</a>
            <a href="#eventos" className="nav-link-v3" onClick={linkClick}>Eventos</a>
            <a href="#como-funciona" className="nav-link-v3" onClick={linkClick}>Como Funciona</a>
            <a href="#contato" className="nav-link-v3" onClick={linkClick}>Contato</a>
            <a href="#contato" className="btn-pill btn-pill-forest" onClick={linkClick}>Orçamento</a>
          </nav>
          <button className="mobile-toggle-v3" onClick={() => setMobileOpen(!mobileOpen)} aria-label="Menu">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke={scrolled ? '#1B3C34' : 'white'} strokeWidth="2" strokeLinecap="round">
              {mobileOpen
                ? <><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></>
                : <><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></>
              }
            </svg>
          </button>
        </div>
      </div>
    </header>
  );
}


/* ============================================================
   HERO V3 — LIGHT WITH BOTANICAL OVERLAY
   ============================================================ */
function HeroV3({ tweaks }) {
  const wa = `https://wa.me/${tweaks.whatsapp}?text=${encodeURIComponent('Olá! Gostaria de saber mais sobre o aluguel do sítio para evento.')}`;
  const { text: headlineText, style: headlineStyle } = useRotatingHeadline();
  const openWa = (e) => { e.preventDefault(); if (window.trackConversion) window.trackConversion(); window.open(wa, '_blank'); };

  return (
    <section className="hero-v3" id="inicio">
      <div className="hero-v3-overlay"></div>
      <BotanicalTexture preset="hero" color="rgba(123,175,138,0.5)" intensity={tweaks.botanicalIntensity || 1} />

      <div className="container hero-v3-inner">
        {/* Social proof */}
        <div className="hero-v3-proof fade-up">
          <div className="stars-row">
            {[...Array(5)].map((_,i) => (
              <svg key={i} width="18" height="18" viewBox="0 0 16 16" fill="#D4BA85">
                <path d="M8 0l2.35 4.76 5.25.76-3.8 3.7.9 5.24L8 12.08l-4.7 2.38.9-5.24-3.8-3.7 5.25-.76z"/>
              </svg>
            ))}
          </div>
          <span className="hero-v3-proof-text">Espaço avaliado por quem celebrou aqui</span>
        </div>

        <span className="section-label" style={{ color: 'var(--gold-light)', marginBottom: 16, display: 'block' }}>
          Sítio para Eventos · Jacarepaguá — RJ
        </span>

        <h1 className="hero-v3-h1" style={headlineStyle}>{headlineText}</h1>

        <p className="hero-v3-sub fade-up">
          Natureza, charme e estrutura completa para casamentos, aniversários,
          confraternizações e eventos privativos. Na Taquara, Jacarepaguá —
          com fácil acesso e atendimento personalizado.
        </p>

        <div className="hero-v3-ctas fade-up">
          <a href={wa} onClick={openWa} className="btn-pill btn-pill-green btn-pill-lg">
            <WhatsAppIcon size={18}/> Solicitar Orçamento
          </a>
          <a href="#contato" className="btn-pill btn-pill-outline-light btn-pill-lg">
            Agendar Visita
          </a>
        </div>

        {/* Photo grid */}
        <div className="hero-v3-photos fade-up">
          <div className="hero-photo-card hero-photo-sm">
            <img src="images/area-externa-mesas.jpg" alt="Área externa"
                 style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: `center ${tweaks.heroPos1}%` }}/>
          </div>
          <div className="hero-photo-card hero-photo-lg">
            <img src="images/jardim-noite-luzes.jpg" alt="Jardim com luzes"
                 style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: `center ${tweaks.heroPos2}%` }}/>
          </div>
          <div className="hero-photo-card hero-photo-sm">
            <img src="images/piscina-flores.jpg" alt="Piscina com flores"
                 style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: `center ${tweaks.heroPos3}%` }}/>
          </div>
        </div>

        {/* Chips */}
        <div className="hero-v3-badges fade-up">
          {['Casamentos', 'Aniversários', '15 Anos', 'Corporativo', 'Confraternizações'].map(b => (
            <span key={b} className="badge-v3">{b}</span>
          ))}
        </div>
      </div>

      {/* Leaf pattern transition to cream */}
      <div className="hero-v3-leaf-zone"></div>
    </section>
  );
}


/* ============================================================
   VALUE PROPS V3 — FOREST GREEN STRIP (V1 STYLE)
   ============================================================ */
function ValuePropsV3({ intensity = 1 }) {
  const items = [
    { title: 'Em Meio à Natureza', desc: 'Evento cercado de verde e paisagem natural' },
    { title: 'Estrutura Completa', desc: 'Espaço preparado para receber seus convidados' },
    { title: 'Jacarepaguá — RJ', desc: 'Localização estratégica com fácil acesso' },
    { title: 'Gastronomia Própria', desc: 'Cardápio especial como parte da experiência' },
    { title: 'Personalização', desc: 'Cada evento é único e a equipe cuida dos detalhes' },
  ];
  return (
    <section className="value-strip-v3">
      <BotanicalTexture preset="dark" color="rgba(123,175,138,0.5)" intensity={intensity} />
      <div className="container">
        <div className="value-grid-v3">
          {items.map((it, i) => (
            <div key={i} className="fade-up" style={{ transitionDelay: `${i * 0.08}s` }}>
              <div className="value-dot-v3"><div className="value-dot-inner-v3"></div></div>
              <h4 className="value-title-v3">{it.title}</h4>
              <p className="value-desc-v3">{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}


/* ============================================================
   DARK CONTACT V3 — WITH BOTANICAL OVERLAY
   ============================================================ */
function DarkContactV3({ tweaks }) {
  const [form, setForm] = useState({ nome: '', whatsapp: '', tipo: '', data: '', convidados: '', mensagem: '' });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const EVENT_TYPES = ['Casamento', 'Aniversário', '15 Anos', 'Corporativo', 'Confraternização', 'Evento Privativo', 'Outro'];

  const set = (k, v) => { setForm(f => ({ ...f, [k]: v })); setErrors(e => ({ ...e, [k]: '' })); };
  const validate = () => {
    const e = {};
    if (!form.nome.trim()) e.nome = 'Informe seu nome';
    if (!form.whatsapp.trim()) e.whatsapp = 'Informe seu WhatsApp';
    if (!form.tipo) e.tipo = 'Selecione o tipo de evento';
    return e;
  };
  const submit = (ev) => {
    ev.preventDefault();
    const e = validate();
    if (Object.keys(e).length) { setErrors(e); return; }
    const msg = `Olá! Meu nome é ${form.nome}.\nEvento: ${form.tipo}\nData: ${form.data || 'A definir'}\nConvidados: ${form.convidados || 'A definir'}\n${form.mensagem ? 'Obs: ' + form.mensagem : ''}`;
    if (window.trackConversion) window.trackConversion();
    window.open(`https://wa.me/${tweaks.whatsapp}?text=${encodeURIComponent(msg)}`, '_blank');
    setSent(true);
  };

  const wa = `https://wa.me/${tweaks.whatsapp}?text=${encodeURIComponent('Olá! Gostaria de solicitar um orçamento para evento no sítio.')}`;

  return (
    <section className="dark-contact" id="contato">
      <BotanicalTexture preset="dark" color="rgba(123,175,138,0.35)" intensity={tweaks.botanicalIntensity || 1} />
      <div className="container">
        <div className="dark-contact-inner">
          {/* Left info */}
          <div className="fade-up">
            <span className="section-label-v3" style={{ color: 'var(--gold)' }}>Próximo Passo</span>
            <img src="images/logo.png" alt="Casa da Mãe Joana" style={{ height: 56, borderRadius: '50%', marginBottom: 16 }}/>
            <h2 style={{ color: 'white', fontFamily: 'var(--font-display)', fontSize: 'clamp(1.8rem, 4vw, 2.6rem)', fontWeight: 500, marginBottom: 16 }}>
              Orçamento Rápido
            </h2>
            <p style={{ color: 'rgba(255,255,255,0.7)', fontSize: 16, lineHeight: 1.7, marginBottom: 32 }}>
              Envie sua solicitação agora mesmo. A equipe da Casa da Mãe Joana responde com agilidade.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div className="dark-contact-detail">
                <WhatsAppIcon size={20} color="#25D366"/>
                <span>WhatsApp: (21) 97279-9589</span>
              </div>
              <div className="dark-contact-detail">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="var(--leaf)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M10 10.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"/><path d="M10 18s-6-5.34-6-9.5a6 6 0 1112 0c0 4.16-6 9.5-6 9.5z"/>
                </svg>
                <span>Estrada do Pau da Fome, 117 — Taquara / Jacarepaguá, RJ</span>
              </div>
            </div>
            <a href={wa} onClick={e => { e.preventDefault(); if (window.trackConversion) window.trackConversion(); window.open(wa, '_blank'); }} className="btn-pill btn-pill-green btn-pill-lg" style={{ marginTop: 24, display: 'inline-flex' }}>
              <WhatsAppIcon size={18}/> WhatsApp Direto
            </a>
          </div>

          {/* Right form */}
          {sent ? (
            <div className="dark-form-card fade-up" style={{ textAlign: 'center', padding: '48px 36px' }}>
              <div style={{ fontSize: 48, marginBottom: 16, color: 'var(--sage)' }}>✓</div>
              <h3 style={{ color: 'var(--forest)', marginBottom: 8 }}>Solicitação Enviada</h3>
              <p style={{ color: 'var(--stone)', fontSize: 15, marginBottom: 24 }}>Sua mensagem foi encaminhada pelo WhatsApp.</p>
              <button className="btn-pill btn-pill-forest" onClick={() => setSent(false)}>Nova Solicitação</button>
            </div>
          ) : (
            <form className="dark-form-card fade-up delay-2" onSubmit={submit}>
              <div className="form-group-v3">
                <input className={`form-input-v3 ${errors.nome ? 'error' : ''}`} value={form.nome}
                  onChange={e => set('nome', e.target.value)} placeholder="Seu nome completo *"/>
                {errors.nome && <span className="form-error-v3">{errors.nome}</span>}
              </div>
              <div className="form-group-v3">
                <input className={`form-input-v3 ${errors.whatsapp ? 'error' : ''}`} value={form.whatsapp}
                  onChange={e => set('whatsapp', e.target.value)} placeholder="Seu WhatsApp *"/>
                {errors.whatsapp && <span className="form-error-v3">{errors.whatsapp}</span>}
              </div>
              <div className="form-group-v3">
                <select className={`form-input-v3 ${errors.tipo ? 'error' : ''}`} value={form.tipo}
                  onChange={e => set('tipo', e.target.value)}>
                  <option value="">Tipo de evento *</option>
                  {EVENT_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
                </select>
                {errors.tipo && <span className="form-error-v3">{errors.tipo}</span>}
              </div>
              <div className="form-group-v3">
                <input className="form-input-v3" value={form.mensagem}
                  onChange={e => set('mensagem', e.target.value)} placeholder="Alguma observação? (opcional)"/>
              </div>
              <button type="submit" className="btn-pill btn-pill-forest" style={{ width: '100%', padding: '14px 0', fontSize: 16 }}>
                Enviar Solicitação
              </button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}


/* ============================================================
   BOTANICAL SECTION WRAPPERS
   — Wrap existing sections with leaf overlays
   ============================================================ */
function BotanicalAbout({ tweaks }) {
  return (
    <div style={{ position: 'relative' }}>
      <BotanicalTexture preset="sectionA" color="#2D5F4A" intensity={tweaks.botanicalIntensity || 1} />
      <AboutSection tweaks={tweaks} />
    </div>
  );
}

function BotanicalStructure({ tweaks }) {
  return (
    <div style={{ position: 'relative' }}>
      <BotanicalTexture preset="sectionB" color="#2D5F4A" intensity={tweaks.botanicalIntensity || 1} />
      <StructureSection />
    </div>
  );
}

function BotanicalGallery({ tweaks }) {
  return (
    <div style={{ position: 'relative' }}>
      <BotanicalTexture preset="sectionC" color="#2D5F4A" intensity={tweaks.botanicalIntensity || 1} />
      <GallerySection tweaks={tweaks} />
    </div>
  );
}

function BotanicalTestimonials({ tweaks }) {
  return (
    <div style={{ position: 'relative' }}>
      <BotanicalTexture preset="sectionA" color="#2D5F4A" intensity={tweaks.botanicalIntensity || 1} />
      <Testimonials />
    </div>
  );
}


/* ============================================================
   FALLING LEAVES — animated overlay across the whole page
   ============================================================ */

/* Inline leaf SVG for the falling animation — matches the pattern style */
function FallingLeafSVG({ size = 22, color = '#8FAE8F' }) {
  return (
    <svg width={size} height={size * 1.7} viewBox="0 0 28 56" fill="none"
         stroke={color} strokeLinecap="round" strokeLinejoin="round">
      <path d="M14,3 C9,12 5,24 6,35 C7,42 11,52 14,55 C17,52 21,42 22,35 C23,24 19,12 14,3Z" strokeWidth="1"/>
      <path d="M14,7 L14,52" strokeWidth=".5"/>
      <path d="M14,17 L9.5,13.5" strokeWidth=".4"/><path d="M14,17 L18.5,13.5" strokeWidth=".4"/>
      <path d="M14,27 L8.5,23.5" strokeWidth=".35"/><path d="M14,27 L19.5,23.5" strokeWidth=".35"/>
      <path d="M14,37 L10,35" strokeWidth=".3"/><path d="M14,37 L18,35" strokeWidth=".3"/>
    </svg>
  );
}

const FALLING_LEAF_DATA = [
  { left: '3%',  size: 20, delay: 0,  fallDur: 26, swayDur: 7,  sway: 'leafSway',    fall: 'leafFall',     op: 0.09 },
  { left: '11%', size: 15, delay: 6,  fallDur: 34, swayDur: 9,  sway: 'leafSwayAlt',  fall: 'leafFallSlow', op: 0.06 },
  { left: '20%', size: 24, delay: 13, fallDur: 24, swayDur: 6,  sway: 'leafSway',     fall: 'leafFall',     op: 0.08 },
  { left: '30%', size: 17, delay: 3,  fallDur: 30, swayDur: 8,  sway: 'leafSwayAlt',  fall: 'leafFallSlow', op: 0.06 },
  { left: '40%', size: 21, delay: 10, fallDur: 28, swayDur: 7,  sway: 'leafSway',     fall: 'leafFall',     op: 0.07 },
  { left: '50%', size: 14, delay: 18, fallDur: 36, swayDur: 10, sway: 'leafSwayAlt',  fall: 'leafFallSlow', op: 0.05 },
  { left: '58%', size: 22, delay: 7,  fallDur: 25, swayDur: 7,  sway: 'leafSway',     fall: 'leafFall',     op: 0.08 },
  { left: '67%', size: 18, delay: 15, fallDur: 32, swayDur: 8,  sway: 'leafSwayAlt',  fall: 'leafFallSlow', op: 0.06 },
  { left: '76%', size: 25, delay: 2,  fallDur: 23, swayDur: 6,  sway: 'leafSway',     fall: 'leafFall',     op: 0.09 },
  { left: '84%', size: 16, delay: 11, fallDur: 30, swayDur: 9,  sway: 'leafSwayAlt',  fall: 'leafFallSlow', op: 0.06 },
  { left: '91%', size: 19, delay: 5,  fallDur: 28, swayDur: 7,  sway: 'leafSway',     fall: 'leafFall',     op: 0.07 },
  { left: '96%', size: 13, delay: 20, fallDur: 35, swayDur: 10, sway: 'leafSwayAlt',  fall: 'leafFallSlow', op: 0.05 },
];

function FallingLeaves({ intensity = 1 }) {
  if (intensity <= 0) return null;
  return (
    <div style={{ position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 1, overflow: 'hidden' }}
         aria-hidden="true">
      {FALLING_LEAF_DATA.map((leaf, i) => (
        <div key={i} className="falling-leaf-outer" style={{
          position: 'absolute',
          left: leaf.left,
          top: 0,
          opacity: leaf.op * intensity,
          animation: `${leaf.sway} ${leaf.swayDur}s ease-in-out ${leaf.delay}s infinite`,
          willChange: 'transform',
        }}>
          <div className="falling-leaf-inner" style={{
            animation: `${leaf.fall} ${leaf.fallDur}s linear ${leaf.delay}s infinite`,
            willChange: 'transform',
          }}>
            <FallingLeafSVG size={leaf.size} />
          </div>
        </div>
      ))}
    </div>
  );
}


Object.assign(window, {
  LeafSVG, SmallLeafSVG, FernSVG,
  BotanicalTexture, VineDivider, FallingLeaves,
  SiteHeaderV3, HeroV3, ValuePropsV3, DarkContactV3,
  BotanicalAbout, BotanicalStructure, BotanicalGallery, BotanicalTestimonials,
});