// sections1.jsx — Nav, Hero, Story
const { useState: useState1, useEffect: useEffect1 } = React;

function Nav({ c, lang, setLang }) {
  const [scrolled, setScrolled] = useState1(false);
  const [open, setOpen] = useState1(false);
  const cart = useCart();
  useEffect1(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { id: "hikaye", href: "/#hikaye", label: c.nav.story },
    { id: "urunler", href: "/urunler", label: c.nav.products },
    { id: "misafirler", href: "/#misafirler", label: c.nav.guests },
    { id: "galeri", href: "/galeri", label: c.nav.gallery },
    { id: "iletisim", href: "/iletisim", label: c.nav.contact },
    { id: "blog", href: "/blog", label: c.nav.blog },
  ];

  return (
    <>
    <header
      className="fixed top-0 inset-x-0 z-50 transition-all duration-500"
      style={{
        backgroundColor: scrolled ? "rgba(250,247,242,0.96)" : "rgba(250,247,242,0)",
        backdropFilter: scrolled ? "blur(14px)" : "none",
        WebkitBackdropFilter: scrolled ? "blur(14px)" : "none",
        borderBottom: scrolled ? "1px solid rgba(45,55,72,0.07)" : "1px solid transparent",
      }}
    >
      <div className="mx-auto max-w-[1240px] px-6 lg:px-10">
        <div className="flex items-center justify-between" style={{ height: scrolled ? 64 : 84, transition: "height .5s" }}>
          {/* Logo */}
          <a href="/" className="flex items-center group">
            <LogoImg height={scrolled ? 46 : 60} style={{ transition: "height .5s" }} className="transition-transform duration-500 group-hover:scale-[1.03]" />
          </a>

          {/* Desktop links */}
          <nav className="hidden md:flex items-center gap-9">
            {links.map((l) => (
              <a key={l.id} href={l.href} className="relative text-ink/80 hover:text-ink transition-colors duration-300 group"
                style={{ fontSize: 14.5, letterSpacing: "0.01em" }}>
                {l.label}
                <span className="absolute -bottom-1.5 left-0 h-px bg-rose-deep transition-all duration-400 w-0 group-hover:w-full" />
              </a>
            ))}
          </nav>

          <div className="flex items-center gap-3">
            {/* Social icons */}
            <div className="hidden sm:flex items-center gap-1">
              {[
                { icon: "instagram", href: "https://www.instagram.com/elfinrose/", label: "Instagram" },
                { icon: "facebook", href: "https://www.facebook.com/elfin.gulbahcesi.9", label: "Facebook" },
              ].map((s) => (
                <a key={s.icon} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.label}
                  className="flex items-center justify-center rounded-full text-ink/70 hover:text-ink transition-colors duration-300"
                  style={{ width: 36, height: 36 }}>
                  <Icon name={s.icon} size={18} />
                </a>
              ))}
            </div>
            {/* Lang toggle */}
            <div className="hidden sm:flex items-center rounded-full p-0.5" style={{ border: "1px solid rgba(45,55,72,0.14)" }}>
              {["tr", "en"].map((lg) => (
                <button key={lg} onClick={() => setLang(lg)}
                  className="rounded-full transition-all duration-300"
                  style={{
                    fontSize: 11.5, letterSpacing: "0.08em", padding: "5px 11px", textTransform: "uppercase", fontWeight: 600,
                    backgroundColor: lang === lg ? "#2d3748" : "transparent",
                    color: lang === lg ? "#faf7f2" : "rgba(45,55,72,0.55)",
                  }}>
                  {lg}
                </button>
              ))}
            </div>
            {/* Sepet */}
            <a href="/sepet" aria-label={lang === "tr" ? "Sepet" : "Cart"}
              className="relative flex items-center justify-center rounded-full text-ink/80 hover:text-ink transition-colors duration-300"
              style={{ width: 38, height: 38 }}>
              <Icon name="cart" size={20} />
              {cart.count > 0 && (
                <span className="absolute -top-0.5 -right-0.5 flex items-center justify-center rounded-full text-cream tabular-nums"
                  style={{ width: 17, height: 17, fontSize: 10, backgroundColor: "var(--accent,#a87d79)" }}>
                  {cart.count}
                </span>
              )}
            </a>
            <a href="/urunler" className="hidden lg:inline-flex items-center gap-1.5 rounded-full px-5 py-2.5 text-cream transition-all duration-300 hover:gap-2.5"
              style={{ backgroundColor: "#2d3748", fontSize: 14 }}>
              {c.nav.cta}
              <Icon name="arrowRight" size={15} />
            </a>
            <button className="md:hidden text-ink p-1" onClick={() => setOpen(true)} aria-label="Menu">
              <Icon name="menu" size={24} />
            </button>
          </div>
        </div>
      </div>
    </header>

      {/* Mobile drawer — kept OUTSIDE <header> so the header's backdrop-filter
          (added on scroll) doesn't become its containing block and collapse it */}
      <div className="md:hidden fixed inset-0 z-[60] transition-all duration-400"
        style={{ pointerEvents: open ? "auto" : "none" }}>
        <div className="absolute inset-0 transition-opacity duration-400"
          style={{ backgroundColor: "rgba(45,55,72,0.45)", opacity: open ? 1 : 0 }} onClick={() => setOpen(false)} />
        <div className="absolute top-0 right-0 h-full w-[78%] max-w-xs px-7 py-7 transition-transform duration-400"
          style={{ backgroundColor: "#faf7f2", transform: open ? "translateX(0)" : "translateX(100%)", boxShadow: "-20px 0 60px rgba(45,55,72,0.12)" }}>
          <div className="flex items-center justify-between mb-10">
            <LogoImg height={46} />
            <button onClick={() => setOpen(false)} className="text-ink"><Icon name="close" size={22} /></button>
          </div>
          <nav className="flex flex-col gap-1">
            {links.map((l) => (
              <a key={l.id} href={l.href} onClick={() => setOpen(false)}
                className="py-3 font-serif text-ink border-b border-ink/8" style={{ fontSize: 22 }}>
                {l.label}
              </a>
            ))}
          </nav>
          <a href="/sepet" onClick={() => setOpen(false)}
            className="mt-6 flex items-center justify-between rounded-[14px] px-4 py-3.5"
            style={{ border: "1px solid rgba(45,55,72,0.14)" }}>
            <span className="flex items-center gap-2.5 text-ink" style={{ fontSize: 16 }}>
              <Icon name="cart" size={19} />{lang === "tr" ? "Sepetim" : "Your Cart"}
            </span>
            {cart.count > 0 && (
              <span className="flex items-center justify-center rounded-full text-cream tabular-nums"
                style={{ width: 22, height: 22, fontSize: 12, backgroundColor: "var(--accent,#a87d79)" }}>
                {cart.count}
              </span>
            )}
          </a>

          <div className="mt-6 flex items-center gap-2">
            {["tr", "en"].map((lg) => (
              <button key={lg} onClick={() => setLang(lg)} className="rounded-full px-4 py-2 uppercase"
                style={{ fontSize: 12, letterSpacing: "0.08em", fontWeight: 600,
                  backgroundColor: lang === lg ? "#2d3748" : "transparent",
                  color: lang === lg ? "#faf7f2" : "rgba(45,55,72,0.5)",
                  border: lang === lg ? "none" : "1px solid rgba(45,55,72,0.14)" }}>{lg}</button>
            ))}
          </div>
          <div className="mt-8 pt-7 flex items-center gap-3" style={{ borderTop: "1px solid rgba(45,55,72,0.10)" }}>
            {[
              { icon: "instagram", href: "https://www.instagram.com/elfinrose/", label: "Instagram" },
              { icon: "facebook", href: "https://www.facebook.com/elfin.gulbahcesi.9", label: "Facebook" },
            ].map((s) => (
              <a key={s.icon} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.label}
                className="flex items-center justify-center rounded-full text-ink transition-colors duration-300 hover:bg-ink hover:text-cream"
                style={{ width: 44, height: 44, border: "1px solid rgba(45,55,72,0.14)" }}>
                <Icon name={s.icon} size={19} />
              </a>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

function Hero({ c }) {
  return (
    <section id="top" className="relative min-h-[100svh] flex items-center overflow-hidden" style={{ backgroundColor: "#faf7f2" }}>
      {/* Soft decorative washes */}
      <div className="pointer-events-none absolute -top-32 -right-28 w-[44rem] h-[44rem] rounded-full"
        style={{ background: "radial-gradient(circle, rgba(216,180,176,0.40) 0%, rgba(216,180,176,0) 64%)" }} />
      <div className="pointer-events-none absolute -bottom-40 -left-32 w-[40rem] h-[40rem] rounded-full"
        style={{ background: "radial-gradient(circle, rgba(155,170,144,0.30) 0%, rgba(155,170,144,0) 64%)" }} />

      <div className="relative mx-auto max-w-[1240px] px-6 lg:px-10 w-full pt-28 pb-20">
        <div className="max-w-4xl mx-auto text-center">
          <Reveal>
            <Eyebrow center>{c.hero.eyebrow}</Eyebrow>
          </Reveal>
          <Reveal delay={120}>
            <h1 className="font-serif text-ink mt-7"
              style={{ fontSize: "clamp(38px, 6.6vw, 84px)", lineHeight: 1.06, letterSpacing: "-0.01em", textWrap: "balance" }}>
              {c.hero.line1}{" "}
              <span className="italic" style={{ color: "var(--accent, #bb8e89)" }}>{c.hero.accent1}</span>
              {c.hero.line2}{" "}
              <span className="italic" style={{ color: "#7f8e70" }}>{c.hero.accent2}</span>
              {c.hero.line3}
            </h1>
          </Reveal>
          <Reveal delay={240}>
            <p className="mx-auto mt-8 text-ink/65" style={{ fontSize: "clamp(15px,1.5vw,18px)", lineHeight: 1.7, maxWidth: 560 }}>
              {c.hero.sub}
            </p>
          </Reveal>
          <Reveal delay={340}>
            <div className="mt-11 flex flex-col sm:flex-row items-center justify-center gap-4">
              <a href="/urunler" className="group inline-flex items-center gap-2.5 rounded-full px-8 py-4 text-cream transition-all duration-400 hover:gap-4"
                style={{ backgroundColor: "#2d3748", fontSize: 15.5, boxShadow: "0 14px 34px -14px rgba(45,55,72,0.55)" }}>
                {c.hero.cta}
                <Icon name="arrowRight" size={17} className="transition-transform duration-400 group-hover:translate-x-0.5" />
              </a>
              <a href="/#hikaye" className="inline-flex items-center gap-2 text-ink/70 hover:text-ink transition-colors duration-300"
                style={{ fontSize: 15 }}>
                {c.hero.secondary}
                <Icon name="arrowDown" size={15} />
              </a>
            </div>
          </Reveal>
        </div>

        {/* Trust markers */}
        <Reveal delay={460}>
          <div className="mt-20 flex flex-wrap items-center justify-center gap-x-10 gap-y-4">
            {c.hero.trust.map((t, i) => (
              <div key={i} className="flex items-center gap-2.5 text-ink/70">
                <Icon name={t.icon} size={18} className="text-sage-deep" />
                <span style={{ fontSize: 14, letterSpacing: "0.01em" }}>{t.label}</span>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Story({ c }) {
  return (
    <section id="hikaye" className="relative py-28 lg:py-36" style={{ backgroundColor: "#faf7f2" }}>
      <div className="mx-auto max-w-[1240px] px-6 lg:px-10">
        <div className="grid lg:grid-cols-12 gap-12 lg:gap-16 items-center">
          {/* Image side */}
          <div className="lg:col-span-5">
            <Reveal>
              <div className="relative">
                <img src="img/gallery/bahce-hikaye.jpg" alt={c.story.imgLabel} className="rounded-[24px] aspect-[4/5] w-full object-cover" />
                <div className="absolute -bottom-7 -right-5 sm:-right-7 bg-cream rounded-[18px] px-6 py-5 flex items-center gap-4"
                  style={{ boxShadow: "0 24px 50px -22px rgba(45,55,72,0.30)" }}>
                  <span className="font-serif text-ink" style={{ fontSize: 38, lineHeight: 1 }}>10.000</span>
                  <span className="text-ink/60 leading-tight" style={{ fontSize: 13 }}>{c.story.badge}</span>
                </div>
              </div>
            </Reveal>
          </div>
          {/* Text side */}
          <div className="lg:col-span-7 lg:pl-6">
            <Reveal delay={120}><Eyebrow>{c.story.eyebrow}</Eyebrow></Reveal>
            <Reveal delay={200}>
              <h2 className="font-serif text-ink mt-6" style={{ fontSize: "clamp(28px,3.6vw,46px)", lineHeight: 1.18, letterSpacing: "-0.01em", textWrap: "balance" }}>
                {c.story.title}
              </h2>
            </Reveal>
            <div className="mt-7 space-y-5 text-ink/70" style={{ fontSize: "clamp(15px,1.4vw,17px)", lineHeight: 1.8 }}>
              {c.story.paras.map((p, i) => (
                <Reveal key={i} delay={260 + i * 80}><p style={{ textWrap: "pretty" }}>{p}</p></Reveal>
              ))}
            </div>
            <Reveal delay={520}>
              <div className="mt-9 flex flex-wrap gap-x-10 gap-y-4">
                {c.story.points.map((p, i) => (
                  <div key={i} className="flex items-center gap-2.5">
                    <span className="flex items-center justify-center rounded-full" style={{ width: 26, height: 26, backgroundColor: "rgba(155,170,144,0.18)" }}>
                      <Icon name="check" size={14} className="text-sage-deep" />
                    </span>
                    <span className="text-ink/80" style={{ fontSize: 14.5 }}>{p}</span>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>

        <StorySlider c={c} />
      </div>
    </section>
  );
}

// Story chapters as a horizontal slider — prev/next, dots, keyboard arrows.
function StorySlider({ c }) {
  const chapters = (c.story && c.story.chapters) || [];
  const [i, setI] = useState1(0);
  if (!chapters.length) return null;
  const n = chapters.length;
  const go = (next) => setI(((next % n) + n) % n);

  return (
    <div className="mt-20 lg:mt-28">
      <Reveal>
        <div className="flex items-end justify-between gap-6 flex-wrap">
          <div>
            <Eyebrow>{c.story.chaptersEyebrow}</Eyebrow>
            <h3 className="font-serif text-ink mt-5" style={{ fontSize: "clamp(23px,2.8vw,34px)", lineHeight: 1.2, letterSpacing: "-0.01em", textWrap: "balance" }}>
              {c.story.chaptersTitle}
            </h3>
          </div>
          <div className="flex items-center gap-2.5">
            {[{ dir: -1, icon: "chevronLeft" }, { dir: 1, icon: "chevronRight" }].map((b) => (
              <button key={b.icon} onClick={() => go(i + b.dir)} aria-label={b.dir < 0 ? "Önceki" : "Sonraki"}
                className="flex items-center justify-center rounded-full text-ink transition-all duration-300 hover:bg-ink hover:text-cream"
                style={{ width: 46, height: 46, border: "1px solid rgba(45,55,72,0.16)" }}>
                <Icon name={b.icon} size={20} />
              </button>
            ))}
          </div>
        </div>
      </Reveal>

      <Reveal delay={120}>
        <div className="mt-9 overflow-hidden rounded-[26px]"
          style={{ backgroundColor: "#f3ede4", border: "1px solid rgba(45,55,72,0.07)" }}>
          <div className="flex transition-transform duration-700"
            style={{ transform: `translateX(-${i * 100}%)`, transitionTimingFunction: "cubic-bezier(.2,.7,.2,1)" }}>
            {chapters.map((s, idx) => (
              <article key={idx} className="shrink-0 w-full px-7 py-12 sm:px-12 lg:px-16 lg:py-16">
                <div className="grid lg:grid-cols-12 gap-8 lg:gap-12 items-center">
                  <div className="lg:col-span-4">
                    <div className="flex items-center gap-3">
                      <RoseMark size={26} color="var(--accent, #c2918c)" />
                      <span className="font-serif" style={{ fontSize: 46, lineHeight: 1, color: "var(--accent, #a87d79)" }}>
                        {String(idx + 1).padStart(2, "0")}
                      </span>
                    </div>
                    <h4 className="font-serif text-ink mt-5" style={{ fontSize: "clamp(22px,2.4vw,30px)", lineHeight: 1.2, letterSpacing: "-0.01em" }}>
                      {s.title}
                    </h4>
                  </div>
                  <div className="lg:col-span-8">
                    <p className="text-ink/72" style={{ fontSize: "clamp(15px,1.4vw,17.5px)", lineHeight: 1.85, textWrap: "pretty" }}>
                      {s.text}
                    </p>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </Reveal>

      <div className="mt-7 flex items-center justify-center gap-2.5">
        {chapters.map((_, idx) => (
          <button key={idx} onClick={() => go(idx)} aria-label={`${idx + 1}. bölüm`}
            className="rounded-full transition-all duration-400"
            style={{
              height: 8,
              width: i === idx ? 26 : 8,
              backgroundColor: i === idx ? "var(--accent, #a87d79)" : "rgba(45,55,72,0.2)",
            }} />
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Hero, Story, StorySlider });