/* globals React, ReactDOM, ReactHelmet, framerMotion */

/* ---------- Safe shims ---------- */
const Helmet = (typeof ReactHelmet !== 'undefined' && ReactHelmet.Helmet)
  ? ReactHelmet.Helmet
  : ({children}) => null;

const { motion: MotionLib } = (typeof framerMotion !== 'undefined' ? framerMotion : {});
const motion = MotionLib || new Proxy({}, { get: () => (props) => <div {...props} /> });

/* ---------- Helpers ---------- */
function cn(...inputs) {
  const classes = [];
  inputs.forEach((i) => {
    if (!i) return;
    if (typeof i === 'string') classes.push(i);
    else if (Array.isArray(i)) classes.push(cn(...i));
    else if (typeof i === 'object') for (const k in i) if (i[k]) classes.push(k);
  });
  // simple de-dupe
  const seen = new Set();
  const out = [];
  for (const c of classes.join(' ').split(/\s+/)) {
    if (!seen.has(c)) { seen.add(c); out.push(c); }
  }
  return out.join(' ');
}

/* ---------- Button ---------- */
const Button = React.forwardRef(({ className = '', variant = 'default', size = 'default', asChild = false, ...props }, ref) => {
  const base = 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50';
  const variants = {
    default: 'bg-emerald-600 text-white hover:bg-emerald-700',
    destructive: 'bg-red-600 text-white hover:bg-red-700',
    outline: 'border border-gray-300 bg-transparent hover:bg-gray-100',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
    ghost: 'hover:bg-gray-100',
    link: 'text-emerald-600 underline-offset-4 hover:underline',
  };
  const sizes = { default: 'h-10 px-4 py-2', sm: 'h-9 px-3 rounded-md', lg: 'h-11 px-8 rounded-md', icon: 'h-10 w-10' };
  const Comp = asChild ? 'span' : 'button';
  return <Comp ref={ref} className={[base, variants[variant]||'', sizes[size]||'', className].join(' ')} {...props} />;
});
Button.displayName = 'Button';

/* ---------- Toast system ---------- */
function Toaster() {
  const [toasts, setToasts] = React.useState([]);
  React.useEffect(() => {
    window.__wp_toast_add__ = (t) => {
      const id = Date.now() + Math.random();
      setToasts((p) => [...p, { id, ...t }]);
      setTimeout(() => setToasts((p) => p.filter(x => x.id !== id)), 4500);
    };
  }, []);
  const close = (id) => setToasts((p) => p.filter(x => x.id !== id));
  return (
    <div className="fixed top-0 z-[100] w-full p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:w-auto sm:max-w-md">
      <div className="flex flex-col gap-3 sm:items-end">
        {toasts.map(({id,title,description,variant}) => (
          <div key={id} className={[
            'group relative pointer-events-auto w-full overflow-hidden rounded-md border p-4 pr-10 shadow-lg backdrop-blur-sm transition-all',
            variant==='destructive' ? 'border-red-500/30 bg-red-600/20 text-red-50' : 'border-emerald-500/20 bg-slate-900/80 text-slate-100'
          ].join(' ')}>
            <button onClick={()=>close(id)} className="absolute right-2 top-2 rounded p-1 text-white/60 hover:text-white" aria-label="Close">
              <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
            </button>
            {title ? <div className="text-sm font-semibold">{title}</div> : null}
            {description ? <div className="text-sm opacity-90 mt-1">{description}</div> : null}
          </div>
        ))}
      </div>
    </div>
  );
}
function useToast() {
  const toast = React.useCallback((opts) => {
    if (window.__wp_toast_add__) window.__wp_toast_add__(opts||{});
  }, []);
  return { toast };
}

