/* global React, framerMotion, lucide */
const { useState, useEffect, useRef, useMemo } = React;
const {
  motion,
  useScroll,
  useTransform,
  useMotionValue,
  useSpring,
  AnimatePresence,
  useInView
} = framerMotion;

const {
  Sparkles, MessageCircle, ArrowRight, Zap, Bot, Instagram, Send,
  GraduationCap, UtensilsCrossed, Store, Scissors, Puzzle, Check,
  Phone, Mail, ChevronRight, Cpu, Shield, Layers, Workflow, Activity,
  BellRing, CreditCard, Flame, DollarSign, CalendarClock
} = lucide;
const ImageIcon = lucide.Image;

// ────────────────────────────────────────────────────────────────────────────
// PRIMITIVES
// ────────────────────────────────────────────────────────────────────────────

const NeonBg = () => (
  <div className="pointer-events-none fixed inset-0 -z-10 overflow-hidden">
    <div
      className="absolute inset-0"
      style={{ background: 'radial-gradient(ellipse 90% 60% at 50% 0%, rgba(30,27,75,.6), transparent 70%), #020617' }}
    />
    <div
      className="absolute inset-0 opacity-[0.22]"
      style={{
        backgroundImage:
          'linear-gradient(rgba(130,200,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(130,200,255,.1) 1px, transparent 1px)',
        backgroundSize: '72px 72px',
        maskImage: 'radial-gradient(ellipse at 50% 30%, black 20%, transparent 80%)'
      }}
    />
    <motion.div
      className="absolute -top-56 -left-56 h-[720px] w-[720px] rounded-full blur-[140px]"
      style={{ background: 'radial-gradient(circle, oklch(0.62 0.22 295 / 0.75), transparent 70%)' }}
      animate={{ x: [0, 140, 0], y: [0, 80, 0] }}
      transition={{ duration: 18, repeat: Infinity, ease: 'easeInOut' }}
    />
    <motion.div
      className="absolute top-[20%] -right-56 h-[780px] w-[780px] rounded-full blur-[160px]"
      style={{ background: 'radial-gradient(circle, oklch(0.7 0.2 220 / 0.7), transparent 70%)' }}
      animate={{ x: [0, -120, 0], y: [0, 100, 0] }}
      transition={{ duration: 22, repeat: Infinity, ease: 'easeInOut' }}
    />
    <motion.div
      className="absolute bottom-[-15%] left-[15%] h-[620px] w-[620px] rounded-full blur-[160px]"
      style={{ background: 'radial-gradient(circle, oklch(0.65 0.22 310 / 0.55), transparent 70%)' }}
      animate={{ x: [0, 80, 0], y: [0, -60, 0] }}
      transition={{ duration: 26, repeat: Infinity, ease: 'easeInOut' }}
    />
    <div
      className="absolute inset-0 opacity-[0.04] mix-blend-overlay"
      style={{
        backgroundImage:
          "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\")"
      }}
    />
  </div>
);

const Reveal = ({ children, delay = 0, y = 40, className = '' }) => (
  <motion.div
    initial={{ opacity: 0, y }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true, margin: '-80px' }}
    transition={{ duration: 0.8, delay, ease: [0.16, 1, 0.3, 1] }}
    className={className}
  >
    {children}
  </motion.div>
);

const SectionLabel = ({ children }) => (
  <div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-[11px] font-medium uppercase tracking-[0.18em] text-cyan-300/90 backdrop-blur">
    <span className="h-1.5 w-1.5 rounded-full bg-cyan-300 shadow-[0_0_10px_rgba(103,232,249,0.9)]" />
    {children}
  </div>
);

const GlowButton = ({
  children,
  icon: Icon,
  variant = 'primary',
  href,
  onClick,
  target,
  rel,
  className = '',
  type = 'button'
}) => {
  const base =
    `group relative inline-flex items-center gap-2.5 rounded-full px-6 py-3.5 text-sm font-semibold tracking-wide transition-all duration-300 active:scale-[0.98] ${className}`;
  const sharedProps = href
    ? { href, onClick, target, rel }
    : { onClick, type };
  const Tag = href ? 'a' : 'button';

  if (variant === 'primary') {
    return (
      <Tag {...sharedProps} className={`${base} text-black`}>
        <motion.span
          aria-hidden
          className="absolute -inset-[2px] rounded-full"
          style={{
            background:
              'conic-gradient(from 0deg, oklch(0.85 0.2 210), oklch(0.78 0.22 295), oklch(0.85 0.2 170), oklch(0.85 0.2 210))'
          }}
          animate={{ rotate: 360 }}
          transition={{ duration: 4, repeat: Infinity, ease: 'linear' }}
        />
        <span
          className="absolute inset-[2px] rounded-full"
          style={{
            background:
              'linear-gradient(120deg, oklch(0.88 0.16 210), oklch(0.82 0.18 170), oklch(0.78 0.2 295))'
          }}
        />
        <motion.span
          className="absolute inset-0 rounded-full opacity-60"
          style={{
            background:
              'linear-gradient(120deg, oklch(0.88 0.16 210), oklch(0.82 0.18 170), oklch(0.78 0.2 295))',
            filter: 'blur(22px)'
          }}
          animate={{ opacity: [0.4, 0.95, 0.4] }}
          transition={{ duration: 2.4, repeat: Infinity }}
        />
        <span className="relative z-10 flex items-center gap-2.5">
          {children}
          {Icon && <Icon className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />}
        </span>
      </Tag>
    );
  }

  return (
    <Tag {...sharedProps} className={`${base} text-white`}>
      <span className="absolute inset-0 rounded-full border border-white/15 bg-white/[0.03] backdrop-blur-md transition-colors group-hover:bg-white/[0.07]" />
      <span className="relative z-10 flex items-center gap-2.5">
        {children}
        {Icon && <Icon className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />}
      </span>
    </Tag>
  );
};

const Tilt = ({ children, className = '', intensity = 10 }) => {
  const ref = useRef(null);
  const rx = useMotionValue(0);
  const ry = useMotionValue(0);
  const srx = useSpring(rx, { stiffness: 200, damping: 20 });
  const sry = useSpring(ry, { stiffness: 200, damping: 20 });
  const onMove = (e) => {
    if (!ref.current) return;
    const r = ref.current.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width - 0.5;
    const py = (e.clientY - r.top) / r.height - 0.5;
    ry.set(px * intensity);
    rx.set(-py * intensity);
  };
  const onLeave = () => {
    rx.set(0);
    ry.set(0);
  };
  return (
    <motion.div
      ref={ref}
      onMouseMove={onMove}
      onMouseLeave={onLeave}
      style={{ rotateX: srx, rotateY: sry, transformStyle: 'preserve-3d', perspective: 1200 }}
      className={className}
    >
      {children}
    </motion.div>
  );
};

const DetailBadge = ({ children, hue, className = '' }) => (
  <div
    className={`inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] backdrop-blur ${className}`}
    style={{
      color: `oklch(0.85 0.15 ${hue})`,
      borderColor: `oklch(0.78 0.16 ${hue} / 0.22)`,
      background: `oklch(0.18 0.03 ${hue} / 0.45)`
    }}
  >
    <span
      className="h-1.5 w-1.5 rounded-full"
      style={{
        background: `oklch(0.84 0.16 ${hue})`,
        boxShadow: `0 0 18px oklch(0.84 0.16 ${hue})`
      }}
    />
    {children}
  </div>
);

const BrandMark = ({ size = 'default', showSub = true, align = 'left' }) => {
  const logoSize = size === 'small' ? 'h-9 w-9 sm:h-10 sm:w-10' : 'h-11 w-11 sm:h-12 sm:w-12';
  const titleSize = size === 'small' ? 'text-[12px] sm:text-[13px]' : 'text-[13px] sm:text-[15px]';
  const subSize = size === 'small' ? 'text-[10px]' : 'text-[10px] sm:text-[11px]';

  return (
    <div className={`flex min-w-0 items-center gap-3 ${align === 'center' ? 'justify-center text-center' : ''}`}>
      <img
        src="logo.png"
        alt="Bireveber logosu"
        className={`${logoSize} shrink-0 rounded-2xl object-contain ring-1 ring-slate-200/80 bg-white p-1.5 shadow-[0_10px_30px_rgba(255,255,255,0.12)]`}
      />
      <div className="min-w-0">
        <div className={`font-display leading-tight font-semibold tracking-[0.02em] text-white ${titleSize}`}>
          Bireveber
        </div>
        {showSub ? (
          <div className={`mt-1 max-w-full text-white/55 ${subSize}`}>Dijital çözümler</div>
        ) : null}
      </div>
    </div>
  );
};

// ────────────────────────────────────────────────────────────────────────────
// NAV
// ────────────────────────────────────────────────────────────────────────────

