// Hero — animated bird carrying strawberry vine
const { useEffect, useRef, useState } = React;

// Stylized strawberry SVG — simple shapes
function Berry({ size = 32, opacity = 1, rot = 0, color = "var(--berry)" }) {
  return (
    <svg width={size} height={size * 1.15} viewBox="0 0 40 46" style={{ opacity, transform: `rotate(${rot}deg)` }}>
      {/* leaves crown */}
      <path d="M20 4 L13 11 L8 9 L11 14 L6 16 L13 17 L11 21 L17 18 L20 22 L23 18 L29 21 L27 17 L34 16 L29 14 L32 9 L27 11 Z"
        fill="var(--green-mid)" />
      {/* berry body */}
      <path d="M20 18 C30 18 34 26 32 33 C30 40 25 44 20 44 C15 44 10 40 8 33 C6 26 10 18 20 18 Z"
        fill={color} />
      {/* seeds */}
      <ellipse cx="15" cy="26" rx="1" ry="1.6" fill="#FFE9A8" />
      <ellipse cx="22" cy="25" rx="1" ry="1.6" fill="#FFE9A8" />
      <ellipse cx="27" cy="29" rx="1" ry="1.6" fill="#FFE9A8" />
      <ellipse cx="17" cy="32" rx="1" ry="1.6" fill="#FFE9A8" />
      <ellipse cx="24" cy="33" rx="1" ry="1.6" fill="#FFE9A8" />
      <ellipse cx="20" cy="38" rx="1" ry="1.6" fill="#FFE9A8" />
      <ellipse cx="13" cy="36" rx="1" ry="1.6" fill="#FFE9A8" />
      <ellipse cx="29" cy="36" rx="1" ry="1.6" fill="#FFE9A8" />
      {/* highlight */}
      <ellipse cx="14" cy="24" rx="2" ry="3" fill="#fff" opacity="0.25" />
    </svg>
  );
}

// Stylized leaf
function Leaf({ size = 28, rot = 0, opacity = 1 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" style={{ opacity, transform: `rotate(${rot}deg)` }}>
      <path d="M16 2 C26 6 30 16 28 28 C16 30 6 24 4 12 C8 6 12 4 16 2 Z" fill="var(--green-deep)" />
      <path d="M16 4 C14 12 12 20 10 26" stroke="var(--green-mid)" strokeWidth="1" fill="none" opacity="0.6" />
    </svg>
  );
}