/* ---------- Inline icons ---------- */
const MountainIcon = ({ className }) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 20l7-12 4 7 2-3 5 8H3z"/><path d="M14 9l2-3 5 8"/></svg>;
const ArrowDownIcon = ({ className }) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14"/><path d="M19 12l-7 7-7-7"/></svg>;
const MapPinIcon = ({ className }) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 21s-6-4.35-6-10a6 6 0 0112 0c0 5.65-6 10-6 10z"/><circle cx="12" cy="11" r="2"/></svg>;
const TrendingUpIcon = ({ className }) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>;
const ClockIcon = ({ className }) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>;
const BackpackIcon = ({ className }) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 7v13h16V7"/><path d="M12 3v4"/><path d="M9 21V9h6v12"/></svg>;
const CompassIcon = ({ className }) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg>;
const FootprintsIcon = ({ className }) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="7" cy="7" r="3"/><path d="M7 10v10"/><circle cx="17" cy="17" r="3"/><path d="M17 20v1"/></svg>;
const SunIcon = ({ className }) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>;
const QuoteIcon = ({ className }) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M17 6H21V10H17zM3 6H7V10H3z"/><path d="M7 10a5 5 0 0 0-4 5v3h4v-3h2V10H7zM21 10a5 5 0 0 0-4 5v3h4v-3h2V10h-2z"/></svg>;
const FacebookIcon = ({ className }) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg>;
const InstagramIcon = ({ className }) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z"/><line x1="17.5" y1="6.5" x2="17.5" y2="6.5"/></svg>;
const TwitterIcon = ({ className }) => <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M23 3a10.9 10.9 0 01-3.14 1.53A4.48 4.48 0 0022.43.36a9 9 0 01-2.86 1.1A4.52 4.52 0 0016 0a4.5 4.5 0 00-4.39 5.55A12.94 12.94 0 013 1s-4 9 5 13a13.37 13.37 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/></svg>;

/* ---------- Components ---------- */
const Hero = () => {
  const { toast } = useToast();
  const handleExploreClick = () => {
    const el = document.getElementById('trails');
    if (el) el.scrollIntoView({ behavior: 'smooth' });
  };
  const handleJoinClick = () => {
    toast({ title: '🚧 Функцијата доаѓа наскоро!', description: 'Оваа функција сè уште не е имплементирана – но не грижете се! Можете да ја побарате во вашето следно барање! 🚀' });
  };
  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-b from-emerald-950/50 via-slate-900/80 to-slate-900 z-10"></div>
      <div className="absolute inset-0 opacity-20">
        <img alt="Величествени планински врвови при изгрејсонце" src="https://images.unsplash.com/photo-1679847725574-89b639528500" className="w-full h-full object-cover"/>
      </div>
      <div className="relative z-20 text-center px-4 max-w-5xl mx-auto">
        <motion.div initial={{opacity:0,y:-30}} animate={{opacity:1,y:0}} transition={{duration:0.8}} className="mb-6">
          <MountainIcon className="w-20 h-20 mx-auto text-emerald-400 mb-4" />
        </motion.div>
        <motion.h1 initial={{opacity:0,y:30}} animate={{opacity:1,y:0}} transition={{duration:0.8,delay:0.2}} className="text-6xl md:text-8xl font-extrabold mb-6 bg-gradient-to-r from-emerald-300 via-teal-200 to-cyan-300 bg-clip-text text-transparent">Двете Уши</motion.h1>
        <motion.p initial={{opacity:0,y:30}} animate={{opacity:1,y:0}} transition={{duration:0.8,delay:0.4}} className="text-xl md:text-2xl text-gray-200 mb-8 max-w-3xl mx-auto leading-relaxed">
          Освојувајте врвови, прегрнете ја природата и откријте ја возбудата на планинарењето. Вашата следна авантура започнува овде! ⛰️
        </motion.p>
        <motion.div initial={{opacity:0,y:30}} animate={{opacity:1,y:0}} transition={{duration:0.8,delay:0.6}} className="flex flex-col sm:flex-row gap-4 justify-center items-center">
          <Button onClick={handleExploreClick} size="lg" className="bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 text-white font-semibold px-8 py-6 text-lg rounded-full shadow-2xl transform hover:scale-105 transition-all">Истражи Патеки</Button>
          <Button onClick={handleJoinClick} size="lg" variant="outline" className="border-2 border-emerald-400 text-emerald-300 hover:bg-emerald-400/20 font-semibold px-8 py-6 text-lg rounded-full shadow-xl transform hover:scale-105 transition-all">Придружи се на Заедницата</Button>
        </motion.div>
        <motion.div initial={{opacity:0}} animate={{opacity:1}} transition={{duration:1,delay:1.2}} className="mt-16">
          <ArrowDownIcon className="w-8 h-8 mx-auto text-emerald-400 animate-bounce" />
        </motion.div>
      </div>
    </section>
  );
};

