/* global React */
const { useState: useStateS, useEffect: useEffectS } = React;

// ═══════════════════════════════════════════════════════════════
// FEATURES SECTION
// ═══════════════════════════════════════════════════════════════
const FEATURE_DEFS = [
  {
    key: "kanban",
    tag: "01 / Customer Tracking Board",
    title: "See where every customer stands — at a glance.",
    body: "The one who texted you, the one who asked for a wholesale quote but hasn't bought yet, the one waiting on an offer, the one who already closed — every customer sits in their own lane. Nobody slips through the cracks. Drop-off goes down because you always know where each person is.",
    bullets: [
      "Split by status — messaged / asked price / awaiting offer / won",
      "The lead who asked for a quote but didn't buy doesn't get forgotten",
      "Drag a card with your finger to update status",
      "Open offers, who's bringing in how much — live total",
    ],
    Demo: () => <KanbanDemo speed={window.__yukaSpeed || 1} />,
  },
  {
    key: "avci",
    tag: "02 / Lead Hunter",
    title: "Find thousands of new leads with one click.",
    body: "Type a sector, pick a city — get 60 businesses with their address, phone, and website on screen. Start calling and messaging immediately. For Russia, Belarus, Kazakhstan, it also pulls from Yandex.",
    bullets: [
      "Auto-pulled list from Google Maps",
      "Phone, address, website come ready",
      "Repeat the same search — no extra charge",
      "1 search = 1 credit; overage is a small per-credit fee",
    ],
    Demo: () => <AvciDemo speed={window.__yukaSpeed || 1} />,
  },
  {
    key: "chat",
    tag: "03 / All Conversations, One Screen",
    title: "WhatsApp, Instagram, Facebook, Telegram — all in one place.",
    body: "No matter where the customer writes from, you reply from the same screen. Read voice notes without listening — the system transcribes them automatically. Every message shows the customer's pipeline stage next to it, so you never lose context.",
    bullets: [
      "WhatsApp, Instagram, Facebook, Telegram, VK, web — all of it",
      "Voice notes show up as readable transcripts on their own",
      "Saved reply templates — answer in one tap",
      "Customer's sales stage shown next to the message",
    ],
    Demo: () => <ChatDemo speed={window.__yukaSpeed || 1} />,
  },
  {
    key: "broadcast",
    tag: "04 / Bulk Messaging",
    title: "Hit hundreds of customers with one tap.",
    body: "Send to everyone, or only the ones you picked. The customer's name and sector slot themselves into the message — it feels personal to every recipient. Watch who received, who read, and who replied in real time.",
    bullets: [
      "Group by tag — send only to who you want",
      "{name}, {sector} placeholders fill themselves in",
      "Live per-channel delivery counter",
      "WhatsApp-ban-proof — your number stays safe",
    ],
    Demo: () => <BroadcastDemo speed={window.__yukaSpeed || 1} />,
  },
  {
    key: "voice",
    tag: "05 / Voice Notes to Text",
    title: "Understand voice notes without playing them.",
    body: "Customer sent a voice note, you don't have time to listen. The system transcribes it automatically into clean sentences. If the message is in a foreign language, it adds the English translation underneath.",
    bullets: [
      "Voice notes get transcribed automatically",
      "Smart cleanup — turns it into readable text",
      "Translation in both directions (optional)",
      "See the summary in the chat list — no need to open",
    ],
    Demo: () => <VoiceDemo speed={window.__yukaSpeed || 1} />,
  },
  {
    key: "team",
    tag: "06 / Team & Permissions",
    title: "You decide how much access each teammate gets.",
    body: "Owner, manager, sales rep — everyone has their own permission boundary. Want to hide phone numbers from junior reps? You can. Who did what, who edited which customer — everything is logged.",
    bullets: [
      "3 ready-made permission tiers + customize as you like",
      "Hide phone numbers from staff if you want",
      "Who edited which customer, when — full history",
      "Send an invite link, add a teammate in 30 seconds",
    ],
    Demo: () => <TeamDemo speed={window.__yukaSpeed || 1} />,
  },
  {
    key: "social",
    tag: "07 / Social Media",
    title: "Write once, publish to three channels.",
    body: "Prepare one post for Instagram, Facebook, and Telegram. Upload the image, pick the time — even if you forget about it, Yuka posts when the time comes.",
    bullets: [
      "One screen, three channels",
      "Scheduled posting — runs even at night",
      "Image, link preview, hashtags",
      "Incoming comments drop into your inbox",
    ],
    Demo: () => <SocialDemo speed={window.__yukaSpeed || 1} />,
  },
  {
    key: "integrations",
    tag: "08 / All Channels Connect",
    title: "Every channel talks to Yuka — one-click setup.",
    body: "WhatsApp, Instagram, Facebook, Telegram, VK and a form on your website — all connected via official APIs. No third-party tools, no complicated setup. Live in 3 minutes.",
    bullets: [
      "Official WhatsApp, Instagram, Facebook integrations",
      "Contact form to embed on your website",
      "Instant push to your phone",
      "Hook into your other software via webhooks",
    ],
    Demo: () => <IntegrationsDemo speed={window.__yukaSpeed || 1} />,
  },
];