function Hero({ t }) {
  const [intro, setIntro] = useState(false);
  const [scrolled, setScrolled] = useState(0);

  useEffect(() => {
    const id = requestAnimationFrame(() => setIntro(true));
    const onScroll = () => setScrolled(Math.min(window.scrollY, 600));
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => {
      cancelAnimationFrame(id);
      window.removeEventListener("scroll", onScroll);
    };
  }, []);

  // Floating berries positioned around the logo medallion
  const orbits = [
    { top: "8%", left: "8%", size: 38, rot: -18, delay: 0.8 },
    { top: "18%", right: "12%", size: 28, rot: 12, delay: 1.0 },
    { top: "62%", left: "4%", size: 32, rot: 22, delay: 1.2 },
    { top: "72%", right: "8%", size: 44, rot: -8, delay: 1.4 },
    { top: "38%", left: "0%", size: 22, rot: 0, delay: 1.6 },
    { top: "48%", right: "0%", size: 24, rot: 30, delay: 1.8 },
  ];

  const leaves = [
    { top: "30%", left: "92%", size: 36, rot: 32, delay: 1.1 },
    { top: "84%", left: "20%", size: 28, rot: -20, delay: 1.3 },
    { top: "10%", left: "60%", size: 22, rot: 60, delay: 1.5 },
  ];

  // Real photo bubbles — parallax-driven floating image cards
  const photos = [
    { top: "-4%", left: "-12%", size: 130, rot: -8, depth: 0.45, delay: 0.6,
      src: window.RES.yulaImg2 },
    { top: "12%", right: "-14%", size: 110, rot: 6, depth: 0.30, delay: 0.85,
      src: `uploads/${encodeURI("morkıvırcık.jpeg")}` },
    { bottom: "-8%", left: "-6%", size: 150, rot: 5, depth: 0.55, delay: 1.05,
      src: `uploads/${encodeURI("endivyen.jpeg")}` },
    { bottom: "-4%", right: "-10%", size: 120, rot: -6, depth: 0.20, delay: 1.25,
      src: `uploads/${encodeURI("kuzukulagı.jpeg")}` },
  ];

  const py = scrolled * 0.45;

  return (
    <section className="hero" id="top">
      {/* parallax bg vines */}
      <div className="hero-bg" aria-hidden="true" style={{ transform: `translateY(${py * 0.4}px)` }}>
        <svg viewBox="0 0 1440 800" preserveAspectRatio="none" className="hero-vine">
          <path d="M-50 600 C 200 540, 380 700, 580 600 S 920 480, 1100 600 S 1400 700, 1500 600"
            stroke="var(--green-deep)" strokeWidth="1.2" fill="none" opacity="0.18" />
          <path d="M-50 660 C 220 600, 420 760, 620 660 S 960 540, 1140 660 S 1400 760, 1500 660"
            stroke="var(--green-deep)" strokeWidth="1.2" fill="none" opacity="0.12" />
        </svg>
      </div>

      <div className="hero-grid">
        <div className={"hero-copy " + (intro ? "in" : "")} style={{ transform: `translateY(${-py * 0.15}px)` }}>
          <div className="eyebrow">
            <span className="eyebrow-dot" />
            {t.hero.eyebrow}
          </div>
          <h1 className="hero-title">
            <span className="line line-1">{t.hero.titleA}</span>
            <span className="line line-2"><em>{t.hero.titleB}</em></span>
            <span className="line line-3">{t.hero.titleC}</span>
          </h1>
          <p className="hero-lede">{t.hero.lede}</p>
          <div className="hero-cta">
            <a href="#contact" className="btn btn-primary">
              {t.hero.ctaPrimary}
              <span className="btn-arrow">→</span>
            </a>
            <a href="#production" className="btn btn-ghost">{t.hero.ctaSecondary}</a>
          </div>
        </div>

        <div className={"hero-medallion " + (intro ? "in" : "")} style={{ transform: `translateY(${-py * 0.05}px)` }}>
          {/* halo */}
          <div className="halo halo-1" />
          <div className="halo halo-2" />

          {/* orbiting berries */}
          {orbits.map((o, i) => (
            <div
              key={i}
              className="orbit-berry"
              style={{
                top: o.top, left: o.left, right: o.right,
                animationDelay: `${o.delay}s`,
              }}
            >
              <Berry size={o.size} rot={o.rot} />
            </div>
          ))}
          {leaves.map((l, i) => (
            <div
              key={i}
              className="orbit-leaf"
              style={{ top: l.top, left: l.left, animationDelay: `${l.delay}s` }}
            >
              <Leaf size={l.size} rot={l.rot} />
            </div>
          ))}

          {/* real photo bubbles, parallax-driven */}
          {photos.map((p, i) => (
            <div
              key={`ph-${i}`}
              className="photo-bubble"
              style={{
                top: p.top, left: p.left, right: p.right, bottom: p.bottom,
                width: p.size, height: p.size,
                transform: `translate3d(0, ${py * p.depth}px, 0) rotate(${p.rot}deg)`,
                animationDelay: `${p.delay}s`,
                backgroundImage: `url(${p.src})`,
              }}
            />
          ))}

          {/* logo stamp */}
          <div className="logo-stamp">
            <div className="logo-inner">
              <img src="assets/logo.jpeg" alt="Yula Tarım Ürünleri" />
            </div>
            <svg className="stamp-ring" viewBox="0 0 200 200" aria-hidden="true">
              <defs>
                <path id="stamp-path" d="M100,100 m-92,0 a92,92 0 1,1 184,0 a92,92 0 1,1 -184,0" />
              </defs>
              <text className="stamp-text" fontSize="9.2" letterSpacing="3">
                <textPath href="#stamp-path" startOffset="0">
                  YULA TARIM ÜRÜNLERİ • EST. 2024 • HALDEN TARLAYA • YULA TARIM ÜRÜNLERİ • EST. 2024 • HALDEN TARLAYA •
                </textPath>
              </text>
            </svg>
          </div>

          {/* tag chips */}
          <div className="hero-chip chip-tl">60K fide</div>
          <div className="hero-chip chip-tr">5 dönüm</div>
          <div className="hero-chip chip-br">35–40 ton</div>
        </div>
      </div>

      <a className="scroll-cue" href="#about">
        <span>{t.hero.scroll}</span>
        <span className="scroll-line" />
      </a>
    </section>
  );
}

window.Hero = Hero;
window.Berry = Berry;
window.Leaf = Leaf;