const FeaturedTrails = () => {
  const { toast } = useToast();
  const trails = [
    { name: 'Тито Врв', location: 'Шар Планина, Македонија', difficulty: 'Напредно', duration: '8-10 часа', elevation: '2,748 m', description: 'Највисокиот врв на Шар Планина со неверојатни панорамски глетки' },
    { name: 'Голем Корaб', location: 'Планина Кораб, Македонија/Албанија', difficulty: 'Експертско', duration: '10-12 часа', elevation: '2,764 m', description: 'Највисокиот врв во Македонија, вистински предизвик за искусни планинари' },
    { name: 'Пелистер', location: 'Баба Планина, Македонија', difficulty: 'Умерено', duration: '5-7 часа', elevation: '2,601 m', description: 'Патека низ борова шума до кристално чистите Пелистерски Очи' }
  ];
  const handleViewDetails = () => {
    toast({ title: '🚧 Детали за патеката доаѓаат наскоро!', description: 'Оваа функција сè уште не е имплементирана – но не грижете се! Можете да ја побарате во вашето следно барање! 🚀' });
  };
  return (
    <section id="trails" className="py-20 px-4 relative">
      <div className="absolute inset-0 bg-gradient-to-b from-slate-900 via-emerald-950/30 to-slate-900"></div>
      <div className="relative z-10 max-w-7xl mx-auto">
        <motion.div initial={{opacity:0,y:30}} whileInView={{opacity:1,y:0}} transition={{duration:0.8}} viewport={{once:true}} className="text-center mb-16">
          <h2 className="text-5xl md:text-6xl font-bold mb-4 bg-gradient-to-r from-emerald-300 to-teal-300 bg-clip-text text-transparent">Истакнати Патеки</h2>
          <p className="text-xl text-gray-300 max-w-2xl mx-auto">Откријте рачно избрани планинарски рути кои ќе ви го одземат здивот! 🥾</p>
        </motion.div>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {trails.map((trail, i) => (
            <motion.div key={i} initial={{opacity:0,y:50}} whileInView={{opacity:1,y:0}} transition={{duration:0.6,delay:i*0.2}} viewport={{once:true}} whileHover={{y:-10}} className="group relative bg-gradient-to-br from-slate-800/80 to-emerald-900/40 backdrop-blur-sm rounded-2xl overflow-hidden border border-emerald-500/20 hover:border-emerald-400/50 transition-all shadow-2xl hover:shadow-emerald-500/20 transform hover:-translate-y-2">
              <div className="h-48 overflow-hidden">
                <img className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" alt={`${trail.name} планинарска патека`} src="https://images.unsplash.com/photo-1694966547593-8294a89bce6d" />
              </div>
              <div className="p-6">
                <h3 className="text-2xl font-bold text-emerald-300 mb-2">{trail.name}</h3>
                <div className="flex items-center text-gray-300 mb-3"><MapPinIcon className="w-4 h-4 mr-2 text-emerald-400"/><span className="text-sm">{trail.location}</span></div>
                <p className="text-gray-400 mb-4 text-sm leading-relaxed">{trail.description}</p>
                <div className="space-y-2 mb-4">
                  <div className="flex items-center justify-between text-sm"><span className="flex items-center text-gray-300"><TrendingUpIcon className="w-4 h-4 mr-2 text-orange-400"/>Тежина:</span><span className={'font-semibold ' + (trail.difficulty==='Напредно'?'text-orange-400':trail.difficulty==='Експертско'?'text-red-400':'text-yellow-400')}>{trail.difficulty}</span></div>
                  <div className="flex items-center justify-between text-sm"><span className="flex items-center text-gray-300"><ClockIcon className="w-4 h-4 mr-2 text-blue-400"/>Времетраење:</span><span className="font-semibold text-blue-300">{trail.duration}</span></div>
                  <div className="flex items-center justify-between text-sm"><span className="text-gray-300">Висинска разлика:</span><span className="font-semibold text-emerald-300">{trail.elevation}</span></div>
                </div>
                <Button onClick={()=>handleViewDetails(trail.name)} className="w-full bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-semibold rounded-lg">Повеќе Детали</Button>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

const GearSection = () => {
  const gearItems = [
    { icon: BackpackIcon, title: 'Суштински Ранец', description: 'Изберете удобен, издржлив ранец со правилна распределба на тежината', color: 'from-blue-500 to-cyan-500' },
    { icon: FootprintsIcon, title: 'Планинарски Чевли', description: 'Инвестирајте во квалитетни чизми со поддршка за глуждот и водоотпорна заштита', color: 'from-orange-500 to-red-500' },
    { icon: CompassIcon, title: 'Навигациски Алатки', description: 'GPS уред, мапа и компас за безбедна навигација по патеката', color: 'from-purple-500 to-pink-500' },
    { icon: SunIcon, title: 'Опрема за Време', description: 'Слоевита облека, водоотпорна јакна и основни средства за заштита од сонце', color: 'from-yellow-500 to-orange-500' },
  ];
  return (
    <section className="py-20 px-4 relative">
      <div className="absolute inset-0 bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900"></div>
      <div className="relative z-10 max-w-7xl mx-auto">
        <motion.div initial={{opacity:0,y:30}} whileInView={{opacity:1,y:0}} transition={{duration:0.8}} viewport={{once:true}} className="text-center mb-16">
          <h2 className="text-5xl md:text-6xl font-bold mb-4 bg-gradient-to-r from-orange-300 to-yellow-300 bg-clip-text text-transparent">Водич за Основна Опрема</h2>
          <p className="text-xl text-gray-300 max-w-2xl mx-auto">Подгответе се за успех со нашите експертски препораки! 🎒</p>
        </motion.div>
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {gearItems.map((item,i)=>{
            const Icon=item.icon;
            return (
              <motion.div key={i} initial={{opacity:0,scale:0.8}} whileInView={{opacity:1,scale:1}} transition={{duration:0.5,delay:i*0.1}} viewport={{once:true}} whileHover={{y:-10}} className="relative group">
                <div className="bg-gradient-to-br from-slate-800/90 to-slate-900/90 backdrop-blur-sm rounded-2xl p-6 border border-gray-700/50 hover:border-emerald-500/50 transition-all shadow-xl hover:shadow-2xl">
                  <div className={`w-16 h-16 rounded-full bg-gradient-to-br ${item.color} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}>
                    <Icon className="w-8 h-8 text-white"/>
                  </div>
                  <h3 className="text-xl font-bold text-white mb-2">{item.title}</h3>
                  <p className="text-gray-400 text-sm leading-relaxed">{item.description}</p>
                </div>
              </motion.div>
            )
          })}
        </div>
      </div>
    </section>
  );
};

const AdventureStories = () => {
  const stories = [
    { quote: "Достигнувањето на врвот при изгрејсонце беше најмагичниот момент во мојот живот. Погледот апсолутно вредеше за секој чекор!", author: "Сара Мичел", trail: "Патека на Орловиот Врв" },
    { quote: "Кружната Патека Маглеста Долина ги надмина сите очекувања. Совршена комбинација на предизвик и убавина. Едвај чекам да се вратам!", author: "Џејмс Родригез", trail: "Кружна Патека Маглеста Долина" },
    { quote: "Патеката на Врвот Гребен ги тестираше моите граници, но чувството на постигнување беше неверојатно. Оваа заедница е супер!", author: "Емили Чен", trail: "Патека на Врвот Гребен" }
  ];
  return (
    <section className="py-20 px-4 relative">
      <div className="absolute inset-0 bg-gradient-to-b from-slate-900 via-emerald-950/20 to-slate-900"></div>
      <div className="relative z-10 max-w-7xl mx-auto">
        <motion.div initial={{opacity:0,y:30}} whileInView={{opacity:1,y:0}} transition={{duration:0.8}} viewport={{once:true}} className="text-center mb-16">
          <h2 className="text-5xl md:text-6xl font-bold mb-4 bg-gradient-to-r from-teal-300 to-cyan-300 bg-clip-text text-transparent">Авантуристички Приказни</h2>
          <p className="text-xl text-gray-300 max-w-2xl mx-auto">Вистински искуства од колеги планинари ентузијасти! 🌟</p>
        </motion.div>
        <div className="grid md:grid-cols-3 gap-8">
          {stories.map((s,i)=>(
            <motion.div key={i} initial={{opacity:0,y:50}} whileInView={{opacity:1,y:0}} transition={{duration:0.6,delay:i*0.2}} viewport={{once:true}} className="relative bg-gradient-to-br from-emerald-900/30 to-slate-800/50 backdrop-blur-sm rounded-2xl p-8 border border-emerald-500/20 hover:border-emerald-400/40 transition-all shadow-xl hover:shadow-2xl transform hover:-translate-y-2">
              <QuoteIcon className="w-12 h-12 text-emerald-400/30 mb-4"/>
              <p className="text-gray-200 italic mb-6 leading-relaxed">"{s.quote}"</p>
              <div className="border-t border-emerald-500/20 pt-4">
                <p className="font-semibold text-emerald-300">{s.author}</p>
                <p className="text-sm text-gray-400">{s.trail}</p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

const CallToAdventure = () => {
  const { toast } = useToast();
  const handleGetStarted = () => toast({ title: "🚧 Функцијата доаѓа наскоро!", description: "Оваа функција сè уште не е имплементирана – но не грижете се! Можете да ја побарате во вашето следно барање! 🚀" });
  return (
    <section className="py-24 px-4 relative overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-br from-emerald-600/20 via-teal-600/20 to-cyan-600/20"></div>
      <motion.div initial={{opacity:0,scale:0.9}} whileInView={{opacity:1,scale:1}} transition={{duration:0.8}} viewport={{once:true}} className="relative z-10 max-w-4xl mx-auto text-center">
        <h2 className="text-5xl md:text-6xl font-extrabold mb-6 bg-gradient-to-r from-emerald-200 via-teal-200 to-cyan-200 bg-clip-text text-transparent">Подготвени за Вашата Следна Авантура?</h2>
        <p className="text-xl md:text-2xl text-gray-200 mb-10 leading-relaxed">Придружете им се на илјадници планинари кои ги истражуваат најубавите патеки во светот. Вашата планина ве чека! 🏔️</p>
        <Button onClick={handleGetStarted} size="lg" className="bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 text-white font-bold px-12 py-7 text-xl rounded-full shadow-2xl transform hover:scale-110 transition-all">Започнете Денес</Button>
      </motion.div>
    </section>
  );
};

const Footer = () => {
  const { toast } = useToast();
  const click = (p)=>toast({ title: "🚧 Социјалните мрежи доаѓаат наскоро!", description: "Оваа функција сè уште не е имплементирана – но не грижете се! Можете да ја побарате во вашето следно барање! 🚀" });
  return (
    <footer className="bg-slate-950/80 backdrop-blur-sm border-t border-emerald-500/20 py-12 px-4">
      <div className="max-w-7xl mx-auto">
        <div className="grid md:grid-cols-3 gap-8 mb-8">
          <div>
            <div className="flex items-center mb-4">
              <MountainIcon className="w-8 h-8 text-emerald-400 mr-2"/>
              <span className="text-2xl font-bold text-emerald-300">Двете Уши</span>
            </div>
            <p className="text-gray-400 text-sm">Вашиот врвен придружник за планински планинарски авантури и истражување на отворено.</p>
          </div>
          <div>
            <span className="text-lg font-semibold text-emerald-300 mb-4 block">Брзи Линкови</span>
            <ul className="space-y-2 text-gray-400 text-sm">
              <li className="hover:text-emerald-300 cursor-pointer">За Нас</li>
              <li className="hover:text-emerald-300 cursor-pointer">Водичи за Патеки</li>
              <li className="hover:text-emerald-300 cursor-pointer">Совети за Безбедност</li>
              <li className="hover:text-emerald-300 cursor-pointer">Контакт</li>
            </ul>
          </div>
          <div>
            <span className="text-lg font-semibold text-emerald-300 mb-4 block">Поврзете се со Нас</span>
            <div className="flex gap-4">
              <button onClick={()=>click('Facebook')} className="w-10 h-10 rounded-full bg-emerald-600/20 hover:bg-emerald-600/40 flex items-center justify-center"><FacebookIcon className="w-5 h-5 text-emerald-300"/></button>
              <button onClick={()=>click('Instagram')} className="w-10 h-10 rounded-full bg-emerald-600/20 hover:bg-emerald-600/40 flex items-center justify-center"><InstagramIcon className="w-5 h-5 text-emerald-300"/></button>
              <button onClick={()=>click('Twitter')} className="w-10 h-10 rounded-full bg-emerald-600/20 hover:bg-emerald-600/40 flex items-center justify-center"><TwitterIcon className="w-5 h-5 text-emerald-300"/></button>
            </div>
          </div>
        </div>
        <div className="border-t border-emerald-500/20 pt-8 text-center">
          <p className="text-gray-500 text-sm">© 2025 Двете Уши. Сите права задржани. Авантурирајте одговорно! 🌲</p>
        </div>
      </div>
    </footer>
  );
};

/* Optional extras you can insert anywhere if desired */
const HeroImage = () => (
  <div className="flex justify-center items-center">
    <img src="https://imagedelivery.net/LqiWLm-3MGbYHtFuUbcBtA/119580eb-abd9-4191-b93a-f01938786700/public" alt="Hostinger Horizons" />
  </div>
);

const WelcomeMessage = () => (
  <motion.p className="text-xl md:text-2xl text-white max-w-2xl mx-auto" initial={{opacity:0}} animate={{opacity:1}} transition={{duration:0.5,delay:0.5}}>
    Hello there! I'm <span className="font-semibold text-purple-300">Horizons</span>, your AI coding companion.
    I'm here to help you build amazing web application!
  </motion.p>
);

/* ---------- App + Boot ---------- */
function App() {
  return (
    <>
      <Helmet><title>Двете Уши - Планинарски Авантури</title></Helmet>
      <div className="min-h-screen overflow-hidden">
        <Hero />
        <FeaturedTrails />
        <GearSection />
        <AdventureStories />
        <CallToAdventure />
        <Footer />
        <Toaster />
      </div>
    </>
  );
}

const rootEl = document.getElementById('root');
if (rootEl) {
  ReactDOM.createRoot(rootEl).render(<App />);
} else {
  document.body.innerHTML += '<div style="padding:16px;color:#fff;background:#0b1020">Error: #root not found</div>';
}