// Hero.jsx — Oblak i Sunce UI Kit
// Auto-advancing hero slider. Sadržaj slajdova dolazi iz CMS-a (admin: Sadržaj -> Početna strana);
// "theme" polje bira paletu, tekstovi i linkovi su slobodni.

const T = window.OBS_TOKENS;

const HERO_THEMES = {
  terracotta: { accent: T.terracotta, bg: `linear-gradient(165deg, ${T.cream} 0%, ${T.creamDark} 40%, #EDE3D4 100%)`, archColor: T.birchLight },
  skyBlue: { accent: T.skyBlue, bg: `linear-gradient(165deg, #F0F5F9 0%, ${T.skyBluePale} 40%, #C8DDE8 100%)`, archColor: T.skyBluePale },
  sage: { accent: '#7BA87B', bg: `linear-gradient(165deg, ${T.cream} 0%, ${T.sagePale} 40%, #D4E2CE 100%)`, archColor: T.sagePale },
};

// Fallback dok se CMS ne učita (isti kao DEFAULT_CONTENT.hero na bekendu)
const FALLBACK_SLIDES = [
  { subtitle: "Dobrodošli u Oblak i Sunce", title: "Svaki dan je\nnova avantura", desc: "Otkrijte premium proizvode za vaše najdragocjenije — od vodećih svjetskih brendova, pažljivo biranih samo za vas.", cta: "Istraži ponudu", ctaLink: "pages/category.html", secondaryCta: "Svi brendovi", secondaryLink: "pages/brands.html", theme: "terracotta" },
];

function CloudSVG({ style, color = "white", opacity = 0.15 }) {
  return (
    <svg viewBox="0 0 200 100" style={{ ...style, opacity }} fill={color}>
      <path d="M170,80 Q170,60 150,55 Q155,30 130,25 Q115,5 90,15 Q70,0 50,15 Q25,10 20,35 Q0,40 5,60 Q0,80 20,80 Z" />
    </svg>
  );
}

