/* global React */
const { useState } = React;

const FAQS = {
  en: [
    {
      q: "What does EOMA actually do?",
      a: "EOMA makes your brand AI-native. We analyze how AI models cite — or skip — your brand across GEO/AEO and social channels, then execute the moves to close that gap. Content, schema, social posts, citations: end to end, not just monitoring.",
    },
    {
      q: "How is this different from rank-trackers and AI monitoring tools?",
      a: "Most tools tell you you're invisible in ChatGPT. EOMA changes it. We don't stop at dashboards — we ship the schema, content, and social moves that get models to cite you. Analysis is the start, execution is the product.",
    },
    {
      q: "Why does GEO/AEO matter — and why now?",
      a: "Search is collapsing into answers. When ChatGPT, Claude, Gemini, or Perplexity replace 'the 10 blue links,' your brand is either cited in the answer or it's invisible. AEO (Answer Engine Optimization) is what determines the difference.",
    },
    {
      q: "Why does social media presence matter for AI visibility?",
      a: "AI models increasingly use social signal — engagement, mentions, recency — when deciding which brands to cite as sources. A strong social presence isn't just for humans anymore. EOMA optimizes it as a citation source, not just a marketing channel.",
    },
    {
      q: "How long until I see results?",
      a: "Workspaces typically see new model citations within week 2 and meaningful visibility-rate movement inside the first 30 days. Social citation share moves continuously from day one of execution.",
    },
    {
      q: "What does the human do?",
      a: "Set the strategy and approve the moves you'd make anyway. EOMA doesn't replace judgment — it removes the labor between judgment and execution.",
    },
  ],
  tr: [
    {
      q: "EOMA tam olarak ne yapar?",
      a: "EOMA markanı AI-native yapar. AI modellerinin markanı GEO/AEO ve sosyal kanallarda nasıl alıntıladığını — veya atladığını — analiz eder, sonra bu boşluğu kapatacak hamleleri yürütür. İçerik, schema, sosyal paylaşımlar, atıflar: uçtan uca, sadece izleme değil.",
    },
    {
      q: "Bu rank-tracker'lardan ve AI izleme araçlarından nasıl farklı?",
      a: "Çoğu araç sana ChatGPT'de görünmediğini söyler. EOMA bunu değiştirir. Dashboard'larda durmayız — modellerin seni alıntılaması için schema, içerik ve sosyal hamleleri devreye alırız. Analiz başlangıçtır, yürütme üründür.",
    },
    {
      q: "GEO/AEO neden önemli — ve neden şimdi?",
      a: "Arama, cevaplara dönüşüyor. ChatGPT, Claude, Gemini veya Perplexity '10 mavi linki' yerine geçtiğinde, markan ya cevapta alıntılanır ya da görünmez olur. AEO (Answer Engine Optimization) farkı belirleyen şeydir.",
    },
    {
      q: "Sosyal medya varlığı AI görünürlüğü için neden önemli?",
      a: "AI modelleri kaynak olarak hangi markaları alıntılayacağına karar verirken sosyal sinyalleri — etkileşim, mention, güncellik — giderek daha çok kullanıyor. Güçlü sosyal varlık artık sadece insanlar için değil. EOMA onu bir alıntı kaynağı olarak optimize eder, sadece bir pazarlama kanalı olarak değil.",
    },
    {
      q: "Sonuçları ne zaman göreceğim?",
      a: "Workspace'ler tipik olarak 2. hafta içinde yeni model alıntıları görür ve ilk 30 günde anlamlı görünürlük oranı hareketi yaşar. Sosyal alıntı payı yürütmenin 1. gününden itibaren sürekli hareket eder.",
    },
    {
      q: "İnsan ne yapar?",
      a: "Stratejiyi belirle ve zaten yapacağın hamleleri onayla. EOMA muhakemenin yerine geçmez — muhakeme ile yürütme arasındaki emeği kaldırır.",
    },
  ],
};

function FAQ({ t, lang }) {
  const [open, setOpen] = useState(0);
  const items = FAQS[lang] || FAQS.en;
  return (
    <section className="faq section" id="faq">
      <div className="wrap">
        <Reveal className="faq-head">
          <span className="eyebrow">
            <span className="dot"></span>
            {t.nav.faq}
          </span>
          <TwoTone
            parts={[
              { tone: "gray", text: lang === "tr" ? "Net " : "Straight" },
              {
                tone: "accent",
                text: lang === "tr" ? " yanıtlar." : " answers.",
              },
            ]}
          />
        </Reveal>
        <div className="faq-list">
          {items.map((f, i) => (
            <div key={i} className={`faq-item ${i === open ? "is-open" : ""}`}>
              <button className="faq-q" onClick={() => setOpen(i === open ? -1 : i)}>
                <span>{f.q}</span>
                <span className="toggle">{i === open ? "×" : "+"}</span>
              </button>
              <div className="faq-a" style={{ maxHeight: i === open ? 320 : 0 }}>
                <div className="faq-a-inner">{f.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ ctaLabel, t, lang, urls, pricingHref, onDemoClick }) {
  const f = t.final;
  return (
    <section className="final" data-screen-label="Final CTA">
      <div className="final-top">
        <div className="final-cta">
          <span className="eyebrow">{f.startNow}</span>
          <h2>
            <span className="gray">{f.hSub} </span>
            {f.h} <span style={{ color: "var(--eoma-sky-blue)" }}>{f.hAccent}</span>
          </h2>
          <button type="button" className="btn btn-primary btn-lg" onClick={onDemoClick}>
            <LogoBadge size={42} />
            {ctaLabel}
          </button>
        </div>
        <div className="footer-cols">
          <div className="footer-col">
            <h4>{f.footerCols.product}</h4>
            <ul>
              <li>
                <span className="footer-link-soon" aria-disabled="true">
                  {f.productLinks.aiNative}
                </span>
              </li>
              <li>
                <a href="#features">{f.productLinks.geo}</a>
              </li>
              <li>
                <a href="#features">{f.productLinks.social}</a>
              </li>
              <li>
                <a href={pricingHref || "/pricing"}>{f.productLinks.pricing}</a>
              </li>
              <li>
                <span className="footer-link-soon" aria-disabled="true">
                  {f.productLinks.changelog}
                </span>
              </li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>{f.footerCols.company}</h4>
            <ul>
              <li>
                <a href={urls ? urls.contact : "mailto:account@eoma.ai"}>
                  {f.companyLinks.contact}
                </a>
              </li>
              <li>
                <a href={lang === "tr" ? "/tr/privacy" : "/privacy"}>{f.companyLinks.privacy}</a>
              </li>
              <li>
                <a href={lang === "tr" ? "/tr/terms" : "/terms"}>{f.companyLinks.terms}</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div className="final-bottom">
        <span>{f.copy}</span>
        <div className="socials">
          {["X", "Li", "Ig", "Yt"].map((s) => (
            <a key={s} className="social-pill" href="#">
              <span style={{ fontSize: 11, fontFamily: "var(--font-mono)" }}>{s}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FAQ, FinalCTA });