(function () {
/* Aibolone — sayfa kodu (Nav, Hero, sections, Footer) */
const { Button, Card, Badge, Input, StatCard, SectionHeading } = window.Aibolone;
const { useEffect, useState } = React;

function Icon({ name, size = 20, color }) {
  const ref = React.useRef(null);
  useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = "";
      const el = document.createElement("i");
      el.setAttribute("data-lucide", name);
      ref.current.appendChild(el);
      window.lucide.createIcons({ attrs: { width: size, height: size, stroke: color || "currentColor", "stroke-width": 2 } });
    }
  });
  return <span ref={ref} style={{ display: "inline-flex", color }} />;
}

/* ---------- PARTICLE CANVAS ---------- */
function ParticleCanvas() {
  const canvasRef = React.useRef(null);
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const C = '12, 183, 137';
    const COUNT = 85;
    const LINK_D = 185;
    let raf;

    const resize = () => {
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
    };
    resize();
    window.addEventListener('resize', resize);

    const pts = Array.from({ length: COUNT }, () => ({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      vx: (Math.random() - 0.5) * 0.44,
      vy: (Math.random() - 0.5) * 0.44,
      r: Math.random() * 1.8 + 0.9,
    }));

    const tick = (ts) => {
      const w = canvas.width, h = canvas.height;
      ctx.clearRect(0, 0, w, h);

      // Particles + connections
      for (let i = 0; i < pts.length; i++) {
        const a = pts[i];
        a.x += a.vx; a.y += a.vy;
        if (a.x < 0) { a.x = 0; a.vx *= -1; }
        if (a.x > w) { a.x = w; a.vx *= -1; }
        if (a.y < 0) { a.y = 0; a.vy *= -1; }
        if (a.y > h) { a.y = h; a.vy *= -1; }

        // Glow halo
        const g = ctx.createRadialGradient(a.x, a.y, 0, a.x, a.y, a.r * 4);
        g.addColorStop(0, `rgba(${C}, 0.5)`);
        g.addColorStop(1, `rgba(${C}, 0)`);
        ctx.beginPath();
        ctx.arc(a.x, a.y, a.r * 4, 0, Math.PI * 2);
        ctx.fillStyle = g;
        ctx.fill();

        // Solid core
        ctx.beginPath();
        ctx.arc(a.x, a.y, a.r, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(${C}, 0.88)`;
        ctx.fill();

        for (let j = i + 1; j < pts.length; j++) {
          const b = pts[j];
          const dx = a.x - b.x, dy = a.y - b.y;
          const d = Math.sqrt(dx * dx + dy * dy);
          if (d < LINK_D) {
            ctx.beginPath();
            ctx.moveTo(a.x, a.y);
            ctx.lineTo(b.x, b.y);
            ctx.strokeStyle = `rgba(${C}, ${(1 - d / LINK_D) * 0.24})`;
            ctx.lineWidth = 0.9;
            ctx.stroke();
          }
        }
      }

      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);

    return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); };
  }, []);

  return (
    <canvas ref={canvasRef} style={{
      position: 'absolute', inset: 0,
      width: '100%', height: '100%',
      pointerEvents: 'none', zIndex: 0,
    }} />
  );
}

/* ---------- NAV ---------- */
function Nav() {
  const items = ["SİSTEM", "NASIL ÇALIŞIR", "SONUÇLAR", "HAKKIMIZDA"];
  const ids = ["#system", "#how", "#results", "#about"];
  return (
    <nav style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "rgba(242,242,242,0.78)", backdropFilter: "blur(20px)",
      WebkitBackdropFilter: "blur(20px)",
      borderBottom: "1px solid var(--border-hairline)", transition: "var(--transition-base)",
    }}>
      <div className="wrap" style={{ height: 72, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <a href="#"><img src="assets/logo.png" alt="Aibolone" style={{ height: 52 }} /></a>
        <div style={{
          display: "flex", alignItems: "center", gap: 4,
          background: "rgba(255,255,255,0.62)", backdropFilter: "blur(12px)",
          WebkitBackdropFilter: "blur(12px)",
          border: "1px solid var(--border-soft)", borderRadius: "var(--radius-pill)",
          padding: "5px 6px",
        }}>
          {items.map((t, i) => (
            <a key={t} href={ids[i]} style={{
              fontSize: 10, fontWeight: 700, letterSpacing: "0.2em",
              color: "var(--text-muted)", transition: "var(--transition-base)",
              padding: "7px 16px", borderRadius: "var(--radius-pill)",
              textDecoration: "none", display: "block",
            }}
            onMouseEnter={e => { e.target.style.color = "var(--accent)"; e.target.style.background = "var(--accent-soft)"; }}
            onMouseLeave={e => { e.target.style.color = "var(--text-muted)"; e.target.style.background = "transparent"; }}
            >{t}</a>
          ))}
        </div>
        <Button as="a" href="#contact" size="sm">Ücretsiz Analiz</Button>
      </div>
    </nav>
  );
}

/* ---------- HERO ---------- */
function Hero() {
  return (
    <section className="ds-lab-grid" style={{ position: "relative", overflow: "hidden", padding: "120px 0 100px" }}>
      <ParticleCanvas />
      <div style={{ position: "absolute", top: "-20%", left: "50%", width: 1000, height: 1000, background: "rgba(12,183,137,0.20)", filter: "blur(140px)", borderRadius: "50%", pointerEvents: "none", zIndex: 1, animation: "orb-a 22s ease-in-out infinite", transform: "translateX(-50%)" }} />
      <div style={{ position: "absolute", top: "25%", left: "-5%", width: 480, height: 480, background: "rgba(43,199,158,0.13)", filter: "blur(90px)", borderRadius: "50%", pointerEvents: "none", zIndex: 1, animation: "orb-b 18s ease-in-out infinite 4s" }} />
      <div style={{ position: "absolute", top: "10%", right: "-5%", width: 480, height: 480, background: "rgba(43,199,158,0.13)", filter: "blur(90px)", borderRadius: "50%", pointerEvents: "none", zIndex: 1, animation: "orb-c 20s ease-in-out infinite 8s" }} />

      <div className="wrap" style={{ position: "relative", textAlign: "center", zIndex: 2 }}>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 8, padding: "8px 18px",
          marginBottom: 36, background: "var(--surface-glass)", backdropFilter: "blur(12px)",
          WebkitBackdropFilter: "blur(12px)",
          border: "1px solid var(--border-hairline)", borderRadius: "var(--radius-pill)",
        }}>
          <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--accent)", boxShadow: "0 0 8px var(--accent-glow)", display: "block", flexShrink: 0 }} />
          <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.18em", color: "var(--text-subtle)", textTransform: "uppercase" }}>Fitness Creator'lar için yapay zeka sistemi</span>
        </div>

        <h1 style={{ fontSize: "clamp(44px, 6vw, 84px)", fontWeight: 800, lineHeight: 1.04, letterSpacing: "-0.03em", color: "var(--text-strong)", margin: "0 auto 28px", maxWidth: 920 }}>
          Fitness Influencerları İçin<br />
          <span style={{ color: "var(--accent)" }}>Yapay Zeka Satış Sistemleri</span>
        </h1>
        <p style={{ fontSize: 22, fontWeight: 400, lineHeight: 1.55, color: "var(--text-muted)", maxWidth: 600, margin: "0 auto 44px" }}>
          Aibolone, fitness influencerları ve online koçlar için Instagram mesajlarını otomatik müşteri ve satış sistemine dönüştüren teknolojik altyapılar kurar.
        </p>
        <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap", marginBottom: 72 }}>
          <Button as="a" href="#contact" size="lg">Ücretsiz Analiz Al</Button>
          <Button as="a" href="#system" variant="secondary" size="lg">Sistemi Gör</Button>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 14, maxWidth: 900, margin: "0 auto" }}>
          {[
            ["message-square","Mesaj Otomasyonu"],
            ["users","Müşteri Takibi"],
            ["bar-chart-3","Satış Analizi"],
            ["bot","Yapay Zeka Asistanı"],
            ["settings","Merkezi Yönetim Paneli"],
          ].map(([ic, t]) => (
            <Card key={t} style={{ padding: "20px 14px", display: "flex", flexDirection: "column", alignItems: "center", gap: 12, textAlign: "center" }}>
              <span style={{ display:"flex", width:40, height:40, borderRadius:10, alignItems:"center", justifyContent:"center", background:"var(--accent-soft)" }}>
                <Icon name={ic} color="var(--accent)" />
              </span>
              <span style={{ fontSize: 13, fontWeight: 600, color: "var(--text-body)", lineHeight: 1.35 }}>{t}</span>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- PROBLEM ---------- */
function Problem() {
  const items = [
    ["bell-off","Kaçan Mesajlar","Gelen mesajların yoğunluğundan potansiyel müşterilere geç dönülmesi."],
    ["settings","Manuel Süreçler","Satış, takip ve bilgi verme süreçlerinin tamamen elle yapılması."],
    ["shuffle","Düzensiz Takip","Kimle ne konuşulduğunun unutulması ve takip sisteminin olmaması."],
    ["clock","Zaman Kaybı","Günde saatlerinizi sadece mesaj yanıtlamaya harcamanız."],
    ["trending-down","Düşük Dönüşüm","Hızlı yanıt verilemediği için satışa dönebilecek kişilerin kaybedilmesi."],
    ["lock","Ölçeklenememe","Kişisel markanızın sadece siz çalıştığınız sürece para kazandırması."],
  ];
  return (
    <section style={{ padding: "96px 0", background: "var(--surface-raised)" }}>
      <div className="wrap">
        <SectionHeading title="Takipçi Var." accent="Sistem Yok." subtitle="İçerik üretiyor ve büyüyorsunuz, ancak arka plandaki düzensizlik potansiyel gelirinizi kaybetmenize neden oluyor." />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18, marginTop: 56 }}>
          {items.map(([ic, t, d]) => (
            <Card key={t} style={{ position: "relative", overflow: "hidden", paddingTop: 28 }}>
              <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 3, background: "linear-gradient(90deg, var(--accent), rgba(12,183,137,0))", borderRadius: "16px 16px 0 0", pointerEvents: "none" }} />
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
                <div style={{ display:"flex", width:36, height:36, borderRadius:8, alignItems:"center", justifyContent:"center", background:"var(--accent-soft)", flexShrink: 0 }}>
                  <Icon name={ic} size={16} color="var(--accent)" />
                </div>
                <h3 style={{ fontSize: 20, color: "var(--text-strong)", margin: 0 }}>{t}</h3>
              </div>
              <p style={{ fontSize: 15, lineHeight: 1.65, color: "var(--text-muted)", margin: 0 }}>{d}</p>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- SYSTEM / FLOW ---------- */
function System() {
  const steps = [["message-square","Mesaj",false],["bot","Yapay Zeka",true],["activity","Takip",false],["check-circle-2","Satış",false]];
  return (
    <section id="system" style={{ padding: "96px 0" }}>
      <div className="wrap">
        <SectionHeading eyebrow="Otomatik Gelir Sistemi" title="Mesajdan" accent="Satışa" subtitle="Instagram üzerinden gelen takipçileri otomatik olarak satış sürecine dönüştüren yapay zeka destekli altyapı." />
        <div style={{ position: "relative", display: "flex", justifyContent: "center", alignItems: "center", flexWrap: "wrap", gap: 0, marginTop: 64 }}>
          <div style={{ position: "absolute", top: "50%", left: "calc(12.5% + 60px)", right: "calc(12.5% + 60px)", height: 1, borderTop: "1.5px dashed var(--border-strong)", transform: "translateY(-50%)", pointerEvents: "none", zIndex: 0 }} />
          {steps.map(([ic, t, active], i) => (
            <React.Fragment key={t}>
              <div style={{
                display: "flex", flexDirection: "column", alignItems: "center", gap: 14,
                padding: "28px 32px", borderRadius: 20, transition: "var(--transition-base)",
                background: active ? "var(--accent)" : "var(--surface-card)",
                border: `1px solid ${active ? "var(--accent)" : "var(--border-hairline)"}`,
                boxShadow: active ? "0 0 40px var(--accent-glow), var(--shadow-md)" : "var(--shadow-sm)",
                color: active ? "#fff" : "var(--text-body)",
                minWidth: 130, position: "relative", zIndex: 1,
              }}>
                <div style={{ width: 52, height: 52, borderRadius: 14, display: "flex", alignItems: "center", justifyContent: "center", background: active ? "rgba(255,255,255,0.18)" : "var(--accent-soft)" }}>
                  <Icon name={ic} size={24} color={active ? "#fff" : "var(--accent)"} />
                </div>
                <span style={{ fontWeight: 700, fontSize: 14, letterSpacing: "0.05em", textAlign: "center" }}>{t}</span>
              </div>
              {i < 3 && (
                <div style={{ width: 44, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2 }}>
                  <Icon name="chevron-right" size={20} color="var(--accent)" />
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- PRICING ---------- */
function Pricing() {
  const feats = ["Yapay Zeka DM Otomasyonu","Potansiyel Müşteri Takibi","Otomatik Geri Dönüş Sistemi","Temel CRM Kurulumu","Instagram Satış Akışı Tasarımı","SSS Otomasyonu","Müşteri Organizasyon Sistemi"];
  const tags = ["AI Destekli","Creator Odaklı","Satış Sistemi","DM Otomasyonu","CRM Altyapısı","Premium Destek"];
  return (
    <section style={{ padding: "96px 0", background: "var(--surface-raised)" }}>
      <div className="wrap" style={{ maxWidth: 640 }}>
        <div style={{ position: "relative", borderRadius: "calc(var(--radius-xl) + 3px)", padding: 3, background: "linear-gradient(135deg, var(--accent), rgba(43,199,158,0.3), rgba(12,183,137,0.6))", boxShadow: "0 0 60px var(--accent-glow)" }}>
          <Card glow={false} hover={false} style={{ padding: "48px 44px", position: "relative", overflow: "hidden", borderRadius: "var(--radius-xl)", border: "none" }}>
            <div style={{ position: "absolute", top: "-30%", right: "-10%", width: 300, height: 300, background: "var(--accent-soft)", filter: "blur(80px)", borderRadius: "50%", pointerEvents: "none" }} />
            <div style={{ textAlign: "center", marginBottom: 28, position: "relative" }}>
              <Badge variant="soft" style={{ marginBottom: 18 }}>Önerilen Sistem</Badge>
              <h3 style={{ fontSize: 44, color: "var(--accent)", margin: "0 0 18px" }}>PRO</h3>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8, justifyContent: "center", marginBottom: 24 }}>
                {tags.map(t => <Badge key={t} variant="outline">{t}</Badge>)}
              </div>
              <p style={{ fontFamily: "var(--font-heading)", fontSize: 48, fontWeight: 700, color: "var(--text-strong)", margin: "0 0 4px" }}>
                499$ <span style={{ fontSize: 16, fontWeight: 400, color: "var(--text-subtle)" }}>Kurulum</span>
              </p>
              <p style={{ fontSize: 14, color: "var(--text-subtle)", margin: 0 }}>+ 100$ Aylık Bakım Ücreti</p>
            </div>
            <div style={{ height: 1, background: "var(--border-hairline)", margin: "24px 0" }} />
            <div style={{ display: "flex", flexDirection: "column", gap: 14, margin: "0 0 32px", position: "relative" }}>
              {feats.map(f => (
                <div key={f} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <Icon name="check-circle-2" size={18} color="var(--accent)" />
                  <span style={{ fontSize: 14, fontWeight: 500, color: "var(--text-body)" }}>{f}</span>
                </div>
              ))}
            </div>
            <Button as="a" href="#contact" size="lg" style={{ width: "100%", position: "relative" }}>Sistemi Kur</Button>
          </Card>
        </div>
      </div>
    </section>
  );
}

/* ---------- LAB BAND ---------- */
function LabBand() {
  return (
    <section style={{ padding: "40px 0 96px" }}>
      <div className="wrap">
        <div style={{ position: "relative", borderRadius: 24, overflow: "hidden", border: "1px solid var(--border-hairline)", boxShadow: "var(--shadow-lg), 0 0 60px var(--accent-glow)" }}>
          <image-slot id="img-lab-main" src="assets/lab-bio-ai.png" radius="24" placeholder="Fitness AI Lab görseli bırakın" style={{ display: "block", width: "100%", height: "420px" }}></image-slot>
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(248,250,249,0.55) 62%, rgba(248,250,249,0.94) 100%)", pointerEvents: "none" }} />
          <div style={{ position: "absolute", top: 22, left: 22, display: "flex", gap: 20, fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--text-muted)", pointerEvents: "none" }}>
            <span><span style={{ color: "var(--accent)" }}>●</span> LIVE</span>
            <span>GROWTH ENGINE v2.4</span>
          </div>
          <div style={{ position: "absolute", left: 36, bottom: 34, right: 36, pointerEvents: "none" }}>
            <div className="ds-eyebrow" style={{ color: "var(--accent)", marginBottom: 12 }}>The Aibolone Lab</div>
            <h2 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(28px,3.4vw,42px)", color: "var(--text-strong)", margin: 0, maxWidth: 680, lineHeight: 1.12 }}>
              Kişisel markanız için anabolik satış sistemleri
            </h2>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- HOW ---------- */
function How() {
  const steps = [["1","Analiz","Satış süreciniz detaylıca analiz edilir ve eksikler belirlenir."],["2","Kurulum","Otomasyon ve yapay zeka altyapısı hesabınıza entegre edilir."],["3","Otomasyon","Mesaj, filtreleme ve satış süreçleri tamamen otomatikleşir."],["4","Ölçekleme","Sistem verilerle optimize edilir ve satış hacminiz büyütülür."]];
  return (
    <section id="how" style={{ padding: "96px 0" }}>
      <div className="wrap">
        <SectionHeading title="Nasıl Çalışır?" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 18, marginTop: 64 }}>
          {steps.map(([n, t, d]) => (
            <Card key={n} style={{ position: "relative", overflow: "hidden", paddingTop: 36 }}>
              <div style={{
                position: "absolute", top: -8, right: 14,
                fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 88,
                lineHeight: 1, color: "var(--accent-soft)",
                letterSpacing: "-0.05em", userSelect: "none", pointerEvents: "none",
              }}>0{n}</div>
              <div style={{ position: "relative" }}>
                <div style={{
                  display: "inline-flex", width: 36, height: 36, borderRadius: "50%",
                  background: "var(--accent)", color: "#fff", alignItems: "center", justifyContent: "center",
                  fontFamily: "var(--font-heading)", fontWeight: 700, fontSize: 15,
                  boxShadow: "0 0 20px var(--accent-glow)", marginBottom: 20,
                }}>{n}</div>
                <h3 style={{ fontSize: 22, color: "var(--text-strong)", margin: "0 0 12px" }}>{t}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.65, color: "var(--text-muted)", margin: 0 }}>{d}</p>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- RESULTS ---------- */
function Results() {
  const stats = [
    { value: "%180", label: "Yanıt Hızı Artışı", change: "DM", icon: "trending-up" },
    { value: "3X", label: "Daha Hızlı Takip", change: "CRM", icon: "activity" },
    { value: "%70", label: "Daha Az Manuel İş", change: "AUTO", icon: "cpu" },
  ];
  return (
    <section id="results" style={{ padding: "96px 0", background: "var(--surface-raised)" }}>
      <div className="wrap">
        <SectionHeading title="Gerçek" accent="Sonuçlar" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 0, marginTop: 56, border: "1px solid var(--border-hairline)", borderRadius: "var(--radius-xl)", overflow: "hidden" }}>
          {stats.map(({ value, label, change, icon }, i) => (
            <div key={label} style={{ borderRight: i < 2 ? "1px solid var(--border-hairline)" : "none" }}>
              <StatCard value={value} label={label} change={change} icon={<Icon name={icon} color="var(--accent)" />} style={{ borderRadius: 0, border: "none", boxShadow: "none", background: "var(--surface-raised)" }} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- ABOUT ---------- */
function About() {
  return (
    <section id="about" style={{ padding: "96px 0" }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
        <div style={{ position: "relative" }}>
          <div style={{ position: "absolute", inset: "-6%", background: "var(--accent-soft)", filter: "blur(80px)", borderRadius: "50%", pointerEvents: "none" }} />
          <image-slot id="img-anabolic" src="assets/anabolic-ai.png" radius="20" placeholder="Anabolik + AI görseli bırakın" style={{ position: "relative", display: "block", width: "100%", height: "460px", border: "1px solid var(--border-hairline)", borderRadius: "20px", boxShadow: "var(--shadow-md), 0 0 40px var(--accent-glow)" }}></image-slot>
        </div>
        <div style={{ textAlign: "left" }}>
          <SectionHeading title="Neden" accent="Buradayız?" align="left" />
          <div style={{ display: "flex", flexDirection: "column", gap: 22, marginTop: 32, fontSize: 19, fontWeight: 400, lineHeight: 1.65, color: "var(--text-muted)" }}>
            <p style={{ margin: 0 }}>Bugünün içerik üreticileri artık sadece içerik paylaşan kişiler değil. Kendi markasını büyüten, satış yapan ve topluluk yöneten dijital işletmelere dönüşüyorlar.</p>
            <p style={{ margin: 0 }}>Aibolone olarak amacımız; bu karmaşayı daha düzenli, sürdürülebilir ve profesyonel bir sisteme dönüştürmek.</p>
            <p style={{ margin: 0, fontWeight: 600, color: "var(--text-strong)" }}>Biz teknolojiyi karmaşık hale getirmek için değil, işleri daha sade, hızlı ve yönetilebilir hale getirmek için kullanıyoruz.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- COLORFUL CTA ---------- */
function ColorfulCTA({ children, onClick }) {
  const [h, setH] = React.useState(false);
  return (
    <button onClick={onClick}
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        width: "100%", padding: "20px 28px", border: "none", cursor: "pointer",
        borderRadius: "var(--radius-md)", color: "#fff",
        fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 14,
        textTransform: "uppercase", letterSpacing: "0.12em",
        backgroundImage: "linear-gradient(100deg, #0CB789, #14C9D4, #2BC79E, #5FD96B)",
        backgroundSize: "260% 100%",
        backgroundPosition: h ? "100% 0" : "0 0",
        boxShadow: h ? "0 0 36px rgba(20,201,212,0.5), 0 8px 22px rgba(12,183,137,0.35)" : "0 6px 18px rgba(12,183,137,0.28)",
        transform: h ? "translateY(-1px)" : "none",
        transition: "all 0.5s cubic-bezier(0.4,0,0.2,1)",
      }}>
      {children}
    </button>
  );
}

/* ---------- CONTACT ---------- */
function Contact() {
  const [sent, setSent] = useState(false);
  return (
    <section id="contact" style={{ padding: "96px 0", background: "var(--surface-raised)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", bottom: "-20%", right: "10%", width: 600, height: 600, background: "var(--accent-soft)", filter: "blur(120px)", borderRadius: "50%" }} />
      <div className="wrap" style={{ maxWidth: 720, position: "relative" }}>
        <SectionHeading title="Kitlenizi" accent="Gelire Dönüştürün" subtitle="Ücretsiz analizinizi alın ve sisteminizi birlikte planlayalım." />
        <Card hover={false} style={{ padding: 40, marginTop: 44 }}>
          {sent ? (
            <div style={{ textAlign: "center", padding: "32px 0" }}>
              <Icon name="check-circle-2" size={48} color="var(--accent)" />
              <h3 style={{ color: "var(--text-strong)", margin: "16px 0 6px", fontSize: 22 }}>Talebiniz Alındı</h3>
              <p style={{ color: "var(--text-muted)", margin: 0 }}>En kısa sürede ücretsiz analiziniz için dönüş yapacağız.</p>
            </div>
          ) : (
            <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
                <Input label="İsim" placeholder="Adınız Soyadınız" />
                <Input label="Instagram Hesabı" placeholder="@kullaniciadi" />
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
                <Input label="Takipçi Sayısı" placeholder="Örn: 50k" />
                <Input label="Ne Satıyorsunuz?" placeholder="Eğitim, Danışmanlık vb." />
              </div>
              <Input label="En Büyük Probleminiz" as="textarea" rows={4} placeholder="Süreçlerinizdeki en büyük engel nedir?" />
              <ColorfulCTA onClick={() => setSent(true)}>Ücretsiz Analiz Talep Et</ColorfulCTA>
            </div>
          )}
        </Card>
      </div>
    </section>
  );
}

/* ---------- LEGAL CONTENT ---------- */
const LEGAL = {
  privacy: {
    title: "Gizlilik Politikası",
    updated: "Son güncelleme: 26.06.2026",
    sections: [
      { h: "1. Veri Sorumlusu", p: "Bu internet sitesi ve bağlı hizmetler, Retrax LLC (Wyoming, ABD) tarafından işletilmektedir. Veri sorumlusu ile iletişime geçmek için info@aibolone.com e-posta adresi kullanılabilir." },
      { h: "2. Topladığımız Veriler", p: "Hizmet süreçlerinin yürütülmesi amacıyla; ad, soyad, e-posta adresi, telefon numarası, kurumsal veya kişisel sosyal medya (Instagram vb.) hesap bilgileri, form yanıtları, ödeme ve fatura bilgileri (ödemeler Wise ve ilgili güvenli ödeme geçitleri üzerinden işlenir, kart bilgileri tarafımızca saklanmaz), site kullanım istatistikleri ve yazışma kayıtları toplanmaktadır." },
      { h: "3. Kullanım Amacı", p: "Toplanan kişisel veriler; talep edilen içerik üreticisi altyapı ve workflow sistemlerinin kurulması, müşteri ile iletişimin sürdürülmesi, finansal süreçlerin ve faturalandırmanın yönetilmesi ile uluslararası yasal yükümlülüklerin yerine getirilmesi amaçlarıyla işlenmektedir." },
      { h: "4. Üçüncü Taraflarla Paylaşım", p: "Verileriniz, yalnızca taahhüt edilen hizmetlerin teknik olarak çalışmasını sağlayan küresel altyapı sağlayıcıları, bulut sistemleri, ödeme işlemcimiz Wise ve yasal mercilerin resmi talepleri doğrultusunda zorunlu olan haller dışında üçüncü şahıslarla paylaşılmaz ve ticari amaçla satılmaz." },
      { h: "5. Saklama Süresi", p: "Müşteri ile olan hizmet ve ticari ilişki sona erdikten sonra, yasal yükümlülükler ve olası ihtilafların çözümü göz önünde bulundurularak veriler güvenli sistemlerimizde 1 yıl süreyle saklanır. Süre sonunda veriler silinir veya anonim hale getirilir." },
      { h: "6. Kullanıcı Hakları", p: "Kullanıcılar, verilerinin işlenip işlenmediğini öğrenme, işlenmişse buna ilişkin bilgi talep etme, eksik veya yanlış işlenmiş verilerin düzeltilmesini isteme, verilerin silinmesini veya yok edilmesini talep etme haklarına sahiptir. Bu haklara ilişkin talepler info@aibolone.com adresine iletilmelidir." },
      { h: "7. Değişiklikler", p: "Retrax LLC, bu Gizlilik Politikası hükümlerini dilediği zaman güncelleme hakkını saklı tutar. Güncel politika internet sitesinde yayınlandığı andan itibaren geçerlilik kazanır." },
    ],
  },
  terms: {
    title: "Hizmet Şartları",
    updated: "Son güncelleme: 26.06.2026",
    sections: [
      { h: "1. Taraflar", p: "Bu Hizmet Şartları, Wyoming, ABD merkezli Retrax LLC (\"Şirket\") ile aibolone.com ve bağlı kanallar üzerinden hizmet alan kullanıcı/müşteri (\"Müşteri\") arasındaki ticari ilişkiyi, hak ve yükümlülükleri düzenler." },
      { h: "2. Hizmetin Tanımı", p: "Şirket; fitness influencer'ları ve çevrimiçi koçlar için içerik üreticisi altyapısı, iş akış süreçlerinin dijitalleştirilmesi, veri saklama, lead yönetim sistemleri ve satış süreçlerinin yapılandırılması hizmetlerini sunar. Hizmetin detaylı kapsamı, her müşteri için ayrı hazırlanan teklif veya sipariş formunda belirtilir." },
      { h: "3. Ödeme Koşulları", p: "Ödemeler, Şirket tarafından belirlenen uluslararası ödeme altyapıları (Wise vb.) üzerinden, teklifte üzerinde anlaşılan tutar ve para birimi cinsinden tahsil edilir. Sunulan hizmetler tek seferlik kurulum ve yapılandırma projeleri olup, abonelik veya düzenli tekrarlayan ücretlendirme içermez." },
      { h: "4. Müşteri Yükümlülükleri", p: "Müşteri, sistemlerin kurulması ve entegrasyonu için gerekli olan platform erişimlerini (sosyal medya hesapları, bulut depolama alanları vb.) Şirket'e zamanında ve eksiksiz sağlamakla yükümlüdür. Müşteri, entegre edilen bu üçüncü taraf platformların kullanım ve topluluk kurallarına uymaktan bizzat sorumludur." },
      { h: "5. Üçüncü Taraf Bağımlılığı", p: "Kurulan altyapı ve yönetim sistemleri, küresel servis sağlayıcıların mimarisine dayanmaktadır. Bu platformların kendi politikalarında yapacağı güncellemeler, API değişiklikleri, küresel kesintiler veya kısıtlamalar Şirket'in kontrolü dışındadır ve bunlardan kaynaklanan aksaklıklardan Şirket sorumlu tutulamaz." },
      { h: "6. Sorumluluk Sınırı", p: "Şirket, iş akış sistemlerinin teknik kurulumundan sorumludur. Müşteri'ye belirli bir ciro, gelir artışı, takipçi veya kesin bir satış başarısı garanti edilmez. Şirket'in doğabilecek olası zararlardaki hukuki sorumluluğu, en fazla Müşteri tarafından bu sözleşme kapsamında ödenen toplam hizmet bedeli kadardır." },
      { h: "7. Uygulanacak Hukuk ve Yetki", p: "Bu sözleşmeden doğabilecek her türlü ihtilafta Türkiye Cumhuriyeti hukuku uygulanacak olup, ihtilafların çözümünde İstanbul Mahkemeleri ve İcra Daireleri münhasıran yetkilidir." },
      { h: "8. Fikri Mülkiyet Hakları", p: "Proje sürecinde Şirket tarafından geliştirilen mimari şablonlar, sistem tasarımları ve iş akış modelleri Retrax LLC'nin fikri mülkiyetindedir. Müşteri, bu sistemleri yalnızca kendi ticari işletmesinde kullanma hakkına sahip olup, sistemleri üçüncü şahıslara satamaz, kiralayamaz veya ücretsiz dağıtamaz." },
      { h: "9. İletişim", p: "Hizmet şartlarına ilişkin her türlü soru ve bildirim için info@aibolone.com adresi üzerinden iletişim kurulmalıdır." },
    ],
  },
  cookies: {
    title: "Çerez Politikası",
    updated: "Son güncelleme: 26.06.2026",
    sections: [
      { h: "1. Çerez Nedir?", p: "Çerezler, aibolone.com adresini ziyaret ettiğinizde cihazınıza kaydedilen küçük metin dosyalarıdır. İnternet sitemizin güvenli, hızlı ve verimli çalışması ile kullanıcı deneyimini analiz etmek amacıyla kullanılır." },
      { h: "2. Kullandığımız Çerez Türleri", p: "Zorunlu Çerezler: Sitenin temel işlevlerinin, güvenliğinin ve form gönderim yapılarının çalışması için zorunludur.\n\nAnalitik Çerezler: Ziyaretçilerin siteyi nasıl kullandığını anlamak, trafik istatistiklerini ölçmek ve performansı artırmak amacıyla tercih edilir.\n\nPazarlama Çerezleri: Kullanıcıların ilgi alanlarına yönelik içerik sunulması ve reklam performanslarının ölçümlenmesi amacıyla kullanılır." },
      { h: "3. Çerezlerin Yönetimi", p: "Kullanıcılar, kullandıkları internet tarayıcısının (Chrome, Safari, Firefox vb.) ayarlar sekmesinden çerezleri diledikleri zaman temizleme, engelleme veya sınır getirme hakkına sahiptir. Zorunlu çerezlerin engellenmesi durumunda, internet sitesinin bazı bölümleri işlevini kısmen yitirebilir." },
      { h: "4. Üçüncü Taraf Çerezleri", p: "Sitemizde yer alan bazı analiz ve performans ölçüm çerezleri, küresel teknoloji sağlayıcıları tarafından yerleştirilmektedir. Bu çerezlerin veri işleme süreçleri, ilgili sağlayıcıların kendi gizlilik ve çerez politikalarına tabidir." },
      { h: "5. İletişim", p: "Çerez politikamıza yönelik her türlü geri bildirim ve sorunuz için info@aibolone.com adresinden bizimle iletişime geçebilirsiniz." },
    ],
  },
  refund: {
    title: "Ödeme ve İade Politikası",
    updated: "Son güncelleme: 26.06.2026",
    sections: [
      { h: "1. Ödeme Koşulları", p: "Hizmet bedelleri, Şirket tarafından gönderilen resmi teklif veya sipariş formunda belirtilen döviz cinsi (USD/TRY) üzerinden, Wise veya Şirket'in belirleyeceği güvenli bankacılık kanallarıyla tahsil edilir. Sunulan hizmetler proje bazlı, tek seferlik iş hacmini kapsar; tekrarlayan abonelik ücreti veya üyelik modeli bulunmamaktadır." },
      { h: "2. İptal ve İade Hakları", p: "Kurulum Öncesi İptal: Teknik kurulum süreçleri fiilen başlatılmadan önce yapılacak iptal taleplerinde ödenen ücretin tamamı iade edilir.\n\nKurulum Esnası İptal: Teknik kurulum başladıktan sonra keyfi iptal taleplerinde; Şirket'in projeye tahsis ettiği mesai ve maliyetler gözetilerek iade yapılmaz.\n\nTeslim Sonrası Deneme Süresi: Projenin teslimini müteakip Müşteri'nin 7 günlük deneme ve itiraz süresi bulunur. Bu süre dolduktan sonra yapılacak iade talepleri işleme alınmaz.\n\nDüzeltilemez Hatalar: Kurulan sistemin teklif şartlarına uygun çalışmaması halinde Şirket'e 7 iş günü düzeltme süresi tanınır. Bu sürede sorun giderilemezse ücretin tamamı iade edilir." },
      { h: "3. İade Talepleri", p: "Her türlü iade ve iptal talebi info@aibolone.com adresine yazılı ve gerekçeli olarak iletilmelidir. Şirket, bu taleplere en geç 3 iş günü içinde resmi ve yazılı yanıt vermekle yükümlüdür." },
      { h: "4. Kur Farkı ve İşlem Ücretleri", p: "Uluslararası transfer sistemlerinin kullanılması sebebiyle aracı kurumlar, bankalar veya Wise tarafından kesilen komisyonlar, işlem ücretleri ve kur farkı maliyetleri Müşteri'nin sorumluluğundadır. İadeler, Şirket'in kasasına giren net tutar üzerinden gerçekleştirilir." },
    ],
  },
};

/* ---------- LEGAL MODAL ---------- */
function LegalModal({ pageKey, onClose }) {
  const data = LEGAL[pageKey];
  useEffect(() => {
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = ""; };
  }, []);
  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, zIndex: 200,
      background: "rgba(0,0,0,0.55)", backdropFilter: "blur(6px)",
      display: "flex", alignItems: "flex-start", justifyContent: "center",
      padding: "40px 20px", overflowY: "auto",
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        background: "var(--surface-card)", borderRadius: "var(--radius-lg)",
        border: "1px solid var(--border-hairline)", boxShadow: "var(--shadow-lg)",
        width: "100%", maxWidth: 720, padding: "48px 44px", position: "relative",
      }}>
        <button onClick={onClose} style={{
          position: "absolute", top: 20, right: 20,
          background: "var(--surface-inset)", border: "1px solid var(--border-soft)",
          borderRadius: "var(--radius-sm)", width: 36, height: 36,
          display: "flex", alignItems: "center", justifyContent: "center",
          cursor: "pointer", color: "var(--text-muted)",
        }}>
          <Icon name="x" size={18} />
        </button>
        <p style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-subtle)", margin: "0 0 8px", letterSpacing: "0.1em" }}>{data.updated}</p>
        <h2 style={{ fontFamily: "var(--font-heading)", fontSize: 32, fontWeight: 800, color: "var(--text-strong)", margin: "0 0 36px" }}>{data.title}</h2>
        <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
          {data.sections.map(s => (
            <div key={s.h}>
              <h3 style={{ fontSize: 15, fontWeight: 700, color: "var(--text-strong)", margin: "0 0 8px", letterSpacing: "0.01em" }}>{s.h}</h3>
              {s.p.split("\n\n").map((para, i) => (
                <p key={i} style={{ fontSize: 15, lineHeight: 1.7, color: "var(--text-muted)", margin: i === 0 ? 0 : "10px 0 0" }}>{para}</p>
              ))}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------- FOOTER ---------- */
function Footer({ onLegal }) {
  const legalLinks = [
    ["Gizlilik Politikası", "privacy"],
    ["Hizmet Şartları", "terms"],
    ["Çerez Politikası", "cookies"],
    ["Ödeme ve İade", "refund"],
  ];
  return (
    <footer style={{ padding: "56px 0", borderTop: "1px solid var(--border-hairline)" }}>
      <div className="wrap" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 48, flexWrap: "wrap" }}>
        <div style={{ maxWidth: 300 }}>
          <a href="#"><img src="assets/logo.png" alt="Aibolone" style={{ height: 54, marginBottom: 16 }} /></a>
          <a href="mailto:info@aibolone.com" style={{ display: "flex", width: "fit-content", alignItems: "center", gap: 8, fontSize: 13, fontWeight: 500, color: "var(--text-body)" }}
             onMouseEnter={e=>e.currentTarget.style.color="var(--accent)"} onMouseLeave={e=>e.currentTarget.style.color="var(--text-body)"}>
            <Icon name="mail" size={16} color="var(--accent)" /> info@aibolone.com
          </a>
          <a href="https://wyobiz.wyo.gov/Business/FilingDetails.aspx?eFNum=255014073128047110236149068188071181017250184168" target="_blank" rel="noreferrer"
             style={{ display: "flex", width: "fit-content", alignItems: "center", gap: 8, marginTop: 12, fontSize: 13, fontWeight: 500, color: "var(--text-body)" }}
             onMouseEnter={e=>e.currentTarget.style.color="var(--accent)"} onMouseLeave={e=>e.currentTarget.style.color="var(--text-body)"}>
            <Icon name="shield-check" size={16} color="var(--accent)" /> ABD Resmi Şirket Kaydı
          </a>
        </div>
        <div style={{ display: "flex", gap: 56 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {legalLinks.map(([label, key]) => (
              <a key={key} href="#" onClick={e => { e.preventDefault(); onLegal(key); }}
                style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", color: "var(--text-muted)", textTransform: "uppercase" }}
                onMouseEnter={e=>e.target.style.color="var(--accent)"} onMouseLeave={e=>e.target.style.color="var(--text-muted)"}>{label}</a>
            ))}
          </div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 18 }}>
          <div style={{ display: "flex", gap: 18, color: "var(--text-muted)" }}>
            <a href="https://www.instagram.com/aibolone/" target="_blank" rel="noreferrer" style={{ color: "var(--text-muted)", display: "inline-flex" }}
               onMouseEnter={e=>e.currentTarget.style.color="var(--accent)"} onMouseLeave={e=>e.currentTarget.style.color="var(--text-muted)"}>
              <Icon name="instagram" />
            </a>
          </div>
          <span className="ds-eyebrow">© 2026 Aibolone</span>
        </div>
      </div>
    </footer>
  );
}

function App() {
  const [legalPage, setLegalPage] = useState(null);
  return (
    <div>
      <Nav /><Hero /><Problem /><System /><LabBand /><How /><Results /><About /><Contact />
      <Footer onLegal={setLegalPage} />
      {legalPage && <LegalModal pageKey={legalPage} onClose={() => setLegalPage(null)} />}
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
})();