function Hero() {
  const [cur, setCur] = React.useState(0);
  const [slides, setSlides] = React.useState(FALLBACK_SLIDES);
  const [stats, setStats] = React.useState([["6.900+", "proizvoda u ponudi"], ["20+", "vodećih brendova"], ["2.000+", "zadovoljnih roditelja"]]);
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (window.OBS_API && window.OBS_API.getContent) {
      window.OBS_API.getContent().then(c => {
        if (c.hero?.slides?.length) setSlides(c.hero.slides);
        if (c.trustStats?.items?.length) setStats(c.trustStats.items.slice(0, 3));
      });
    }
  }, []);

  React.useEffect(() => {
    ref.current = setInterval(() => setCur(p => (p + 1) % slides.length), 6000);
    return () => clearInterval(ref.current);
  }, [slides.length]);

  const slide = { ...slides[Math.min(cur, slides.length - 1)] };
  const theme = HERO_THEMES[slide.theme] || HERO_THEMES.terracotta;
  slide.accent = theme.accent; slide.bg = theme.bg; slide.archColor = theme.archColor;
  const isMobile = window.OBS_useIsMobile ? window.OBS_useIsMobile(900) : false;

  return (
    <section style={{ position: 'relative', background: slide.bg, transition: 'background 1s ease', overflow: 'hidden', minHeight: 560 }}>
      {/* Decorative clouds */}
      <CloudSVG style={{ position: 'absolute', top: 20, right: '6%', width: 200, pointerEvents: 'none' }} color={T.skyBlue} opacity={0.06} />
      <CloudSVG style={{ position: 'absolute', bottom: 70, left: '4%', width: 150, pointerEvents: 'none' }} color={T.terracotta} opacity={0.05} />
      <CloudSVG style={{ position: 'absolute', top: '40%', right: '22%', width: 110, pointerEvents: 'none' }} color="white" opacity={0.25} />
      {/* Arch bg decoration */}
      <svg viewBox="0 0 120 160" style={{ position: 'absolute', bottom: -40, left: '8%', width: 90, height: 130, opacity: 0.04, pointerEvents: 'none' }} fill={T.terracotta}>
        <path d="M0,160 L0,60 Q0,0 60,0 Q120,0 120,60 L120,160 Z" />
      </svg>

      <div style={{ maxWidth: 1400, margin: '0 auto', padding: isMobile ? '36px 20px 44px' : '72px 48px 60px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 32 : 56, alignItems: 'center' }}>
        {/* Text side */}
        <div key={cur} style={{ animation: 'fadeInUp 0.6s ease both', animationFillMode: 'both' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 16px', borderRadius: 30, background: `${slide.accent}15`, border: `1px solid ${slide.accent}20`, marginBottom: 24 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: slide.accent, display: 'inline-block' }} />
            <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.15em', textTransform: 'uppercase', color: slide.accent, fontFamily: "'Outfit', sans-serif" }}>{slide.subtitle}</span>
          </div>
          <h1 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 'clamp(36px,5vw,64px)', fontWeight: 500, lineHeight: 1.05, color: T.textDark, marginBottom: 20, whiteSpace: 'pre-line' }}>{slide.title}</h1>
          <p style={{ fontFamily: "'Outfit', sans-serif", fontSize: 15, lineHeight: 1.85, color: T.textMid, maxWidth: 460, marginBottom: 36, fontWeight: 300 }}>{slide.desc}</p>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', marginBottom: 52 }}>
            <a href={slide.ctaLink || 'pages/category.html'} className="obs-btn-primary" style={{ padding: '14px 32px', background: slide.accent, color: 'white', border: 'none', borderRadius: 60, fontFamily: "'Outfit', sans-serif", fontWeight: 500, fontSize: 13, letterSpacing: '0.05em', cursor: 'pointer', transition: 'all 0.3s', textDecoration: 'none', display: 'inline-block' }}>{slide.cta} →</a>
            {slide.secondaryCta && (
              <a href={slide.secondaryLink || 'pages/brands.html'} className="obs-btn-ghost" style={{ padding: '14px 32px', background: 'transparent', color: T.textDark, border: '1.5px solid rgba(45,41,38,0.15)', borderRadius: 60, fontFamily: "'Outfit', sans-serif", fontWeight: 500, fontSize: 13, letterSpacing: '0.05em', cursor: 'pointer', textDecoration: 'none', display: 'inline-block' }}>{slide.secondaryCta}</a>
            )}
          </div>
          {/* Stats */}
          <div style={{ display: 'flex', gap: isMobile ? 20 : 36, flexWrap: 'wrap' }}>
            {stats.map(([n, l]) => (
              <div key={l} style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
                <span style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 30, fontWeight: 600, color: slide.accent }}>{n}</span>
                <span style={{ fontFamily: "'Outfit', sans-serif", fontSize: 11, color: T.textLight, letterSpacing: '0.03em' }}>{l}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Arch visual */}
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', order: isMobile ? -1 : 0 }}>
          <div style={{ width: isMobile ? 'min(78vw, 300px)' : 340, aspectRatio: '340 / 460', height: isMobile ? 'auto' : 460, borderRadius: '180px 180px 20px 20px', background: slide.archColor, position: 'relative', overflow: 'hidden', boxShadow: '0 32px 64px rgba(0,0,0,0.08)', transition: 'background 1s ease', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            {slide.image ? (
              <img
                src={window.OBS_API ? window.OBS_API.mediaUrl(slide.image) : slide.image}
                alt={slide.title}
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
              />
            ) : (
              <span style={{ fontFamily: "'Outfit', sans-serif", fontSize: 11, color: 'rgba(45,41,38,0.3)', letterSpacing: '0.05em' }}>product photography</span>
            )}
            {/* Inner cloud decoration */}
            {!slide.image && <CloudSVG style={{ position: 'absolute', bottom: 20, right: -10, width: 120 }} color="white" opacity={0.3} />}
          </div>
        </div>
      </div>

      {/* Slide dots */}
      <div style={{ position: 'absolute', bottom: 28, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 8 }}>
        {slides.map((_, i) => (
          <button key={i} onClick={() => { setCur(i); clearInterval(ref.current); }} style={{ width: i === cur ? 28 : 10, height: 10, borderRadius: 6, background: i === cur ? slide.accent : 'transparent', border: `1.5px solid ${i === cur ? slide.accent : 'rgba(45,41,38,0.25)'}`, cursor: 'pointer', transition: 'all 0.4s', padding: 0 }} />
        ))}
      </div>

      {/* Scallop divider */}
      <div style={{ overflow: 'hidden', lineHeight: 0 }}>
        <svg viewBox="0 0 1200 48" preserveAspectRatio="none" style={{ width: '100%', height: 32, display: 'block' }}>
          <path d="M0,48 Q50,0 100,48 Q150,0 200,48 Q250,0 300,48 Q350,0 400,48 Q450,0 500,48 Q550,0 600,48 Q650,0 700,48 Q750,0 800,48 Q850,0 900,48 Q950,0 1000,48 Q1050,0 1100,48 Q1150,0 1200,48 L1200,48 L0,48 Z" fill={T.cream} />
        </svg>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, CloudSVG });