const Nav = () => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    ['AI Bot', '#ai-bot'],
    ['Sektörler', '#sektorler'],
    ['Fark', '#fark'],
    ['İletişim', '#iletisim']
  ];
  return (
    <motion.nav
      initial={{ y: -40, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
      className={`fixed inset-x-0 top-0 z-50 transition-all duration-500 ${scrolled ? 'py-3' : 'py-5'}`}
    >
      <div className="mx-auto flex max-w-7xl items-center justify-between px-4 sm:px-6">
        <div
          className={`flex min-w-0 items-center gap-3 sm:gap-6 rounded-[28px] border border-white/10 px-3 sm:px-5 py-2.5 backdrop-blur-xl transition-all ${
            scrolled ? 'bg-black/50 shadow-[0_8px_40px_rgba(0,0,0,0.4)]' : 'bg-white/[0.02]'
          }`}
        >
          <a href="#" className="min-w-0 flex-1 md:flex-none">
            <BrandMark size="small" />
          </a>
          <div className="hidden items-center gap-6 md:flex">
            {links.map(([l, h]) => (
              <a
                key={l}
                href={h}
                className="text-sm text-white/60 transition-colors hover:text-white"
              >
                {l}
              </a>
            ))}
          </div>
        </div>
        <div className="hidden md:block">
          <GlowButton
            variant="ghost"
            icon={MessageCircle}
            href="https://wa.me/905355007557"
            target="_blank"
            rel="noreferrer"
          >
            WhatsApp
          </GlowButton>
        </div>
      </div>
    </motion.nav>
  );
};

// ────────────────────────────────────────────────────────────────────────────
// HERO
// ────────────────────────────────────────────────────────────────────────────

const Hero = () => {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ['start start', 'end start'] });
  const y = useTransform(scrollYProgress, [0, 1], [0, 180]);
  const opacity = useTransform(scrollYProgress, [0, 0.8], [1, 0]);

  return (
    <section ref={ref} className="relative flex min-h-screen items-center overflow-hidden pt-32">
      <motion.div
        style={{ y, opacity }}
        className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
      >
        {[0, 1, 2].map((i) => (
          <motion.div
            key={i}
            className="absolute left-1/2 top-1/2 rounded-full border border-cyan-300/10"
            style={{
              width: 520 + i * 220,
              height: 520 + i * 220,
              marginLeft: -(520 + i * 220) / 2,
              marginTop: -(520 + i * 220) / 2
            }}
            animate={{ rotate: i % 2 === 0 ? 360 : -360 }}
            transition={{ duration: 60 + i * 20, repeat: Infinity, ease: 'linear' }}
          >
            <div
              className="absolute h-2 w-2 rounded-full bg-cyan-300 shadow-[0_0_18px_rgba(103,232,249,1)]"
              style={{ top: -4, left: '50%' }}
            />
          </motion.div>
        ))}
      </motion.div>

      <div className="relative mx-auto w-full max-w-7xl px-4 sm:px-6">
        <motion.div style={{ y, opacity }} className="mx-auto max-w-5xl text-center">
          <Reveal>
            <div className="flex flex-col items-center gap-4">
              <BrandMark align="center" />
              <SectionLabel>Yazılım · Otomasyon · Yapay Zeka</SectionLabel>
            </div>
          </Reveal>

          <Reveal delay={0.1}>
            <h1 className="font-display mt-8 text-[42px] font-semibold leading-[0.98] tracking-[-0.035em] text-white sm:text-[68px] md:text-[112px] lg:text-[148px]">
              İşletmenizin{' '}
              <span className="relative inline-block">
                <span
                  className="bg-clip-text text-transparent"
                  style={{
                    backgroundImage:
                      'linear-gradient(120deg, oklch(0.9 0.14 210), oklch(0.82 0.18 170), oklch(0.78 0.2 295))'
                  }}
                >
                  Dijital Beyni
                </span>
                <motion.span
                  className="absolute -inset-3 -z-10 blur-3xl"
                  style={{
                    background:
                      'linear-gradient(120deg, oklch(0.9 0.14 210 / 0.5), oklch(0.78 0.2 295 / 0.5))'
                  }}
                  animate={{ opacity: [0.5, 1, 0.5] }}
                  transition={{ duration: 3, repeat: Infinity }}
                />
              </span>
              <br />
              ve Tasarım Ajansı.
            </h1>
          </Reveal>

          <Reveal delay={0.25}>
            <p className="mx-auto mt-8 max-w-2xl px-1 text-pretty text-[16px] leading-relaxed text-white/65 md:mt-10 md:text-xl">
              Operasyonlarınızı milimetrik yönetin, sosyal medyanızı{' '}
              <span
                className="font-semibold bg-clip-text text-transparent"
                style={{
                  backgroundImage:
                    'linear-gradient(120deg, oklch(0.85 0.16 210), oklch(0.8 0.2 295))'
                }}
              >
                yapay zekâya
              </span>{' '}
              bırakın. Eğitimden gıdaya, toptancıdan güzellik merkezine — size özel, cironuzu
              katlayan otomasyon sistemleri.
            </p>
          </Reveal>

          <Reveal delay={0.4}>
            <div className="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">
              <GlowButton icon={ArrowRight} href="#sektorler">
                Sektörünüze Özel Çözümler
              </GlowButton>
              <GlowButton
                variant="ghost"
                icon={MessageCircle}
                href="https://wa.me/905355007557"
                target="_blank"
                rel="noreferrer"
              >
                WhatsApp'tan Bilgi Al
              </GlowButton>
            </div>
          </Reveal>

          <Reveal delay={0.55}>
            <div className="mt-16 flex flex-wrap items-center justify-center gap-x-10 gap-y-4 text-xs uppercase tracking-[0.2em] text-white/35">
              {['AI Sosyal Medya Botu', 'POS · Stok · Kanban', 'B2B Store Paneli', 'CRM & Randevu', 'Eğitim Finans Paneli'].map(
                (t) => (
                  <span key={t} className="flex items-center gap-2">
                    <Check className="h-3.5 w-3.5 text-cyan-300/80" />
                    {t}
                  </span>
                )
              )}
            </div>
          </Reveal>
        </motion.div>

        <motion.div
          className="absolute bottom-8 left-1/2 -translate-x-1/2"
          animate={{ y: [0, 8, 0] }}
          transition={{ duration: 2, repeat: Infinity }}
        >
          <div className="flex h-10 w-6 items-start justify-center rounded-full border border-white/15 p-1.5">
            <motion.div
              className="h-1.5 w-1.5 rounded-full bg-cyan-300"
              animate={{ y: [0, 12, 0], opacity: [1, 0, 1] }}
              transition={{ duration: 2, repeat: Infinity }}
            />
          </div>
        </motion.div>
      </div>
    </section>
  );
};

// ────────────────────────────────────────────────────────────────────────────
// AI BOT — WhatsApp simulation
// ────────────────────────────────────────────────────────────────────────────

