// Sections — About, Stats, Production, Products, Wholesale, Gallery, Contact, Footer
const { useEffect: useEff2, useRef: useRef2, useState: useState2 } = React;

// ---------- Counter animation ----------
function useCountUp(target, run, duration = 1800) {
  const [val, setVal] = useState2(0);
  useEff2(() => {
    if (!run) return;
    let raf;
    const start = performance.now();
    const tick = (now) => {
      const p = Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(target * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [run, target]);
  return val;
}

function useInView(threshold = 0.2) {
  const ref = useRef2(null);
  const [seen, setSeen] = useState2(false);
  useEff2(() => {
    if (!ref.current || seen) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => e.isIntersecting && setSeen(true)),
      { threshold }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, [seen]);
  return [ref, seen];
}

function fmt(n) {
  return n >= 1000 ? n.toLocaleString("tr-TR") : String(n);
}

// ---------- About ----------
function About({ t }) {
  const [ref, seen] = useInView(0.25);
  return (
    <section className="section about" id="about" ref={ref}>
      <div className="section-head">
        <span className="tag">{t.intro.tag}</span>
      </div>
      <div className="about-grid">
        <h2 className={"display " + (seen ? "rise" : "")}>{t.intro.heading}</h2>
        <div className={"about-body " + (seen ? "rise d1" : "")}>
          <p className="lede-2">{t.intro.body}</p>
          <ul className="pillars">
            {t.intro.pillars.map((p, i) => (
              <li key={i} style={{ "--d": `${0.1 + i * 0.1}s` }} className={seen ? "rise" : ""}>
                <span className="pillar-k">{p.k}</span>
                <span className="pillar-v">{p.v}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

// ---------- Stats ----------
function Stats({ t }) {
  const [ref, seen] = useInView(0.25);
  return (
    <section className="section stats" id="stats" ref={ref}>
      <div className="section-head">
        <span className="tag">{t.stats.tag}</span>
        <h2 className={"display " + (seen ? "rise" : "")}>{t.stats.heading}</h2>
      </div>
      <div className="stat-grid">
        {t.stats.items.map((s, i) => (
          <StatCard key={i} s={s} run={seen} delay={i * 120} />
        ))}
      </div>
      <BerryStrip />
    </section>
  );
}

function StatCard({ s, run, delay }) {
  const v = useCountUp(s.n, run, 1800);
  return (
    <div className="stat-card" style={{ animationDelay: `${delay}ms` }}>
      <div className="stat-number">
        <span className="stat-num">{run ? fmt(v) : 0}</span>
        <span className="stat-suf">{s.suf}</span>
      </div>
      <div className="stat-label">{s.label}</div>
      <div className="stat-note">{s.note}</div>
    </div>
  );
}

function BerryStrip() {
  return (
    <div className="berry-strip" aria-hidden="true">
      {Array.from({ length: 14 }).map((_, i) => (
        <span key={i} style={{ animationDelay: `${i * 0.18}s` }}>
          <Berry size={22} rot={i % 2 ? -10 : 10} />
        </span>
      ))}
    </div>
  );
}

// ---------- Production ----------
function Production({ t }) {
  const [ref, seen] = useInView(0.15);
  return (
    <section className="section production" id="production" ref={ref}>
      <div className="section-head">
        <span className="tag">{t.production.tag}</span>
        <h2 className={"display " + (seen ? "rise" : "")}>{t.production.heading}</h2>
        <p className={"section-lede " + (seen ? "rise d1" : "")}>{t.production.lede}</p>
      </div>
      <ol className="steps">
        {t.production.steps.map((step, i) => (
          <li key={i} className={"step " + (seen ? "rise" : "")} style={{ "--d": `${0.1 + i * 0.08}s` }}>
            <span className="step-i">{step.i}</span>
            <div className="step-body">
              <h3>{step.t}</h3>
              <p>{step.d}</p>
            </div>
            <span className="step-line" />
          </li>
        ))}
      </ol>
    </section>
  );
}

// ---------- Products ----------
const UP = (n) => `uploads/${encodeURI(n)}`;
const PRODUCT_IMG = [
  UP("çilek.jpeg"),
  window.RES.yulaImg1,
  window.RES.yulaImg2,
  UP("endivyen.jpeg"),
  UP("morkıvırcık.jpeg"),
  UP("kuzukulagı.jpeg"),
];

function Products({ t }) {
  const [ref, seen] = useInView(0.15);
  return (
    <section className="section products" id="products" ref={ref}>
      <div className="section-head">
        <span className="tag">{t.products.tag}</span>
        <h2 className={"display " + (seen ? "rise" : "")}>{t.products.heading}</h2>
      </div>
      <div className="product-grid">
        {t.products.items.map((p, i) => (
          <article key={i} className={"product-card " + (seen ? "rise" : "")} style={{ "--d": `${0.1 + i * 0.12}s` }}>
            <div className="product-img" style={{ backgroundImage: `url(${PRODUCT_IMG[i]})` }}>
              <span className="product-tag">{p.tag}</span>
            </div>
            <div className="product-meta">
              <span className="product-cat">{p.c}</span>
              <h3 className="product-name">{p.n}</h3>
              <p className="product-desc">{p.d}</p>
            </div>
          </article>
        ))}
      </div>
      <a href="#contact" className="products-cta">
        {t.products.cta} <span>→</span>
      </a>
    </section>
  );
}

// ---------- Wholesale ----------
function Wholesale({ t }) {
  const [ref, seen] = useInView(0.2);
  return (
    <section className="section wholesale" id="wholesale" ref={ref}>
      <div className="wholesale-grid">
        <div className={"wholesale-text " + (seen ? "rise" : "")}>
          <span className="tag light">{t.wholesale.tag}</span>
          <h2 className="display light">{t.wholesale.heading}</h2>
          <p className="lede-2 light">{t.wholesale.body}</p>
          <ul className="bullets">
            {t.wholesale.bullets.map((b, i) => (
              <li key={i}><span className="dot" />{b}</li>
            ))}
          </ul>
          <a href="#contact" className="btn btn-cream">{t.wholesale.cta} <span>→</span></a>
        </div>
        <div className={"wholesale-visual " + (seen ? "rise d1" : "")}>
          <div className="visual-card">
            <div className="vc-img" style={{ backgroundImage: `url(${window.RES.yulaImg4})` }} />
            <div className="vc-meta">
              <span>Sera · Greenhouse</span>
              <span>5 dönüm</span>
            </div>
          </div>
          <div className="visual-card vc-2">
            <div className="vc-img" style={{ backgroundImage: `url(${window.RES.yulaImg2})` }} />
            <div className="vc-meta">
              <span>Hasat · Harvest</span>
              <span>40 ton/yıl</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Gallery ----------
const GALLERY = [
  { src: UP("çilek.jpeg"),       c: "Çilek hasadı" },
  { src: UP("fide.jpeg"),        c: "Sera içi" },
  { src: UP("morkıvırcık.jpeg"), c: "Kırmızı kıvırcık marul" },
  { src: UP("endivyen.jpeg"),    c: "Endivyen marul" },
  { src: UP("kuzukulagı.jpeg"),  c: "Kuzu kulağı" },
  { src: window.RES.yulaImg2,    c: "Olgunluk" },
];

function Gallery({ t }) {
  const [ref, seen] = useInView(0.1);
  const [active, setActive] = useState2(null);
  return (
    <section className="section gallery" id="gallery" ref={ref}>
      <div className="section-head">
        <span className="tag">{t.gallery.tag}</span>
        <h2 className={"display " + (seen ? "rise" : "")}>{t.gallery.heading}</h2>
        <p className={"section-lede " + (seen ? "rise d1" : "")}>{t.gallery.caption}</p>
      </div>
      <div className="gallery-grid">
        {GALLERY.map((g, i) => (
          <button
            key={i}
            className={"gal-item " + (seen ? "rise" : "") + " gal-" + i}
            style={{ "--d": `${0.05 + i * 0.08}s`, backgroundImage: `url(${g.src})` }}
            onClick={() => setActive(i)}
          >
            <span className="gal-cap">{g.c}</span>
          </button>
        ))}
      </div>
      {active !== null && (
        <div className="lightbox" onClick={() => setActive(null)}>
          <img src={GALLERY[active].src} alt={GALLERY[active].c} />
          <button className="lb-close" onClick={() => setActive(null)}>×</button>
        </div>
      )}
    </section>
  );
}

// ---------- Contact ----------
function Contact({ t }) {
  const [ref, seen] = useInView(0.2);
  return (
    <section className="section contact" id="contact" ref={ref}>
      <div className="section-head">
        <span className="tag">{t.contact.tag}</span>
        <h2 className={"display " + (seen ? "rise" : "")}>{t.contact.heading}</h2>
        <p className={"section-lede " + (seen ? "rise d1" : "")}>{t.contact.lede}</p>
      </div>
      <div className="contact-grid">
        <a className={"contact-card " + (seen ? "rise" : "")} style={{ "--d": "0.1s" }} href="tel:+905335565454">
          <span className="cc-k">{t.contact.phone}</span>
          <span className="cc-v">0533 556 54 54</span>
          <span className="cc-arrow">→</span>
        </a>
        <a className={"contact-card " + (seen ? "rise" : "")} style={{ "--d": "0.18s" }} href="tel:+905322550755">
          <span className="cc-k">{t.contact.phone}</span>
          <span className="cc-v">0532 255 07 55</span>
          <span className="cc-arrow">→</span>
        </a>
        <a className={"contact-card primary " + (seen ? "rise" : "")} style={{ "--d": "0.26s" }} href="https://wa.me/905335565454" target="_blank" rel="noopener">
          <span className="cc-k">{t.contact.whatsapp}</span>
          <span className="cc-v">Hızlı sipariş & teklif</span>
          <span className="cc-arrow">→</span>
        </a>
        <a className={"contact-card " + (seen ? "rise" : "")} style={{ "--d": "0.34s" }} href="https://www.instagram.com/yulatarim" target="_blank" rel="noopener">
          <span className="cc-k">{t.contact.instagram}</span>
          <span className="cc-v">@yulatarim</span>
          <span className="cc-arrow">→</span>
        </a>
        <div className={"contact-card static " + (seen ? "rise" : "")} style={{ "--d": "0.42s" }}>
          <span className="cc-k">{t.contact.address}</span>
          <span className="cc-v">{t.contact.addressVal}</span>
        </div>
        <div className={"contact-card static " + (seen ? "rise" : "")} style={{ "--d": "0.50s" }}>
          <span className="cc-k">{t.contact.hours}</span>
          <span className="cc-v">{t.contact.hoursVal}</span>
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer({ t }) {
  return (
    <footer className="site-footer">
      <div className="footer-row">
        <div className="footer-mark">
          <img src="assets/logo.jpeg" alt="" />
          <div>
            <strong>YULA</strong>
            <span>{t.footer.built}</span>
          </div>
        </div>
        <p className="footer-tag">{t.footer.tagline}</p>
      </div>
      <div className="footer-row footer-bot">
        <span>© 2026 Yula Yaş Meyve Sebze Nakil Tic. San. Ltd. Şti. {t.footer.rights}</span>
        <span>Halden tarlaya · 5 dönüm · 60.000 fide · 35–40 ton</span>
      </div>
    </footer>
  );
}

Object.assign(window, { About, Stats, Production, Products, Wholesale, Gallery, Contact, Footer, ParallaxBand, PhotoMarquee });

// ---------- Parallax Image Band ----------
function ParallaxBand({ src, label, sub }) {
  const ref = useRef2(null);
  const [y, setY] = useState2(0);
  useEff2(() => {
    const onScroll = () => {
      if (!ref.current) return;
      const rect = ref.current.getBoundingClientRect();
      const vh = window.innerHeight;
      const center = rect.top + rect.height / 2 - vh / 2;
      setY(-center * 0.25);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className="parallax-band" ref={ref}>
      <div
        className="pb-img"
        style={{ backgroundImage: `url(${src})`, transform: `translate3d(0, ${y}px, 0) scale(1.25)` }}
      />
      <div className="pb-overlay" />
      <div className="pb-copy">
        <span className="pb-sub">{sub}</span>
        <h3 className="pb-label">{label}</h3>
      </div>
    </div>
  );
}

// ---------- Photo Marquee ----------
const MARQUEE_PHOTOS = [
  UP("çilek.jpeg"),
  window.RES.yulaImg1,
  UP("fide.jpeg"),
  window.RES.yulaImg2,
  UP("morkıvırcık.jpeg"),
  window.RES.yulaImg4,
  UP("endivyen.jpeg"),
  UP("kuzukulagı.jpeg"),
  window.RES.yulaImg5,
];
function PhotoMarquee() {
  const items = [...MARQUEE_PHOTOS, ...MARQUEE_PHOTOS];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {items.map((src, i) => (
          <div key={i} className="marquee-item" style={{ backgroundImage: `url(${src})` }} />
        ))}
      </div>
    </div>
  );
}