function FeatureRow({ f, index }) {
  const reverse = index % 2 === 1;
  const Demo = f.Demo;
  return (
    <div className={`demo-row ${reverse ? "reverse" : ""}`}>
      <div className="demo-text">
        <div className="demo-tag">{f.tag}</div>
        <h3>{f.title}</h3>
        <p>{f.body}</p>
        <ul>
          {f.bullets.map((b) => <li key={b}>{b}</li>)}
        </ul>
      </div>
      <Demo />
    </div>
  );
}

function FeaturesSection({ order }) {
  const features = order
    .map((k) => FEATURE_DEFS.find((f) => f.key === k))
    .filter(Boolean);

  return (
    <section id="features" className="section" style={{ paddingTop: 120 }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>PRODUCT TOUR</span>
          <h2 className="h-section">
            The only tool your <span className="serif">B2B</span> sales team needs.
          </h2>
          <p>
            Yuka — an AI-powered B2B sales agency. From finding new customers to closing deals, everything sits in one panel.
            The examples below are live animations — they show how the product actually works.
          </p>
        </div>

        {features.map((f, i) => (
          <FeatureRow f={f} index={i} key={f.key} />
        ))}
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// METRICS
// ═══════════════════════════════════════════════════════════════
function MetricsSection() {
  const metrics = [
    { v: "6", l: "Channels, one panel", s: "WA · IG · FB · TG · VK · Web" },
    { v: "$0", l: "14-day trial", s: "no credit card required" },
    { v: "<3 min", l: "Time to launch", s: "we help you set it up" },
    { v: "✓", l: "WhatsApp-ban-proof", s: "we guarantee it" },
  ];
  return (
    <section className="section" style={{ background: "var(--bg-alt)", padding: "72px 0" }}>
      <div className="container">
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 32,
        }}>
          {metrics.map((m) => (
            <div key={m.l} style={{ borderLeft: "2px solid var(--accent)", paddingLeft: 18 }}>
              <div style={{ fontSize: 48, fontWeight: 600, letterSpacing: "-0.04em", color: "var(--ink)", lineHeight: 1 }}>
                {m.v}
              </div>
              <div style={{ marginTop: 10, fontSize: 15, fontWeight: 500, color: "var(--ink)" }}>{m.l}</div>
              <div style={{ marginTop: 4, fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.06em" }}>
                {m.s}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// PRICING
// ═══════════════════════════════════════════════════════════════
function PricingSection({ ctaText }) {
  return (
    <section id="pricing" className="section">
      <div className="container">
        <div className="section-head" style={{ textAlign: "center", margin: "0 auto 56px" }}>
          <span className="eyebrow" style={{ marginInline: "auto" }}><span className="dot"></span>PRICING</span>
          <h2 className="h-section" style={{ marginTop: 16 }}>Transparent, simple, <span className="serif">fair.</span></h2>
          <p style={{ margin: "18px auto 0", maxWidth: 560 }}>
            One plan, monthly subscription + pay-as-you-go search credits. 14-day free trial with no credit card; cancel anytime.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1.15fr", gap: 24, alignItems: "stretch" }}>
          {/* Free / Trial */}
          <div className="price-card">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{ fontSize: 13, fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--muted)" }}>Free</span>
              <span style={{ fontSize: 11, color: "var(--accent-ink)", fontFamily: "var(--font-mono)" }}>14 days</span>
            </div>
            <div className="price-amount">
              <span className="num">$0</span>
              <span className="per">/ trial</span>
            </div>
            <div style={{ color: "var(--muted)", fontSize: 14 }}>
              Explore the system, connect your channels, start using it. No credit card.
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 14, color: "var(--ink-2)" }}>
              <li>✓ 1 owner + 1 teammate</li>
              <li>✓ 5 lead-search credits on the house</li>
              <li>✓ All channels enabled</li>
              <li>✓ Extra searches: $0.50 / search</li>
            </ul>
            <a href="https://crm.yukagency.com/en/register" className="btn btn-ghost" style={{ width: "100%", justifyContent: "center", marginTop: "auto" }}>Try now</a>
          </div>

          {/* Starter */}
          <div className="price-card">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{ fontSize: 13, fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--muted)" }}>Starter</span>
              <span style={{ fontSize: 11, color: "var(--muted)", fontFamily: "var(--font-mono)" }}>billed monthly</span>
            </div>
            <div className="price-amount">
              <span className="num">$59</span>
              <span className="per">/ mo</span>
            </div>
            <div style={{ color: "var(--ink-2)", fontSize: 14, lineHeight: 1.5 }}>
              For small businesses. <strong style={{ color: "var(--ink)" }}>1-3 users</strong> and <strong style={{ color: "var(--accent-ink)" }}>80 lead searches per month</strong> included.
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 14, color: "var(--ink-2)" }}>
              <li>✓ Up to 3 users</li>
              <li>✓ 80 lead-search credits / month</li>
              <li>✓ Unlimited chat and bulk messaging</li>
              <li>✓ WhatsApp, Instagram, Facebook, Telegram</li>
              <li>✓ Extra user: $10 / month</li>
              <li>✓ Extra search credit: $0.50 / search</li>
            </ul>
            <a href="https://crm.yukagency.com/en/register" className="btn btn-ghost" style={{ width: "100%", justifyContent: "center", marginTop: "auto" }}>Pick Starter</a>
          </div>

          {/* Pro */}
          <div className="price-card feature">
            <div className="badge">Popular</div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{ fontSize: 13, fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--accent-ink)" }}>Pro</span>
              <span style={{ fontSize: 11, color: "var(--muted)", fontFamily: "var(--font-mono)" }}>billed monthly</span>
            </div>
            <div className="price-amount">
              <span className="num">$179</span>
              <span className="per">/ mo</span>
            </div>
            <div style={{ color: "var(--ink-2)", fontSize: 14, lineHeight: 1.5 }}>
              For growing teams. <strong style={{ color: "var(--ink)" }}>5 users</strong>, <strong style={{ color: "var(--accent-ink)" }}>200 lead searches per month</strong> and <strong style={{ color: "var(--ink)" }}>product integrations</strong> included.
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 14, color: "var(--ink-2)" }}>
              <li>✓ Up to 5 users</li>
              <li>✓ 200 lead-search credits / month</li>
              <li>✓ Unlimited chat and bulk messaging</li>
              <li>✓ Telegram, website, VK, WhatsApp product integration</li>
              <li>✓ Voice transcription + translation</li>
              <li>✓ Extra user: $8 / month</li>
              <li>✓ Extra search credit: $0.35 / search (discounted)</li>
              <li>✓ Priority support (real-time on Telegram)</li>
            </ul>
            <a href="https://crm.yukagency.com/en/register" className="btn btn-primary" style={{ width: "100%", justifyContent: "center", marginTop: "auto" }}>{ctaText}</a>
          </div>
        </div>

        {/* credit math */}
        <div style={{
          marginTop: 56, padding: "28px 32px",
          background: "var(--surface)",
          border: "1px solid var(--border)",
          borderRadius: "var(--radius-lg)",
          display: "flex",
          alignItems: "center",
          gap: 32,
          flexWrap: "wrap",
        }}>
          <div style={{ flex: 1, minWidth: 280 }}>
            <div style={{ fontSize: 12, fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--muted)", marginBottom: 8 }}>
              How credits work
            </div>
            <div style={{ fontSize: 16, color: "var(--ink-2)", lineHeight: 1.55 }}>
              Only <strong style={{ color: "var(--accent-ink)" }}>successful</strong> lead searches consume credits. Repeated searches, empty results, chats and bulk messages — <strong style={{ color: "var(--ink)" }}>all free</strong>.
            </div>
          </div>
          <div style={{ display: "flex", gap: 24, fontFamily: "var(--font-mono)" }}>
            <div>
              <div style={{ fontSize: 28, fontWeight: 600, color: "var(--ink)" }}>80 / 200</div>
              <div style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase" }}>starter / pro monthly</div>
            </div>
            <div>
              <div style={{ fontSize: 28, fontWeight: 600, color: "var(--ink)" }}>$0.35 - $0.50</div>
              <div style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase" }}>extra search fee</div>
            </div>
            <div>
              <div style={{ fontSize: 28, fontWeight: 600, color: "var(--ink)" }}>30 days</div>
              <div style={{ fontSize: 11, color: "var(--muted)", textTransform: "uppercase" }}>same search remembered</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// TESTIMONIALS
// ═══════════════════════════════════════════════════════════════
const TESTIMONIALS = [
  {
    quote: "We gathered all our Polish customers coming through Telegram into one panel. Sales jumped clearly in the first month.",
    name: "Mert Y.",
    title: "Founder, export company",
    avatar: "MY",
    color: "var(--accent)",
  },
  {
    quote: "Instead of listening to voice notes, we read the transcripts and reply. This one feature alone saves us hours every week.",
    name: "Selin Y.",
    title: "Sales lead, healthcare",
    avatar: "SY",
    color: "var(--violet)",
  },
  {
    quote: "Lead Hunter brought us hundreds of new companies in the first week. The credit system is fair — empty searches don't cost.",
    name: "Burak O.",
    title: "Business owner, automotive",
    avatar: "BO",
    color: "var(--amber)",
  },
];

function TestimonialsSection() {
  return (
    <section id="reviews" className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>CUSTOMER STORIES</span>
          <h2 className="h-section" style={{ marginTop: 16 }}>What our <span className="serif">customers</span> say.</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {TESTIMONIALS.map((t) => (
            <div key={t.name} className="card card-hover" style={{ padding: 28, display: "flex", flexDirection: "column", gap: 20 }}>
              <div style={{ fontSize: 32, lineHeight: 1, fontFamily: "var(--font-serif)", color: "var(--accent)" }}>"</div>
              <p style={{ fontSize: 17, color: "var(--ink)", lineHeight: 1.5, flex: 1 }}>{t.quote}</p>
              <div style={{ display: "flex", alignItems: "center", gap: 12, paddingTop: 16, borderTop: "1px solid var(--border)" }}>
                <div style={{
                  width: 40, height: 40, borderRadius: "50%",
                  background: t.color, color: "white",
                  display: "grid", placeItems: "center",
                  fontWeight: 600, fontSize: 14,
                }}>
                  {t.avatar}
                </div>
                <div>
                  <div style={{ fontWeight: 500, color: "var(--ink)", fontSize: 14 }}>{t.name}</div>
                  <div style={{ fontSize: 12, color: "var(--muted)" }}>{t.title}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// FAQ
// ═══════════════════════════════════════════════════════════════
const FAQ = [
  {
    q: "What is Yuka Agency — is it just software?",
    a: "No. Yuka is an AI-powered B2B sales agency. We don't just hand you a panel — we set it up with you, prepare message templates that match your team's voice, and connect channels (WhatsApp, Instagram, Telegram, VK) on your behalf. It's software, support, and joint operations all in one.",
  },
  {
    q: "Can we use WhatsApp officially?",
    a: "Yes — we work with Meta's official WhatsApp Business platform. We handle account approval together with you. Usually everything is ready in 3-7 business days.",
  },
  {
    q: "Will the panel shut down if I run out of monthly search credits?",
    a: "No. The panel stays open, chat and bulk messaging keep working. Only the lead-search feature pauses. Buy more searches in one click — $0.50 on Starter, $0.35 on Pro — or wait for next month's renewal.",
  },
  {
    q: "Is customer data safe? GDPR-compliant?",
    a: "Yes. Our servers are in Germany, with bank-grade security. Each company sees only its own data — no cross-tenant leakage. You can even hide customer phone numbers from junior staff. Fully GDPR and EU data-residency compliant.",
  },
  {
    q: "Which languages does voice transcription support?",
    a: "Transcription works in 99 languages. Translation is ready for Turkish ⇄ English, Russian, Arabic, German, French, Spanish. Want another language? Tell us, we'll add it.",
  },
  {
    q: "How do I import my existing customer list?",
    a: "One-time Excel import. If you have Telegram, VK or WhatsApp chat history, we migrate those too. We do this together with you during onboarding — don't worry about it.",
  },
  {
    q: "Can I use it on my phone?",
    a: "Yes. We have native iOS and Android apps. Push notifications come in instantly — when a customer messages, you see it on your phone immediately.",
  },
];

function FAQSection() {
  return (
    <section id="faq" className="section">
      <div className="container" style={{ maxWidth: 880 }}>
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>FREQUENTLY ASKED</span>
          <h2 className="h-section" style={{ marginTop: 16 }}>Quick answers.</h2>
        </div>
        <div>
          {FAQ.map((item, i) => (
            <details className="faq-item" key={i} open={i === 0}>
              <summary>
                {item.q}
                <span className="chev"></span>
              </summary>
              <p>{item.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// FINAL CTA
// ═══════════════════════════════════════════════════════════════
function FinalCTA({ ctaText }) {
  return (
    <section className="section" style={{ paddingBottom: 40 }}>
      <div className="container">
        <div style={{
          position: "relative",
          background: "var(--ink)",
          color: "var(--bg)",
          borderRadius: "var(--radius-xl)",
          padding: "80px 56px",
          overflow: "hidden",
          textAlign: "center",
        }}>
          <div style={{
            position: "absolute", inset: 0,
            background: "radial-gradient(ellipse at 30% 0%, oklch(from var(--accent) l c h / 0.5), transparent 50%), radial-gradient(ellipse at 80% 100%, oklch(from var(--amber) l c h / 0.3), transparent 50%)",
          }} />
          <div className="grain" />
          <div style={{ position: "relative" }}>
            <span style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.08em",
              textTransform: "uppercase", color: "var(--accent)",
              padding: "6px 12px", borderRadius: 999,
              background: "oklch(from var(--accent) l c h / 0.15)",
            }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)" }}></span>
              START NOW
            </span>
            <h2 className="h-section" style={{ marginTop: 24, color: "var(--bg)", fontSize: "clamp(40px, 5vw, 68px)" }}>
              Grow your B2B sales with <span className="serif" style={{ color: "var(--accent)" }}>Yuka.</span>
            </h2>
            <p style={{ marginTop: 16, fontSize: 18, color: "oklch(from var(--bg) l c h / 0.7)", maxWidth: 560, margin: "16px auto 0" }}>
              AI-powered B2B agency. 14-day free trial, no card required. We set it up in 3 minutes, add your team, and you start tracking customers from a single panel.
            </p>
            <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 36, flexWrap: "wrap" }}>
              <a href="https://crm.yukagency.com/en/register" className="btn btn-primary">{ctaText} →</a>
              <a href="https://wa.me/905350779230?text=Yuka%20CRM%20demo%20request" target="_blank" rel="noopener" className="btn" style={{ background: "transparent", color: "var(--bg)", borderColor: "oklch(from var(--bg) l c h / 0.3)" }}>Request a demo</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// FOOTER
// ═══════════════════════════════════════════════════════════════
function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr", gap: 48 }}>
          <div>
            <a href="/en/" className="brand"><span className="brand-mark">Y</span>Yuka Agency</a>
            <p style={{ marginTop: 16, fontSize: 14, color: "var(--muted)", maxWidth: 280 }}>
              AI-powered B2B sales agency. From finding leads to closing deals — chat, bulk messaging, tracking; all in one panel.
            </p>
            <div style={{ display: "flex", gap: 8, marginTop: 20 }}>
              {["X", "in", "ig", "tg"].map((s) => (
                <a key={s} href="#" style={{
                  width: 36, height: 36, borderRadius: 8,
                  border: "1px solid var(--border)",
                  display: "grid", placeItems: "center",
                  color: "var(--muted)", textDecoration: "none",
                  fontSize: 13, fontWeight: 600,
                }}>{s}</a>
              ))}
            </div>
          </div>

          <div>
            <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--muted)", marginBottom: 16 }}>Product</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 14 }}>
              <li><a href="#features" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Features</a></li>
              <li><a href="#pricing" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Pricing</a></li>
              <li><a href="/en/integrations.html" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Integrations</a></li>
              <li><a href="/en/mobile.html" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Mobile app</a></li>
              <li><a href="/en/api.html" style={{ color: "var(--ink-2)", textDecoration: "none" }}>API</a></li>
            </ul>
          </div>
          <div>
            <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--muted)", marginBottom: 16 }}>Company</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 14 }}>
              <li><a href="/en/about.html" style={{ color: "var(--ink-2)", textDecoration: "none" }}>About</a></li>
              <li><a href="#reviews" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Customers</a></li>
              <li><a href="/en/blog.html" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Blog</a></li>
              <li><a href="/en/careers.html" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Careers</a></li>
              <li><a href="/en/contact.html" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Contact</a></li>
            </ul>
          </div>
          <div>
            <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--muted)", marginBottom: 16 }}>Legal</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 14 }}>
              <li><a href="https://crm.yukagency.com/privacy" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Privacy</a></li>
              <li><a href="https://crm.yukagency.com/privacy" style={{ color: "var(--ink-2)", textDecoration: "none" }}>GDPR</a></li>
              <li><a href="https://crm.yukagency.com/privacy" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Terms</a></li>
              <li><a href="https://crm.yukagency.com" style={{ color: "var(--ink-2)", textDecoration: "none" }}>Status</a></li>
            </ul>
          </div>
        </div>

        <div style={{ marginTop: 64, paddingTop: 28, borderTop: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
          <div style={{ fontSize: 13, color: "var(--muted)" }}>
            © 2026 Yuka Agency · Made with ☕ in İstanbul
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 16, fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--muted)" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)", boxShadow: "0 0 0 4px oklch(0.62 0.16 150 / 0.2)" }}></span>
              All systems operational
            </span>
            <span>v2.4.1</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  FeaturesSection, MetricsSection, PricingSection, TestimonialsSection, FAQSection, FinalCTA, SiteFooter,
  FEATURE_DEFS,
});