const WhatsAppSim = () => {
  const [step, setStep] = useState(0);
  const sectionRef = useRef(null);
  const inView = useInView(sectionRef, { once: false, margin: '-30% 0px' });

  useEffect(() => {
    if (!inView) return;
    setStep(0);
    const timers = [
      setTimeout(() => setStep(1), 900),
      setTimeout(() => setStep(2), 2200),
      setTimeout(() => setStep(3), 3400),
      setTimeout(() => setStep(4), 4800),
      setTimeout(() => setStep(5), 6200)
    ];
    return () => timers.forEach(clearTimeout);
  }, [inView]);

  return (
    <div ref={sectionRef} className="relative mx-auto w-full max-w-[380px]">
      <div
        className="absolute -inset-6 -z-10 rounded-[52px] blur-3xl"
        style={{
          background:
            'linear-gradient(135deg, oklch(0.72 0.18 295 / 0.4), oklch(0.82 0.15 210 / 0.35))'
        }}
      />
      <div className="relative rounded-[44px] border border-white/10 bg-gradient-to-b from-white/[0.08] to-white/[0.02] p-2 shadow-[0_40px_120px_-20px_rgba(0,0,0,0.8)] backdrop-blur-xl">
        <div className="overflow-hidden rounded-[36px] bg-[#0b141a]">
          <div className="flex items-center gap-3 bg-[#202c33] px-4 py-3">
            <div className="relative flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br from-cyan-300 to-violet-400">
              <Bot className="h-4 w-4 text-black" />
              <span className="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full border-2 border-[#202c33] bg-emerald-400" />
            </div>
            <div className="flex-1">
              <div className="text-[13px] font-semibold text-white">Bireveber AI</div>
              <div className="text-[11px] text-emerald-400">çevrimiçi · yazıyor…</div>
            </div>
            <Phone className="h-4 w-4 text-white/60" />
          </div>
          <div
            className="relative h-[480px] overflow-hidden px-3 py-4"
            style={{
              backgroundImage:
                "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 20 L20 0 L40 20 L20 40 Z' fill='none' stroke='%23182229' stroke-width='0.4'/></svg>\")",
              backgroundColor: '#0b141a'
            }}
          >
            <AnimatePresence>
              {step >= 1 && (
                <motion.div
                  key="m1"
                  initial={{ opacity: 0, y: 12, scale: 0.95 }}
                  animate={{ opacity: 1, y: 0, scale: 1 }}
                  transition={{ type: 'spring', damping: 18 }}
                  className="mb-2 ml-auto flex w-fit max-w-[80%] items-end gap-1 rounded-2xl rounded-br-sm bg-[#005c4b] px-3 py-2"
                >
                  <div className="-m-1 mb-1 overflow-hidden rounded-lg">
                    <div
                      className="relative h-32 w-48"
                      style={{
                        background:
                          'linear-gradient(135deg, #8B5A3C 0%, #D4A574 50%, #6B4423 100%)'
                      }}
                    >
                      <div className="absolute inset-0 flex items-center justify-center">
                        <div className="h-16 w-16 rounded-full border-4 border-amber-100/80 bg-gradient-to-br from-amber-900 to-amber-950 shadow-inner" />
                      </div>
                      <div className="absolute bottom-1 left-1 font-mono text-[9px] text-white/70">
                        IMG_2847.jpg
                      </div>
                    </div>
                  </div>
                </motion.div>
              )}
              {step >= 1 && (
                <motion.div
                  key="m1b"
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.15 }}
                  className="mb-3 ml-auto w-fit max-w-[80%] rounded-2xl rounded-br-sm bg-[#005c4b] px-3 py-2 text-[13px] leading-snug text-white"
                >
                  Bunu paylaşır mısın? ☕️
                  <span className="ml-2 text-[10px] text-white/60">14:32 ✓✓</span>
                </motion.div>
              )}

              {step === 2 && (
                <motion.div
                  key="typing"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  className="mb-3 flex w-fit items-center gap-1 rounded-2xl rounded-bl-sm bg-[#202c33] px-4 py-3"
                >
                  {[0, 1, 2].map((i) => (
                    <motion.span
                      key={i}
                      className="h-1.5 w-1.5 rounded-full bg-white/60"
                      animate={{ opacity: [0.3, 1, 0.3] }}
                      transition={{ duration: 1, repeat: Infinity, delay: i * 0.15 }}
                    />
                  ))}
                </motion.div>
              )}

              {step >= 3 && (
                <motion.div
                  key="m2"
                  initial={{ opacity: 0, y: 12, scale: 0.95 }}
                  animate={{ opacity: 1, y: 0, scale: 1 }}
                  transition={{ type: 'spring', damping: 18 }}
                  className="mb-3 w-fit max-w-[85%] rounded-2xl rounded-bl-sm bg-[#202c33] px-3 py-2"
                >
                  <div className="mb-1.5 overflow-hidden rounded-lg">
                    <div className="relative h-40 w-56">
                      <div
                        className="absolute inset-0"
                        style={{
                          background:
                            'linear-gradient(135deg, #1a0b2e 0%, #4a1d5c 40%, #8B5A3C 100%)'
                        }}
                      />
                      <motion.div
                        className="absolute inset-0"
                        style={{
                          background:
                            'radial-gradient(circle at 30% 40%, oklch(0.82 0.18 60 / 0.6), transparent 60%)'
                        }}
                        animate={{ opacity: [0.6, 1, 0.6] }}
                        transition={{ duration: 3, repeat: Infinity }}
                      />
                      <div className="absolute left-3 top-3 font-display text-[10px] font-bold tracking-wider text-amber-200">
                        CAFÉ NOVA
                      </div>
                      <div className="absolute bottom-2 left-3 right-3">
                        <div className="font-display text-[14px] font-bold leading-tight text-white">
                          Günün kahvesi
                        </div>
                        <div className="text-[8px] text-amber-200/90">Yeni sezon · taze kavrum</div>
                      </div>
                      <div className="absolute right-2 top-2 rounded-full bg-amber-300 px-1.5 py-0.5 font-display text-[8px] font-bold text-black">
                        %20
                      </div>
                    </div>
                  </div>
                  <div className="text-[13px] leading-snug text-white">
                    Afiş hazır. Açıklama yazıyorum…
                  </div>
                </motion.div>
              )}

              {step >= 4 && (
                <motion.div
                  key="m3"
                  initial={{ opacity: 0, y: 12 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ type: 'spring', damping: 18 }}
                  className="mb-3 w-fit max-w-[85%] rounded-2xl rounded-bl-sm bg-[#202c33] px-3 py-2 text-[12.5px] leading-snug text-white"
                >
                  <div className="mb-1 font-semibold text-cyan-300">📝 Instagram açıklaması</div>
                  Sabahın en güzel hâli ☕️ Yeni sezon kahvemizle tanış. Bugün %20 indirimli.
                  <div className="mt-1 text-[11px] text-emerald-300">
                    #cafe #kahvekeyfi #yenisezon #ankara
                  </div>
                </motion.div>
              )}

              {step >= 5 && (
                <motion.div
                  key="m4"
                  initial={{ opacity: 0, y: 12, scale: 0.9 }}
                  animate={{ opacity: 1, y: 0, scale: 1 }}
                  transition={{ type: 'spring', damping: 14 }}
                  className="w-fit max-w-[85%] rounded-2xl rounded-bl-sm px-3 py-2 text-[13px] text-white"
                  style={{
                    background:
                      'linear-gradient(120deg, oklch(0.45 0.15 295 / 0.6), oklch(0.35 0.1 210 / 0.6))',
                    border: '1px solid oklch(0.78 0.2 295 / 0.4)'
                  }}
                >
                  <div className="flex items-center gap-2 font-semibold">
                    <Instagram className="h-3.5 w-3.5 text-pink-300" />
                    Instagram'da paylaşıldı
                  </div>
                  <div className="mt-0.5 text-[11px] text-white/70">14:32 · otomatik · 1 hesap</div>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
          <div className="flex items-center gap-2 bg-[#202c33] px-3 py-2">
            <div className="flex-1 rounded-full bg-[#2a3942] px-4 py-2 text-[12px] text-white/40">
              Mesaj yazın…
            </div>
            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-emerald-500">
              <Send className="h-3.5 w-3.5 text-white" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const AIBotSection = ({ onOpen }) => {
  const steps = [
    { icon: ImageIcon, label: "WhatsApp'tan fotoğraf", desc: 'Ürün, mekân ya da öncesi/sonrası' },
    { icon: Cpu, label: 'Sektöre özel tasarım', desc: 'Logolu afiş / kısa video üretimi' },
    { icon: Workflow, label: 'Açıklama & hashtag', desc: 'Dönüşüm odaklı copy, otomatik' },
    { icon: Instagram, label: 'Instagram paylaşımı', desc: 'Sizin adınıza, saniyeler içinde' }
  ];
  return (
    <section id="ai-bot" className="relative py-32">
      <div className="mx-auto max-w-7xl px-4 sm:px-6">
        <div className="grid items-center gap-16 lg:grid-cols-2">
          <div>
            <Reveal>
              <SectionLabel>Star Ürün · AI Bot</SectionLabel>
            </Reveal>
            <Reveal delay={0.1}>
              <h2 className="font-display mt-6 text-[44px] font-semibold leading-[1.02] tracking-[-0.02em] text-white md:text-[64px]">
                Siz sadece <span className="text-cyan-300">WhatsApp'tan</span> fotoğraf atın.
                <br />
                <span
                  className="bg-clip-text text-transparent"
                  style={{
                    backgroundImage:
                      'linear-gradient(120deg, oklch(0.78 0.2 295), oklch(0.82 0.15 210))'
                  }}
                >
                  Gerisini ona bırakın.
                </span>
              </h2>
            </Reveal>
            <Reveal delay={0.2}>
              <p className="mt-6 max-w-xl text-pretty text-[16px] leading-relaxed text-white/60 md:text-[17px]">
                Sosyal medya yönetimi için ajanslara binlerce lira ödemeyin. Bireveber AI Bot'a bir
                fotoğraf atın — sektörünüze uygun, logolu bir afiş ya da video üretir, açıklamasını
                ve hashtag'lerini yazar, Instagram'da sizin adınıza paylaşır. Tüm dijital vitriniz
                otopilotta.
              </p>
            </Reveal>
            <div className="mt-10 space-y-3">
              {steps.map((s, i) => (
                <Reveal key={s.label} delay={0.3 + i * 0.08}>
                  <div className="group relative flex items-center gap-4 rounded-2xl border border-white/5 bg-white/[0.02] p-4 transition-all hover:border-cyan-300/30 hover:bg-white/[0.04]">
                    <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-white/10 bg-black/40 text-cyan-300 transition-all group-hover:border-cyan-300/50 group-hover:shadow-[0_0_24px_rgba(103,232,249,0.3)]">
                      <s.icon className="h-5 w-5" />
                    </div>
                    <div className="flex-1">
                      <div className="text-[15px] font-semibold text-white">{s.label}</div>
                      <div className="text-[13px] text-white/50">{s.desc}</div>
                    </div>
                    <div className="font-mono text-xs text-white/30">0{i + 1}</div>
                  </div>
                </Reveal>
              ))}
            </div>
            <Reveal delay={0.55}>
              <div className="mt-8 flex flex-wrap gap-3">
                <GlowButton onClick={() => onOpen && onOpen('ai')} icon={ArrowRight}>
                  Daha Fazla Bilgi Al
                </GlowButton>
                <GlowButton
                  variant="ghost"
                  href="https://wa.me/905355007557?text=Merhaba%20Bireveber%20AI%20hakk%C4%B1nda%20bilgi%20almak%20istiyorum."
                  target="_blank"
                  rel="noreferrer"
                  icon={MessageCircle}
                >
                  WhatsApp ile Danış
                </GlowButton>
              </div>
            </Reveal>
          </div>
          <Reveal delay={0.2} y={60}>
            <div className="flex justify-center lg:justify-end">
              <WhatsAppSim />
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

// ────────────────────────────────────────────────────────────────────────────
// SECTORAL SOLUTIONS
// ────────────────────────────────────────────────────────────────────────────

const EducationMock = () => (
  <div className="grid grid-cols-5 gap-1 p-5">
    {Array.from({ length: 25 }).map((_, i) => {
      const present = [0, 1, 2, 4, 5, 7, 8, 9, 10, 11, 13, 14, 15, 17, 18, 19, 20, 22, 23].includes(i);
      return (
        <motion.div
          key={i}
          initial={{ opacity: 0, scale: 0.6 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{ once: true }}
          transition={{ delay: i * 0.015 }}
          className={`aspect-square rounded-[4px] ${
            present
              ? 'bg-cyan-300/80 shadow-[0_0_8px_rgba(103,232,249,0.6)]'
              : 'bg-red-400/70 shadow-[0_0_8px_rgba(248,113,113,0.5)]'
          }`}
        />
      );
    })}
    <div className="col-span-5 mt-2 flex items-center justify-between font-mono text-[10px] text-white/60">
      <span>YOKLAMA · 10-A</span>
      <span>
        <span className="text-cyan-300">19</span> / 25
      </span>
    </div>
    <div className="col-span-5 mt-1 rounded-md border border-red-400/30 bg-red-400/10 p-2 text-[10px] text-red-300">
      ⚠ 6 öğrenci için veli SMS'i gönderildi
    </div>
  </div>
);

const RestaurantMock = () => {
  const cols = [
    { label: 'YENİ', color: 'rgb(251 191 36)', items: ['#4821 · 2× Latte', '#4822 · Cheeseburger'] },
    { label: 'HAZIRLANIYOR', color: 'rgb(251 113 133)', items: ['#4819 · Pizza M'] },
    { label: 'HAZIR', color: 'rgb(52 211 153)', items: ['#4818 · Salata'] }
  ];
  return (
    <div className="grid grid-cols-3 gap-2 p-4">
      {cols.map((c) => (
        <div key={c.label} className="rounded-lg bg-black/40 p-2">
          <div className="mb-1.5 flex items-center gap-1.5 font-mono text-[9px] font-bold tracking-wider" style={{ color: c.color }}>
            <span className="h-1.5 w-1.5 rounded-full" style={{ background: c.color }} />
            {c.label}
          </div>
          <div className="space-y-1.5">
            {c.items.map((item, i) => (
              <motion.div
                key={item}
                initial={{ opacity: 0, x: -8 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.15 }}
                className="rounded border border-white/10 bg-white/[0.04] px-1.5 py-1 text-[9px] text-white/80"
              >
                {item}
              </motion.div>
            ))}
          </div>
        </div>
      ))}
      <div className="col-span-3 flex items-center justify-between rounded-md bg-emerald-400/10 px-2 py-1.5 font-mono text-[10px] text-emerald-300">
        <span>STOK · Süt: 12.4L</span>
        <span>Espresso çekirdek: 3.2kg</span>
      </div>
    </div>
  );
};

const B2BMock = () => (
  <div className="p-4">
    <div className="mb-3 flex items-center justify-between">
      <div className="font-mono text-[10px] text-white/50">USD/TRY</div>
      <div className="flex items-center gap-1.5">
        <motion.div
          className="h-1.5 w-1.5 rounded-full bg-emerald-400"
          animate={{ opacity: [0.4, 1, 0.4] }}
          transition={{ duration: 1.5, repeat: Infinity }}
        />
        <div className="font-mono text-[13px] font-bold text-emerald-400">₺32.84</div>
        <div className="font-mono text-[10px] text-emerald-300">+0.12</div>
      </div>
    </div>
    <div className="space-y-1.5">
      {[
        ['SKU-2401 · Ayçiçek Y.', '$18.40', '₺604'],
        ['SKU-2402 · Un 25kg', '$12.10', '₺397'],
        ['SKU-2403 · Zeytin 5L', '$22.80', '₺749']
      ].map(([sku, usd, try_], i) => (
        <motion.div
          key={sku}
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          transition={{ delay: 0.1 + i * 0.1 }}
          className="grid grid-cols-[1fr_auto_auto] items-center gap-2 rounded-md border border-white/5 bg-white/[0.03] px-2 py-1.5 text-[10px]"
        >
          <div className="truncate text-white/80">{sku}</div>
          <div className="font-mono text-cyan-300">{usd}</div>
          <motion.div
            initial={{ background: 'rgba(52,211,153,0.3)' }}
            animate={{ background: 'rgba(52,211,153,0)' }}
            transition={{ duration: 1.5 }}
            className="rounded px-1.5 py-0.5 font-mono text-white"
          >
            {try_}
          </motion.div>
        </motion.div>
      ))}
    </div>
    <div className="mt-3 rounded-md border border-cyan-300/20 bg-cyan-300/5 p-1.5 text-center font-mono text-[9px] text-cyan-300">
      12 bayi aktif · 3 sipariş bekliyor
    </div>
  </div>
);

const BeautyMock = () => {
  const slots = [
    { t: '10:00', n: 'A. Yılmaz', s: 'Botoks · 2ml', c: true },
    { t: '11:30', n: 'M. Kaya', s: 'Dolgu · 1ml', c: true },
    { t: '14:00', n: 'Z. Demir', s: 'Lazer · Paket 3/6', c: false },
    { t: '15:30', n: 'S. Akın', s: 'Cilt Bakımı', c: true }
  ];
  return (
    <div className="p-4">
      <div className="mb-2 flex items-center justify-between font-mono text-[10px] text-white/50">
        <span>23 NİSAN · ÇARŞAMBA</span>
        <span className="text-fuchsia-300">4 randevu</span>
      </div>
      <div className="space-y-1.5">
        {slots.map((s, i) => (
          <motion.div
            key={s.t}
            initial={{ opacity: 0, x: -10 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ delay: i * 0.1 }}
            className="flex items-center gap-2 rounded-md border border-white/5 bg-white/[0.03] px-2 py-1.5 text-[10px]"
          >
            <div className="font-mono text-fuchsia-300">{s.t}</div>
            <div className="flex-1">
              <div className="text-white">{s.n}</div>
              <div className="text-[9px] text-white/50">{s.s}</div>
            </div>
            {s.c ? (
              <Check className="h-3 w-3 text-emerald-400" />
            ) : (
              <div className="h-2 w-2 rounded-full bg-amber-400" />
            )}
          </motion.div>
        ))}
      </div>
      <div className="mt-2 flex items-center justify-between rounded-md bg-fuchsia-400/10 px-2 py-1.5 font-mono text-[9px] text-fuchsia-300">
        <span>SARF · Botoks 8.4ml</span>
        <span>Dolgu 12.2ml</span>
      </div>
    </div>
  );
};

const AIMock = () => (
  <div className="p-4">
    <div className="grid grid-cols-[1.1fr_0.9fr] gap-2">
      <div className="rounded-xl border border-white/8 bg-black/40 p-2">
        <div className="mb-2 flex items-center gap-2">
          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-emerald-500/20 text-emerald-300">
            <MessageCircle className="h-4 w-4" />
          </div>
          <div>
            <div className="text-[10px] uppercase tracking-[0.18em] text-emerald-300/80">WhatsApp</div>
            <div className="text-[12px] font-semibold text-white">Fotoğraf alındı</div>
          </div>
        </div>
        <div className="rounded-lg bg-white/[0.04] p-2 text-[10px] text-white/70">
          Öncesi / Sonrası görseli · Afiş talebi · 1 dakika içinde işleniyor
        </div>
      </div>
      <div className="rounded-xl overflow-hidden border border-white/8 bg-black/40">
        <div
          className="relative h-full min-h-[110px]"
          style={{ background: 'linear-gradient(135deg, #071025 0%, #1f1147 55%, #4f1d95 100%)' }}
        >
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_25%_25%,rgba(103,232,249,0.28),transparent_35%),radial-gradient(circle_at_70%_75%,rgba(244,114,182,0.26),transparent_40%)]" />
          <div className="absolute left-3 top-3 text-[9px] font-semibold uppercase tracking-[0.2em] text-cyan-200">
            otomatik afiş
          </div>
          <div className="absolute bottom-3 left-3 right-3">
            <div className="font-display text-[13px] font-semibold text-white">Yaz kampanyası</div>
            <div className="mt-1 text-[9px] text-white/70">Logolu · Reels kapağı · 1080×1350</div>
          </div>
        </div>
      </div>
    </div>
    <div className="mt-2 grid grid-cols-2 gap-2">
      <div className="rounded-lg border border-pink-400/20 bg-pink-400/10 px-2 py-2 text-[10px] text-pink-200">
        <div className="font-semibold uppercase tracking-[0.18em]">Planlı Paylaşım</div>
        <div className="mt-1 text-white/80">Instagram · 19:30</div>
      </div>
      <div className="rounded-lg border border-cyan-300/20 bg-cyan-300/10 px-2 py-2 text-[10px] text-cyan-200">
        <div className="font-semibold uppercase tracking-[0.18em]">Hashtag & Copy</div>
        <div className="mt-1 text-white/80">Hazır · Onay bekliyor</div>
      </div>
    </div>
  </div>
);

const SECTORS = [
  {
    id: 'egitim',
    icon: GraduationCap,
    tag: 'Eğitim Kurumları & Dershaneler',
    title: 'Yoklama ve taksit kaosuna son.',
    desc:
      "Defterleri ve Excel'i çöpe atın. Turnikeden geçen öğrencinin yoklaması alınır, gelmeyenin velisine anında SMS gider. Ödemesi gecikenler kızarır, tek tıkla tahsilat hatırlatması yapılır.",
    hue: 210,
    mock: EducationMock,
    detail: {
      eyebrow: 'Eğitim Kurumları Detayı',
      headline: 'Dershanenizin akademik ritmi ve finansal röntgeni tek ekranda.',
      intro:
        'Öğrenci devamlılığını, öğretmen saatlerini, taksit disiplinini ve kurum kârlılığını tek bir akışta yönetin. Arka planda anlık SMS, ödeme alarmı ve çakışma önleyici motor çalışsın.',
      standout:
        'Sistem, dershanenizin finansal röntgenini çeker. Kimin ödemesi kaç gün gecikti, hangi öğretmen kaç saat derse girdi, kurumun net kârı nedir? Hepsini tek tıkla raporlar.',
      modules: [
        {
          icon: BellRing,
          title: 'Akıllı Yoklama Sistemi',
          text: 'Turnike veya panel aksiyonuyla yoklama otomatik işlenir; gelmeyen öğrencinin velisine anlık SMS gönderilir.'
        },
        {
          icon: CreditCard,
          title: 'Taksit & Ödeme Takibi',
          text: 'Geciken ödemeler renkli uyarı mantığıyla görünür, tahsilat akışı ve gecikme günleri tek bakışta izlenir.'
        },
        {
          icon: Layers,
          title: 'Öğretmen Paneli',
          text: 'Öğretmenin ders saati, sınıf yükü, performans görünümü ve branş bazlı yoğunluğu merkezi panelde toplanır.'
        },
        {
          icon: CalendarClock,
          title: 'Ders Programı Çakışma Önleyici',
          text: 'Sınıf, öğretmen ve saat çakışmalarını program yayınlanmadan önce engeller; operasyonu sakinleştirir.'
        }
      ],
      highlights: [
        { label: 'Veli iletişimi', value: 'Anlık SMS', note: 'Devamsızlık anında bildirim' },
        { label: 'Finans görünümü', value: 'Tek tık rapor', note: 'Gecikme, tahsilat, net kâr' },
        { label: 'Program güvenliği', value: 'Çakışma yok', note: 'Sınıf / öğretmen / saat kontrolü' }
      ],
      workflow: [
        'Öğrenci giriş yaptığı an yoklama otomatik düşer.',
        'Devamsızlık varsa veliye anlık SMS çıkar.',
        'Taksit gecikmeleri panelde alarm mantığıyla kızarır.',
        'Kurum sahibi finans ve kârlılık raporunu tek tıkla görür.'
      ]
    }
  },
  {
    id: 'restoran',
    icon: UtensilsCrossed,
    tag: 'Restoran & Cafe',
    title: 'Gramajına kadar hatasız mutfak.',
    desc:
      'Sipariş girildiği an mutfak kanban ekranına düşer. Satılan her kahve, reçetesindeki çekirdekten ve sütten gramı gramına otomatik düşülür. Fireyi sıfırlayın.',
    hue: 30,
    mock: RestaurantMock,
    detail: {
      eyebrow: 'Restoran & Cafe Detayı',
      headline: 'Servis hızını, reçeteyi ve kârlılığı tek dijital hat üzerinde birleştirin.',
      intro:
        'Profesyonel POS, mutfak sırası, reçeteli stok takibi ve personel verimini aynı ekranda senkronize eden restoran işletim sistemi.',
      standout:
        'Gramaj Bazlı Kontrol: Bir porsiyon iskender satıldığında, sistem arka planda 120gr et, 50gr tereyağı ve 1 adet pideyi stoktan milimetrik olarak düşer. Ay sonu firenizi %0\'a indirir.',
      modules: [
        {
          icon: CreditCard,
          title: 'Profesyonel POS',
          text: 'Sipariş girişini hızlılaştırır, masa ve paket servis akışını tek panelde birleştirir.'
        },
        {
          icon: Workflow,
          title: 'Mutfak Kanban',
          text: 'Siparişler mutfakta sıra mantığıyla akar; yeni, hazırlanıyor ve hazır durumları net şekilde görünür.'
        },
        {
          icon: Flame,
          title: 'Reçeteli Stok Takibi',
          text: 'Satılan her ürün, reçetesindeki gramaj ve porsiyon bilgisine göre stoktan otomatik düşer.'
        },
        {
          icon: Activity,
          title: 'Personel Performans Analizi',
          text: 'Vardiya, satış katkısı ve operasyon hızı ekip bazında kıyaslanabilir hale gelir.'
        },
        {
          icon: DollarSign,
          title: 'Gelir / Gider Tablosu',
          text: 'Günlük satış, masraf ve dönemsel kârlılık tek finans görünümünde birleşir.'
        }
      ],
      highlights: [
        { label: 'Stok hassasiyeti', value: 'Gramaj bazlı', note: 'Et, yağ, sos, pide, kahve' },
        { label: 'Mutfak akışı', value: 'Kanban düzeni', note: 'Sırayı kaybetmeden üretim' },
        { label: 'Ay sonu kontrol', value: 'Firesiz rapor', note: 'Gerçek maliyet görünürlüğü' }
      ],
      workflow: [
        'Kasadan sipariş geçilir geçilmez mutfak kanbanı güncellenir.',
        'Reçete motoru stok düşümünü ürün bazında işler.',
        'Personel performansı operasyon verisinden beslenir.',
        'Gelir / gider tablosu gün sonunda otomatik netleşir.'
      ]
    }
  },
  {
    id: 'toptanci',
    icon: Store,
    tag: 'Toptancı & B2B Ağları',
    title: 'Kura endeksli anlık fiyat & bayi ağı.',
    desc:
      'WhatsApp\'tan sipariş almaya son. Bayileriniz "Store" panelinizden güncel stoklarınızı görüp sipariş geçsin. Fiyatlarınız anlık USD kuruna göre otomatik güncellensin.',
    hue: 160,
    mock: B2BMock,
    detail: {
      eyebrow: 'B2B Toptancı & Mağaza Detayı',
      headline: 'Sınırsız bayi ağını tek merkezden yöneten kur duyarlı satış omurgası.',
      intro:
        'Şube, bayi, döviz bazlı fiyat ve açık hesap yönetimini tek superadmin katmanında toplayan yüksek hızlı B2B ticaret altyapısı.',
      standout:
        'Sınırsız Bayi Ağı: Bayileriniz WhatsApp\'ta vakit kaybetmez; kendi Store panellerinden sipariş geçer. Döviz kuru değiştiğinde tüm fiyatlarınız saniyeler içinde otomatik güncellenir.',
      modules: [
        {
          icon: Shield,
          title: 'Superadmin Şube Yönetimi',
          text: 'Merkez panelden tüm mağaza ve şube yapılarını standart hale getirir, yetkiyi katmanlı dağıtır.'
        },
        {
          icon: Store,
          title: 'Bayi Sipariş Portalı',
          text: 'Bayiler stok, fiyat ve cari bilgileri görerek kendi panellerinden hızlı sipariş oluşturur.'
        },
        {
          icon: DollarSign,
          title: 'Kura Endeksli Otomatik Fiyatlama',
          text: 'USD / EUR değişimlerinde ürün fiyatlarını anlık kur mantığıyla otomatik yeniler.'
        },
        {
          icon: CreditCard,
          title: 'Cari & Açık Hesap Takibi',
          text: 'Bayi bakiyesi, risk limiti ve açık hesap pozisyonu sürekli görünür kalır.'
        }
      ],
      highlights: [
        { label: 'Kur refleksi', value: 'Saniyeler içinde', note: 'USD / EUR bazlı fiyat güncelleme' },
        { label: 'Sipariş disiplini', value: 'Bayi paneli', note: 'WhatsApp karmaşasını bitirir' },
        { label: 'Merkez kontrol', value: 'Superadmin', note: 'Şube, bayi, fiyat, cari tek yerde' }
      ],
      workflow: [
        'Merkez fiyat stratejisi superadmin panelden tanımlanır.',
        'Kur değiştiğinde ürün katalogları toplu güncellenir.',
        'Bayi kendi store ekranından siparişi oluşturur.',
        'Cari ve açık hesap dengesi sipariş anında sisteme işlenir.'
      ]
    }
  },
  {
    id: 'guzellik',
    icon: Scissors,
    tag: 'Güzellik Merkezleri',
    title: 'Randevu ve paketlerde sıfır hata.',
    desc:
      'Çakışan randevulara, unutulan seanslara elveda. Müşteri randevuları, paket satış takipleri ve personel primleri tek sistemde. Sarflar miligramına otomatik düşer.',
    hue: 295,
    mock: BeautyMock,
    detail: {
      eyebrow: 'Güzellik Merkezi Detayı',
      headline: 'Randevu, seans, prim ve sarf akışını kusursuz bir hizmet döngüsüne çevirin.',
      intro:
        'Uzman planlamasından paket kullanımına, müşteri geçmişinden sarf tüketimine kadar her noktayı görünür kılan güçlü CRM + operasyon katmanı.',
      standout:
        'Müşteriniz geldiğinde kaç seansı kalmış, hangi uzman ilgilenmiş, ne kadar ödeme yapmış? Hepsi saniyeler içinde ekranda. Unutulan randevulara ve karışan paketlere son.',
      modules: [
        {
          icon: CalendarClock,
          title: 'Akıllı Randevu Takvimi',
          text: 'Uzman, oda ve işlem tipine göre çakışmaları önleyerek gün akışını netleştirir.'
        },
        {
          icon: Layers,
          title: 'Seans & Paket Satış Yönetimi',
          text: 'Kaç seans kullanıldı, ne kadar hak kaldı, hangi paket ne zaman satıldı tek panelde görünür.'
        },
        {
          icon: Activity,
          title: 'Personel Prim Sistemi',
          text: 'Uzman bazlı satış ve işlem performansı üzerinden prim hesapları düzenli hale gelir.'
        },
        {
          icon: Flame,
          title: 'Sarf Malzeme Stok',
          text: 'Gramajlı / miligramlı ürünler yapılan işlem kadar stoktan otomatik düşülür.'
        }
      ],
      highlights: [
        { label: 'Müşteri görünümü', value: '360° profil', note: 'Seans, ödeme, uzman geçmişi' },
        { label: 'Takvim düzeni', value: 'Çakışmasız', note: 'Uzman ve oda senkronu' },
        { label: 'Sarf takibi', value: 'Mg hassasiyet', note: 'İşlem kadar stok düşümü' }
      ],
      workflow: [
        'Randevu oluşurken uzman ve zaman uygunluğu doğrulanır.',
        'Müşteri geldiğinde kalan seans ve ödeme geçmişi açılır.',
        'İşlem tamamlandığında sarf ve seans hakkı otomatik düşer.',
        'Prim, satış ve operasyon raporu gün sonunda hazırlanır.'
      ]
    }
  },
  {
    id: 'ai',
    icon: Bot,
    tag: 'BİREVEBER AI Tasarım & Sosyal Medya',
    title: 'Fotoğraftan yayına giden tam otomatik vitrin.',
    desc:
      'Telefonunuzla çekin, WhatsApp\'tan bota gönderin. Bireveber AI sektörel afişi, videosu, metni ve paylaşım planını otomatik hazırlasın.',
    hue: 255,
    mock: AIMock,
    detail: {
      eyebrow: 'BİREVEBER AI Detayı',
      headline: 'WhatsApp mesajını tasarıma, tasarımı yayına çeviren yaratıcı otomasyon motoru.',
      intro:
        'İşletmenizin sosyal medya üretim sürecini içerik stüdyosu kalitesine çıkaran; fotoğraf, afiş, video, metin ve paylaşım takvimini tek akışta yöneten AI çözümü.',
      standout:
        'Kendi Tasarımcınız: Siz sadece telefonunuzla fotoğrafı çekin ve WhatsApp\'tan bota yollayın. Bireveber AI, o fotoğrafı sektörel bir sanat eserine dönüştürür ve Instagram\'da paylaşmaya hazır hale getirir.',
      modules: [
        {
          icon: MessageCircle,
          title: 'WhatsApp Entegrasyonu',
          text: 'İçerik üretimi telefon ekranından başlar; kullanıcı fotoğrafı veya talebi botla anında paylaşır.'
        },
        {
          icon: Sparkles,
          title: '"Öncesi / Sonrası" Şablonları',
          text: 'Güzellik, sağlık, mekân ve ürün tanıtımlarında dönüşüm odaklı hazır kompozisyonlar üretir.'
        },
        {
          icon: Zap,
          title: 'Otomatik Afiş / Video Üretimi',
          text: 'Logolu afişler, kısa video kapakları ve kampanya görselleri saniyeler içinde hazırlanır.'
        },
        {
          icon: Instagram,
          title: 'Planlı Sosyal Medya Paylaşımı',
          text: 'Metin, hashtag ve yayın saatiyle birlikte içeriği platforma hazır hâle getirir.'
        }
      ],
      highlights: [
        { label: 'İçerik başlangıcı', value: 'WhatsApp', note: 'Ek panel aramadan üretim' },
        { label: 'Kreatif çıktı', value: 'Afiş + video', note: 'Logolu ve sektöre özel' },
        { label: 'Yayın disiplini', value: 'Planlı paylaşım', note: 'Hazır caption ve hashtag' }
      ],
      workflow: [
        'İşletme telefondan fotoğrafı veya brief\'i bota gönderir.',
        'AI görsel kompozisyonu, metni ve şablonu üretir.',
        'İçerik onaya veya otomatik plana düşer.',
        'Instagram paylaşımı belirlenen saatte hazır hale gelir.'
      ]
    }
  }
];

const DetailMiniScreen = ({ sector }) => {
  const Mock = sector.mock;
  return (
    <div className="relative overflow-hidden rounded-[28px] border border-white/10 bg-black/40 p-3 shadow-[0_30px_80px_-30px_rgba(0,0,0,0.7)] backdrop-blur">
      <div className="flex items-center justify-between border-b border-white/6 px-3 py-2">
        <div className="flex items-center gap-2">
          <div
            className="flex h-9 w-9 items-center justify-center rounded-xl border border-white/10 bg-white/[0.03]"
            style={{ boxShadow: `0 0 24px oklch(0.72 0.18 ${sector.hue} / 0.25)` }}
          >
            <sector.icon className="h-4.5 w-4.5" style={{ color: `oklch(0.82 0.14 ${sector.hue})` }} />
          </div>
          <div>
            <div className="text-[10px] uppercase tracking-[0.2em] text-white/45">detay görünümü</div>
            <div className="font-display text-[18px] font-semibold text-white">{sector.tag}</div>
          </div>
        </div>
        <DetailBadge hue={sector.hue}>Live System</DetailBadge>
      </div>
      <div className="relative mt-3 overflow-hidden rounded-2xl border border-white/6 bg-slate-950">
        <div
          className="pointer-events-none absolute inset-0 opacity-70"
          style={{
            background: `radial-gradient(circle at 20% 20%, oklch(0.76 0.14 ${sector.hue} / 0.18), transparent 32%), radial-gradient(circle at 80% 85%, oklch(0.8 0.16 ${sector.hue} / 0.14), transparent 35%)`
          }}
        />
        <Mock />
      </div>
      <div className="mt-3 grid grid-cols-3 gap-2">
        {sector.detail.highlights.map((item) => (
          <div key={item.label} className="rounded-2xl border border-white/8 bg-white/[0.03] p-3">
            <div className="text-[10px] uppercase tracking-[0.18em] text-white/45">{item.label}</div>
            <div className="mt-1 text-[14px] font-semibold text-white">{item.value}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

const SectorCard = ({ sector, index, wide = false, onOpen }) => {
  const { icon: Icon, tag, title, desc, hue, mock: Mock } = sector;
  const mx = useMotionValue(0);
  const my = useMotionValue(0);
  const onMove = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    mx.set(e.clientX - r.left);
    my.set(e.clientY - r.top);
  };

  return (
    <Reveal delay={index * 0.08}>
      <Tilt className="h-full" intensity={wide ? 5 : 8}>
        <div
          onMouseMove={onMove}
          className="group relative h-full overflow-hidden rounded-3xl border border-white/10 bg-white/[0.03] p-8 backdrop-blur-xl transition-all duration-500 hover:-translate-y-2 hover:border-white/25"
          style={{
            transformStyle: 'preserve-3d',
            boxShadow: `0 20px 60px -30px oklch(0.6 0.2 ${hue} / 0)`
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.boxShadow = `0 30px 80px -20px oklch(0.6 0.2 ${hue} / 0.6), 0 0 0 1px oklch(0.75 0.2 ${hue} / 0.2)`;
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.boxShadow = `0 20px 60px -30px oklch(0.6 0.2 ${hue} / 0)`;
          }}
        >
          <motion.div
            className="pointer-events-none absolute -inset-px rounded-3xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
            style={{
              background: useTransform(
                [mx, my],
                ([x, y]) =>
                  `radial-gradient(380px circle at ${x}px ${y}px, oklch(0.75 0.2 ${hue} / 0.22), transparent 60%)`
              )
            }}
          />
          <div
            className="pointer-events-none absolute -right-20 -top-20 h-60 w-60 rounded-full blur-3xl opacity-30 transition-opacity duration-500 group-hover:opacity-80"
            style={{ background: `oklch(0.7 0.22 ${hue} / 0.8)` }}
          />

          <div style={{ transform: 'translateZ(40px)' }} className="relative">
            <div className="flex items-start justify-between gap-4">
              <div
                className="flex h-14 w-14 items-center justify-center rounded-2xl border border-white/10 bg-black/40 transition-all group-hover:scale-110"
                style={{
                  boxShadow: `inset 0 0 0 1px oklch(0.75 0.2 ${hue} / 0.2), 0 0 30px oklch(0.7 0.2 ${hue} / 0)`
                }}
              >
                <Icon className="h-6 w-6" style={{ color: `oklch(0.82 0.15 ${hue})` }} />
              </div>
              <div
                className="rounded-full border border-white/10 px-2.5 py-1 font-mono text-[10px] uppercase tracking-[0.15em]"
                style={{ color: `oklch(0.82 0.15 ${hue})` }}
              >
                0{index + 1}
              </div>
            </div>

            <div className="mt-6 text-[11px] font-medium uppercase tracking-[0.15em] text-white/40">
              {tag}
            </div>
            <h3 className="font-display mt-2 text-[28px] font-semibold leading-[1.05] tracking-tight text-white">
              {title}
            </h3>
            <p className="mt-3 text-[14.5px] leading-relaxed text-white/55">{desc}</p>

            <div
              className="mt-6 overflow-hidden rounded-xl border border-white/10 bg-black/50"
              style={{
                boxShadow: `inset 0 0 40px oklch(0.5 0.15 ${hue} / 0.1)`
              }}
            >
              <div className="flex items-center gap-1.5 border-b border-white/5 bg-white/[0.02] px-3 py-1.5">
                <div className="h-2 w-2 rounded-full bg-white/20" />
                <div className="h-2 w-2 rounded-full bg-white/20" />
                <div className="h-2 w-2 rounded-full bg-white/20" />
                <div className="ml-2 font-mono text-[9px] uppercase tracking-wider text-white/40">
                  Bireveber · {sector.id}.module
                </div>
              </div>
              <Mock />
            </div>

            <div className="mt-6 flex flex-wrap gap-3">
              <GlowButton onClick={() => onOpen(sector.id)} icon={ArrowRight}>
                Daha Fazla Bilgi Al
              </GlowButton>
              <GlowButton
                variant="ghost"
                href="https://wa.me/905355007557"
                target="_blank"
                rel="noreferrer"
                icon={MessageCircle}
              >
                Demo İste
              </GlowButton>
            </div>
          </div>
        </div>
      </Tilt>
    </Reveal>
  );
};

const SectorsSection = ({ onOpen }) => (
  <section id="sektorler" className="relative py-32">
    <div className="mx-auto max-w-7xl px-4 sm:px-6">
      <div className="mx-auto max-w-3xl text-center">
        <Reveal>
          <SectionLabel>Sektörel Çözümler</SectionLabel>
        </Reveal>
        <Reveal delay={0.1}>
          <h2 className="font-display mt-6 text-[48px] font-semibold leading-[1.02] tracking-[-0.02em] text-white md:text-[72px]">
            Sizin sektörünüz,
            <br />
            <span
              className="bg-clip-text text-transparent"
              style={{
                backgroundImage:
                  'linear-gradient(120deg, oklch(0.82 0.15 210), oklch(0.78 0.2 295))'
              }}
            >
              sizin kuralınız.
            </span>
          </h2>
        </Reveal>
        <Reveal delay={0.2}>
          <p className="mt-5 text-pretty text-white/55">
            Her sektörün farklı bir nabzı var. Bireveber modülleri, işletmenizin her zerresine
            değecek şekilde inşa edilir. Kartın içine girin; detay sayfalarında modülleri ve operasyon etkisini derinlemesine görün.
          </p>
        </Reveal>
      </div>
      <div className="mt-16 grid gap-6 md:grid-cols-2 lg:grid-cols-6">
        <div className="lg:col-span-4">
          <SectorCard sector={SECTORS[0]} index={0} wide onOpen={onOpen} />
        </div>
        <div className="lg:col-span-2">
          <SectorCard sector={SECTORS[1]} index={1} onOpen={onOpen} />
        </div>
        <div className="lg:col-span-2">
          <SectorCard sector={SECTORS[2]} index={2} onOpen={onOpen} />
        </div>
        <div className="lg:col-span-2">
          <SectorCard sector={SECTORS[3]} index={3} onOpen={onOpen} />
        </div>
        <div className="lg:col-span-2">
          <SectorCard sector={SECTORS[4]} index={4} onOpen={onOpen} />
        </div>
      </div>
    </div>
  </section>
);

// ────────────────────────────────────────────────────────────────────────────
// DIFFERENTIATOR
// ────────────────────────────────────────────────────────────────────────────

const DiffSection = () => {
  const features = [
    { icon: Puzzle, t: 'Terzi işi modüller', d: 'İhtiyacınıza özel kodlanır' },
    { icon: Workflow, t: 'Hızlı entegrasyon', d: 'Mevcut sistemleri konuşturur' },
    { icon: Shield, t: 'Veri egemenliği', d: 'Verileriniz, sizin sunucunuzda' },
    { icon: Activity, t: 'Gerçek zamanlı', d: 'Panel, cebinizde, anlık' }
  ];
  return (
    <section id="fark" className="relative py-32">
      <div className="mx-auto max-w-7xl px-4 sm:px-6">
        <div className="relative overflow-hidden rounded-[36px] border border-white/10 bg-gradient-to-br from-white/[0.04] to-white/[0.01] p-12 md:p-20">
          <div className="pointer-events-none absolute inset-0 opacity-20">
            <svg className="h-full w-full">
              <defs>
                <pattern id="diff-grid" width="80" height="80" patternUnits="userSpaceOnUse">
                  <path d="M 80 0 L 0 0 0 80" fill="none" stroke="oklch(0.82 0.15 210 / 0.3)" strokeWidth="0.5" />
                </pattern>
              </defs>
              <rect width="100%" height="100%" fill="url(#diff-grid)" />
            </svg>
          </div>
          <div
            className="pointer-events-none absolute -left-40 top-1/2 h-96 w-96 -translate-y-1/2 rounded-full blur-3xl"
            style={{ background: 'oklch(0.72 0.18 295 / 0.3)' }}
          />
          <div
            className="pointer-events-none absolute -right-40 top-10 h-96 w-96 rounded-full blur-3xl"
            style={{ background: 'oklch(0.82 0.15 210 / 0.25)' }}
          />

          <div className="relative grid items-center gap-16 md:grid-cols-[1.1fr_1fr]">
            <div>
              <Reveal>
                <SectionLabel>Bizi farklı kılan ne?</SectionLabel>
              </Reveal>
              <Reveal delay={0.1}>
                <h2 className="font-display mt-6 text-[44px] font-semibold leading-[1] tracking-[-0.02em] text-white md:text-[68px]">
                  Terzi işi.
                  <br />
                  <span
                    className="bg-clip-text text-transparent"
                    style={{
                      backgroundImage:
                        'linear-gradient(120deg, oklch(0.82 0.15 210), oklch(0.78 0.2 295))'
                    }}
                  >
                    Sınır tanımayan
                  </span>
                  <br />
                  modüller.
                </h2>
              </Reveal>
              <Reveal delay={0.2}>
                <p className="mt-6 max-w-lg text-pretty text-[16px] leading-relaxed text-white/60 md:text-[17px]">
                  Size paket bir program satıp kenara çekilmeyiz. İşletmenizin operasyonel dinamiği
                  neyi gerektiriyorsa — o eksiği kapatacak ekstra modülleri sıfırdan geliştirir,
                  sisteme entegre ederiz. Sınırlarınız, sadece hayal gücünüzdür.
                </p>
              </Reveal>
            </div>

            <div className="grid grid-cols-2 gap-4">
              {features.map((f, i) => (
                <Reveal key={f.t} delay={0.3 + i * 0.08}>
                  <div className="group relative overflow-hidden rounded-2xl border border-white/10 bg-black/30 p-5 backdrop-blur transition-all hover:border-cyan-300/30 hover:bg-black/50">
                    <div className="absolute -right-6 -top-6 h-24 w-24 rounded-full bg-cyan-300/10 blur-2xl transition-all group-hover:bg-cyan-300/25" />
                    <f.icon className="h-6 w-6 text-cyan-300" />
                    <div className="mt-4 text-[15px] font-semibold text-white">{f.t}</div>
                    <div className="mt-1 text-[13px] text-white/50">{f.d}</div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ────────────────────────────────────────────────────────────────────────────
// DETAIL OVERLAY
// ────────────────────────────────────────────────────────────────────────────

const DetailModuleCard = ({ item, hue, index }) => (
  <motion.div
    initial={{ opacity: 0, y: 24 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ delay: 0.06 * index, duration: 0.55, ease: [0.16, 1, 0.3, 1] }}
    className="group relative overflow-hidden rounded-[26px] border border-white/10 bg-white/[0.04] p-5"
  >
    <div
      className="pointer-events-none absolute -right-8 -top-8 h-24 w-24 rounded-full blur-2xl opacity-60"
      style={{ background: `oklch(0.76 0.16 ${hue} / 0.22)` }}
    />
    <div
      className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-black/40"
      style={{ boxShadow: `0 0 26px oklch(0.74 0.16 ${hue} / 0.12)` }}
    >
      <item.icon className="h-5 w-5" style={{ color: `oklch(0.82 0.16 ${hue})` }} />
    </div>
    <div className="mt-4 text-[18px] font-semibold text-white">{item.title}</div>
    <p className="mt-2 text-[14px] leading-relaxed text-white/60">{item.text}</p>
  </motion.div>
);

const DetailStatCard = ({ item, hue, index }) => (
  <motion.div
    initial={{ opacity: 0, scale: 0.94 }}
    animate={{ opacity: 1, scale: 1 }}
    transition={{ delay: 0.05 * index, duration: 0.5 }}
    className="rounded-[24px] border border-white/10 bg-black/35 p-5 backdrop-blur"
  >
    <div className="text-[10px] uppercase tracking-[0.22em] text-white/40">{item.label}</div>
    <div
      className="mt-2 font-display text-[28px] font-semibold leading-none"
      style={{ color: `oklch(0.86 0.15 ${hue})` }}
    >
      {item.value}
    </div>
    <div className="mt-2 text-[13px] text-white/55">{item.note}</div>
  </motion.div>
);

const DetailWorkflowCard = ({ step, hue, index }) => (
  <motion.div
    initial={{ opacity: 0, x: 20 }}
    animate={{ opacity: 1, x: 0 }}
    transition={{ delay: 0.08 * index, duration: 0.55 }}
    className="relative rounded-[24px] border border-white/10 bg-white/[0.03] p-4"
  >
    <div
      className="absolute left-4 top-4 flex h-8 w-8 items-center justify-center rounded-full border text-[11px] font-semibold"
      style={{
        borderColor: `oklch(0.76 0.16 ${hue} / 0.3)`,
        color: `oklch(0.86 0.15 ${hue})`,
        background: `oklch(0.16 0.03 ${hue} / 0.7)`
      }}
    >
      0{index + 1}
    </div>
    <div className="pl-12 text-[14px] leading-relaxed text-white/75">{step}</div>
  </motion.div>
);

const DetailOverlay = ({ sector, onClose }) => {
  const contentRef = useRef(null);

  useEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
    };
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener('keydown', onKey);
    };
  }, [onClose]);

  useEffect(() => {
    if (contentRef.current) contentRef.current.scrollTop = 0;
  }, [sector.id]);

  const detail = sector.detail;
  const waText = encodeURIComponent(`Merhaba, ${sector.tag} çözümünüz için demo almak istiyorum.`);
  const gradients = {
    background: `linear-gradient(180deg, oklch(0.1 0.03 ${sector.hue}) 0%, rgba(2,6,23,0.98) 18%, rgba(2,6,23,0.98) 100%)`
  };

  return (
    <AnimatePresence>
      <motion.div
        className="fixed inset-0 z-[100]"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
      >
        <motion.button
          aria-label="Detay ekranını kapat"
          onClick={onClose}
          className="absolute inset-0 h-full w-full cursor-default bg-slate-950/72 backdrop-blur-xl"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        />
        <motion.div
          ref={contentRef}
          className="absolute inset-0 overflow-x-hidden overflow-y-auto"
          initial={{ y: 60, opacity: 0.6, scale: 0.985 }}
          animate={{ y: 0, opacity: 1, scale: 1 }}
          exit={{ y: 24, opacity: 0.5, scale: 0.99 }}
          transition={{ duration: 0.55, ease: [0.16, 1, 0.3, 1] }}
          style={gradients}
        >
          <div
            className="pointer-events-none absolute inset-0"
            style={{
              background: `radial-gradient(circle at 15% 10%, oklch(0.76 0.16 ${sector.hue} / 0.15), transparent 28%), radial-gradient(circle at 85% 20%, oklch(0.76 0.16 ${sector.hue} / 0.14), transparent 30%), linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)`,
              backgroundSize: 'auto, auto, 54px 54px, 54px 54px'
            }}
          />
          <div className="sticky top-0 z-20 border-b border-white/8 bg-slate-950/55 backdrop-blur-2xl">
            <div className="mx-auto flex max-w-7xl items-center justify-between gap-3 px-4 py-4 sm:gap-4 sm:px-6">
              <div className="flex min-w-0 items-center gap-2 sm:gap-3">
                <button
                  onClick={onClose}
                  className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3 py-2 text-[13px] text-white/80 transition hover:border-white/20 hover:bg-white/[0.07] sm:px-4 sm:text-sm"
                >
                  <span className="text-base leading-none">←</span>
                  Ana sayfaya dön
                </button>
                <div className="hidden md:block">
                  <DetailBadge hue={sector.hue}>{detail.eyebrow}</DetailBadge>
                </div>
              </div>
              <button
                onClick={onClose}
                className="flex h-11 w-11 items-center justify-center rounded-full border border-white/10 bg-white/[0.04] text-xl text-white/80 transition hover:border-white/20 hover:bg-white/[0.07]"
                aria-label="Kapat"
              >
                ✕
              </button>
            </div>
          </div>

          <div className="relative mx-auto max-w-7xl px-4 pb-16 pt-10 sm:px-6">
            <section className="relative overflow-hidden rounded-[34px] border border-white/10 bg-white/[0.03] p-5 sm:p-8 md:p-10">
              <div
                className="pointer-events-none absolute -right-20 -top-24 h-72 w-72 rounded-full blur-3xl"
                style={{ background: `oklch(0.78 0.16 ${sector.hue} / 0.24)` }}
              />
              <div className="grid gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
                <div className="relative">
                  <motion.div
                    initial={{ opacity: 0, y: 18 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.55 }}
                  >
                    <DetailBadge hue={sector.hue}>{detail.eyebrow}</DetailBadge>
                    <h2 className="font-display mt-5 max-w-4xl text-[30px] font-semibold leading-[1.02] tracking-[-0.03em] text-white sm:text-[38px] md:text-[68px]">
                      {detail.headline}
                    </h2>
                    <p className="mt-6 max-w-2xl text-[16px] leading-relaxed text-white/63 md:text-[17px]">
                      {detail.intro}
                    </p>
                    <div className="mt-8 flex flex-wrap gap-3">
                      <GlowButton
                        href={`https://wa.me/905355007557?text=${waText}`}
                        target="_blank"
                        rel="noreferrer"
                        icon={MessageCircle}
                      >
                        WhatsApp ile Danış
                      </GlowButton>
                      <GlowButton variant="ghost" href="#iletisim" icon={ArrowRight}>
                        Hemen Demo İste
                      </GlowButton>
                    </div>
                  </motion.div>

                  <div className="mt-8 grid gap-3 md:grid-cols-3">
                    {detail.highlights.map((item, index) => (
                      <DetailStatCard key={item.label} item={item} hue={sector.hue} index={index} />
                    ))}
                  </div>
                </div>

                <motion.div
                  initial={{ opacity: 0, x: 30 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.65, delay: 0.05 }}
                >
                  <DetailMiniScreen sector={sector} />
                </motion.div>
              </div>
            </section>

            <section className="mt-8 grid gap-8 lg:grid-cols-[1.25fr_0.75fr]">
              <div className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6 md:p-8">
                <div className="flex items-center justify-between gap-4">
                  <div>
                    <div className="text-[11px] uppercase tracking-[0.2em] text-white/40">Bento Grid</div>
                    <h3 className="font-display mt-2 text-[34px] font-semibold tracking-[-0.02em] text-white">
                      Çekirdek modüller
                    </h3>
                  </div>
                  <DetailBadge hue={sector.hue}>Deep Dive</DetailBadge>
                </div>
                <div className="mt-6 grid gap-4 md:grid-cols-2">
                  {detail.modules.map((item, index) => (
                    <DetailModuleCard key={item.title} item={item} hue={sector.hue} index={index} />
                  ))}
                </div>
              </div>

              <div className="grid gap-4">
                <motion.div
                  initial={{ opacity: 0, y: 26 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.55, delay: 0.1 }}
                  className="overflow-hidden rounded-[30px] border border-white/10 bg-gradient-to-br from-white/[0.05] to-white/[0.02] p-6"
                >
                  <div className="text-[11px] uppercase tracking-[0.2em] text-white/40">Öne çıkan</div>
                  <div className="mt-4 font-display text-[28px] font-semibold leading-[1.05] tracking-[-0.02em] text-white">
                    “{detail.standout}”
                  </div>
                </motion.div>

                <motion.div
                  initial={{ opacity: 0, y: 26 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.55, delay: 0.15 }}
                  className="rounded-[30px] border border-white/10 bg-black/30 p-6"
                >
                  <div className="text-[11px] uppercase tracking-[0.2em] text-white/40">Neden etkili?</div>
                  <div className="mt-4 space-y-3">
                    {detail.highlights.map((item) => (
                      <div key={item.label} className="rounded-2xl border border-white/8 bg-white/[0.03] px-4 py-3">
                        <div className="text-[12px] font-semibold text-white">{item.label}</div>
                        <div className="mt-1 text-[13px] leading-relaxed text-white/55">{item.note}</div>
                      </div>
                    ))}
                  </div>
                </motion.div>
              </div>
            </section>

            <section className="mt-8 grid gap-8 lg:grid-cols-[0.82fr_1.18fr]">
              <motion.div
                initial={{ opacity: 0, y: 26 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.55, delay: 0.12 }}
                className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6 md:p-8"
              >
                <div className="text-[11px] uppercase tracking-[0.2em] text-white/40">Operasyon akışı</div>
                <h3 className="font-display mt-2 text-[34px] font-semibold tracking-[-0.02em] text-white">
                  Nasıl çalışır?
                </h3>
                <div className="mt-5 space-y-3">
                  {detail.workflow.map((step, index) => (
                    <DetailWorkflowCard key={step} step={step} hue={sector.hue} index={index} />
                  ))}
                </div>
              </motion.div>

              <motion.div
                initial={{ opacity: 0, y: 26 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.55, delay: 0.18 }}
                className="rounded-[30px] border border-white/10 bg-gradient-to-br from-white/[0.04] to-transparent p-6 md:p-8"
              >
                <div className="text-[11px] uppercase tracking-[0.2em] text-white/40">Sahadaki etkisi</div>
                <h3 className="font-display mt-2 max-w-2xl text-[34px] font-semibold tracking-[-0.02em] text-white">
                  Detay ekranı gibi hissettiren, karar verdiren net bir hikâye
                </h3>
                <div className="mt-6 grid gap-4 md:grid-cols-3">
                  {detail.highlights.map((item, index) => (
                    <motion.div
                      key={item.value}
                      initial={{ opacity: 0, y: 24 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ delay: 0.07 * index, duration: 0.5 }}
                      className="rounded-[26px] border border-white/10 bg-black/30 p-5"
                    >
                      <div
                        className="text-[30px] font-display font-semibold"
                        style={{ color: `oklch(0.84 0.16 ${sector.hue})` }}
                      >
                        {item.value}
                      </div>
                      <div className="mt-2 text-[13px] leading-relaxed text-white/55">
                        {item.label} üzerinden {item.note.toLowerCase()}.
                      </div>
                    </motion.div>
                  ))}
                </div>

                <div className="mt-6 rounded-[26px] border border-white/10 bg-black/30 p-5">
                  <div className="text-[11px] uppercase tracking-[0.2em] text-white/40">Bam bam bam etkisi</div>
                  <p className="mt-3 max-w-3xl text-[15px] leading-relaxed text-white/62">
                    Bu detay ekranı; ürünün sadece ne yaptığını değil, operasyonu nasıl dönüştürdüğünü gösterir.
                    Görsel hiyerarşi, modül kümeleri, vurucu öne çıkan metinler ve canlı sistem mock’ları sayesinde ziyaretçi ana sayfayı terk etmeden tam bir ürün deneyimi hisseder.
                  </p>
                </div>
              </motion.div>
            </section>

            <section className="mt-8 overflow-hidden rounded-[34px] border border-white/10 bg-gradient-to-br from-white/[0.05] to-white/[0.02] p-6 md:p-8">
              <div className="grid items-center gap-8 lg:grid-cols-[1.1fr_auto]">
                <div>
                  <div className="text-[11px] uppercase tracking-[0.2em] text-white/40">Son adım</div>
                  <h3 className="font-display mt-2 text-[34px] font-semibold tracking-[-0.02em] text-white">
                    {sector.tag} için hemen aksiyona geçin.
                  </h3>
                  <p className="mt-3 max-w-2xl text-[15px] leading-relaxed text-white/60">
                    İsterseniz canlı demo akışını kuralım, isterseniz doğrudan WhatsApp üzerinden senaryonuzu dinleyelim.
                    Bu ekranın altından çıkış almadan doğrudan iletişime geçilebilir.
                  </p>
                </div>
                <div className="flex flex-col gap-3 sm:flex-row lg:flex-col">
                  <GlowButton variant="primary" href="#iletisim" icon={ArrowRight}>
                    Hemen Demo İste
                  </GlowButton>
                  <GlowButton
                    variant="ghost"
                    href={`https://wa.me/905355007557?text=${waText}`}
                    target="_blank"
                    rel="noreferrer"
                    icon={MessageCircle}
                  >
                    WhatsApp ile Danış
                  </GlowButton>
                </div>
              </div>
            </section>
          </div>
        </motion.div>
      </motion.div>
    </AnimatePresence>
  );
};

// ────────────────────────────────────────────────────────────────────────────
// FOOTER / CONTACT
// ────────────────────────────────────────────────────────────────────────────

const Footer = () => (
  <section id="iletisim" className="relative py-32">
    <div className="mx-auto max-w-7xl px-4 sm:px-6">
      <div className="relative overflow-hidden rounded-[36px] border border-white/10 bg-gradient-to-br from-white/[0.08] via-white/[0.04] to-white/[0.02] p-10 backdrop-blur-2xl md:p-16">
        <motion.div
          className="pointer-events-none absolute inset-0"
          style={{
            background:
              'radial-gradient(ellipse at 30% 30%, oklch(0.72 0.18 295 / 0.25), transparent 60%), radial-gradient(ellipse at 80% 80%, oklch(0.82 0.15 170 / 0.2), transparent 60%)'
          }}
        />
        <div className="pointer-events-none absolute inset-0 opacity-40">
          <div
            className="absolute inset-0"
            style={{
              backgroundImage:
                'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)',
              backgroundSize: '48px 48px'
            }}
          />
        </div>

        <div className="relative grid gap-12 lg:grid-cols-[1.2fr_1fr]">
          <div>
            <Reveal>
              <SectionLabel>Hemen Başlayın</SectionLabel>
            </Reveal>
            <Reveal delay={0.1}>
              <h2 className="font-display mt-6 text-[40px] font-semibold leading-[1.02] tracking-[-0.02em] text-white md:text-[56px]">
                İşletmenizi
                <br />
                <span
                  className="bg-clip-text text-transparent"
                  style={{
                    backgroundImage:
                      'linear-gradient(120deg, oklch(0.82 0.15 210), oklch(0.82 0.18 170), oklch(0.78 0.2 295))'
                  }}
                >
                  otopilota
                </span>{' '}
                alın.
              </h2>
            </Reveal>
            <Reveal delay={0.2}>
              <p className="mt-5 max-w-lg text-pretty text-white/60">
                Bireveber ile hemen iletişime geçin. Size özel demoyu 24 saat içinde hazırlayalım.
              </p>
            </Reveal>
          </div>

          <div className="flex flex-col gap-4">
            <Reveal delay={0.2}>
              <a
                href="https://wa.me/905355007557"
                target="_blank"
                rel="noreferrer"
                className="group relative block overflow-hidden rounded-2xl border border-emerald-400/30 bg-emerald-500/10 p-5 backdrop-blur transition-all hover:border-emerald-400/60 hover:bg-emerald-500/15"
              >
                <motion.div
                  className="pointer-events-none absolute left-8 top-1/2 -translate-y-1/2"
                  aria-hidden
                >
                  {[0, 1].map((i) => (
                    <motion.div
                      key={i}
                      className="absolute h-12 w-12 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-emerald-400/60"
                      animate={{ scale: [1, 2.2], opacity: [0.8, 0] }}
                      transition={{ duration: 2, repeat: Infinity, delay: i * 1 }}
                    />
                  ))}
                </motion.div>
                <div className="relative flex items-center gap-4">
                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-emerald-500 text-white shadow-[0_0_24px_rgba(16,185,129,0.6)]">
                    <MessageCircle className="h-5 w-5" />
                  </div>
                  <div className="flex-1">
                    <div className="text-[12px] uppercase tracking-[0.18em] text-emerald-300/80">
                      WhatsApp
                    </div>
                    <div className="font-display break-words text-[19px] font-semibold text-white sm:text-[22px]">
                      535 500 75 57
                    </div>
                  </div>
                  <ChevronRight className="h-5 w-5 text-emerald-300 transition-transform group-hover:translate-x-1" />
                </div>
              </a>
            </Reveal>

            <Reveal delay={0.3}>
              <a
                href="mailto:iletisim@bireveber.com"
                className="group relative block overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] p-5 backdrop-blur transition-all hover:border-cyan-300/40 hover:bg-white/[0.06]"
              >
                <div className="flex items-center gap-4">
                  <div className="flex h-12 w-12 items-center justify-center rounded-full border border-cyan-300/30 bg-black/40 text-cyan-300">
                    <Mail className="h-5 w-5" />
                  </div>
                  <div className="flex-1">
                    <div className="text-[12px] uppercase tracking-[0.18em] text-cyan-300/80">
                      E-posta
                    </div>
                    <div className="font-display break-all text-[15px] font-semibold leading-snug text-white sm:text-[20px]">
                      iletisim@bireveber.com
                    </div>
                  </div>
                  <ChevronRight className="h-5 w-5 text-cyan-300 transition-transform group-hover:translate-x-1" />
                </div>
              </a>
            </Reveal>
          </div>
        </div>

        <div className="relative mt-16 flex flex-col items-center justify-between gap-4 border-t border-white/5 pt-8 sm:flex-row sm:items-end">
          <div className="min-w-0">
            <BrandMark size="small" />
            <div className="mt-3 text-[12px] text-white/40">© 2026 · Tüm hakları saklıdır.</div>
          </div>
          <div className="max-w-full text-center text-[12px] leading-relaxed text-white/40 sm:text-right">
            Yazılım · Otomasyon · AI Sosyal Medya & Tasarım
            <div className="mt-1 text-white/50">FanoTek Tasarım ve teknoloji</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ────────────────────────────────────────────────────────────────────────────
// APP + ROUTE-LIKE DETAIL STATE
// ────────────────────────────────────────────────────────────────────────────

const getDetailIdFromHash = () => {
  if (typeof window === 'undefined') return null;
  const match = window.location.hash.match(/^#detay-([a-z0-9_-]+)/i);
  return match ? match[1] : null;
};

const App = () => {
  const [selectedId, setSelectedId] = useState(() => getDetailIdFromHash());

  useEffect(() => {
    const syncFromHash = () => {
      const id = getDetailIdFromHash();
      const exists = SECTORS.some((item) => item.id === id);
      setSelectedId(exists ? id : null);
    };
    window.addEventListener('popstate', syncFromHash);
    window.addEventListener('hashchange', syncFromHash);
    syncFromHash();
    return () => {
      window.removeEventListener('popstate', syncFromHash);
      window.removeEventListener('hashchange', syncFromHash);
    };
  }, []);

  const openDetail = (id) => {
    if (!SECTORS.some((item) => item.id === id)) return;
    const nextHash = `#detay-${id}`;
    if (window.location.hash !== nextHash) {
      window.history.pushState({ detail: id }, '', nextHash);
    }
    setSelectedId(id);
  };

  const closeDetail = () => {
    const base = `${window.location.pathname}${window.location.search}`;
    window.history.pushState({}, '', base);
    setSelectedId(null);
  };

  const selectedSector = useMemo(
    () => SECTORS.find((item) => item.id === selectedId) || null,
    [selectedId]
  );

  return (
    <div className="relative min-h-screen overflow-x-clip bg-[#05060a] text-white">
      <NeonBg />
      <Nav />
      <main>
        <Hero />
        <SectorsSection onOpen={openDetail} />
        <AIBotSection onOpen={openDetail} />
        <DiffSection />
        <Footer />
      </main>
      <WhatsAppFab />
      <AnimatePresence mode="wait">
        {selectedSector ? <DetailOverlay key={selectedSector.id} sector={selectedSector} onClose={closeDetail} /> : null}
      </AnimatePresence>
    </div>
  );
};

// ────────────────────────────────────────────────────────────────────────────
// FIXED WHATSAPP FAB
// ────────────────────────────────────────────────────────────────────────────

const WhatsAppFab = () => (
  <motion.a
    href="https://wa.me/905355007557"
    target="_blank"
    rel="noreferrer"
    initial={{ opacity: 0, scale: 0.5, y: 40 }}
    animate={{ opacity: 1, scale: 1, y: 0 }}
    transition={{ delay: 1.4, type: 'spring', stiffness: 200, damping: 18 }}
    className="group fixed bottom-6 right-6 z-[60] flex items-center gap-3"
    aria-label="WhatsApp ile iletişime geç"
  >
    <div className="pointer-events-none absolute right-0 top-1/2 hidden -translate-y-1/2 translate-x-[-70px] rounded-full border border-white/10 bg-slate-900/90 px-4 py-2 text-[12px] font-medium text-white opacity-0 backdrop-blur transition-all duration-300 group-hover:translate-x-[-80px] group-hover:opacity-100 md:block">
      WhatsApp'tan Bilgi Al
    </div>
    <div className="relative">
      {[0, 1, 2].map((i) => (
        <motion.span
          key={i}
          className="pointer-events-none absolute inset-0 rounded-full border-2 border-emerald-400/70"
          animate={{ scale: [1, 2.2], opacity: [0.7, 0] }}
          transition={{ duration: 2.4, repeat: Infinity, delay: i * 0.8 }}
        />
      ))}
      <span className="relative flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 text-white shadow-[0_10px_40px_-10px_rgba(16,185,129,0.8)] transition-transform group-hover:scale-110">
        <MessageCircle className="h-6 w-6" />
      </span>
    </div>
  </motion.a>
);

Object.assign(window, { App });