/* =========================================================
   SCHEGEN ADAM — Sections (part 2)
   Audience, Mistakes, Testimonials, Final CTA, Footer
   ========================================================= */

const AudienceSection = ({ gold, segments = [], seoService = {} }) => {
  const seoTags = seoService.tags && seoService.tags.length
    ? seoService.tags
    : [
      "Şengen vizesi",
      "vize danışmanlığı",
      "İspanya vizesi",
      "İstanbul vize danışmanlığı",
      "vize başvurusu",
      "vize dosyası"
    ];

  return (
    <section id="audience" className="section" style={{ background: "var(--paper-2)" }}>
      <div className="wrap">
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 40, marginBottom: 60, flexWrap: "wrap" }}>
          <div className="reveal" style={{ maxWidth: 620 }}>
            <span className="eyebrow">04 · Kimler için</span>
            <h2 className="section-title">
              Farklı profiller.<br />
              <em>Aynı oyun planı</em>, ince ayarlı.
            </h2>
          </div>
          <p className="section-lede reveal" data-delay="1" style={{ maxWidth: 460 }}>
            Çoğu ret, dosya jenerik olduğu için alınır. Biz tek bir şablon
            kullanmıyoruz. Dört farklı oyun planımız var — size uyanı seçeriz.
          </p>
        </div>

        <div className="audience-grid">
          {segments.map((s, i) => (
            <article key={s.tag} className="card reveal audience-card" data-delay={i + 1}>
              <div className="audience-tag">
                <span style={{
                  fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.22em",
                  textTransform: "uppercase", color: gold,
                }}>
                  0{i + 1} · {s.tag}
                </span>
              </div>
              <h3 className="audience-title">{s.title}</h3>
              <p className="audience-body">{s.body}</p>
              <div className="audience-stat-row">
                <span className="audience-stat" style={{ color: gold }}>{s.stat}</span>
                <span className="audience-stat-label">{s.statLabel}</span>
              </div>
            </article>
          ))}
        </div>

        <div className="seo-service-scope reveal" data-delay="5">
          <div>
            <span className="eyebrow">{seoService.eyebrow || "Vize kapsamı"}</span>
            <h3 className="seo-service-title">
              {seoService.title || "Schengen vizesi ve Avrupa vize başvurularında destek veriyoruz."}
            </h3>
            <p className="seo-service-copy">
              {seoService.copy || "İspanya Schengen vizesi başta olmak üzere Fransa vizesi, Almanya vizesi, İtalya vizesi, Hollanda vizesi ve Yunanistan vizesi dosyalarında; vize randevusu, vize evrakları, turistik Schengen vizesi, ticari Schengen vizesi, sponsorlu vize başvurusu ve vize reddi sonrası yeniden başvuru süreçlerini planlıyoruz."}
            </p>
          </div>
          <div className="seo-service-tags" aria-label="Destek verilen vize konuları">
            {seoTags.map(tag => (
              <span key={tag}>{tag}</span>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        .audience-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 18px;
        }
        .audience-card {
          background: var(--paper);
          padding: 30px 26px 26px;
          display: flex; flex-direction: column;
          min-height: 320px;
        }
        .audience-tag { margin-bottom: 24px; }
        .audience-title {
          font-family: var(--f-display);
          font-size: 22px;
          line-height: 1.2;
          letter-spacing: -0.01em;
          font-weight: 600;
          margin: 0 0 12px;
          text-wrap: balance;
        }
        .audience-body {
          margin: 0; color: var(--ink-2); font-size: 14.5px;
          flex: 1;
        }
        .audience-stat-row {
          display: flex; align-items: baseline; gap: 12px;
          padding-top: 22px;
          margin-top: 22px;
          border-top: 1px dashed var(--line-2);
        }
        .audience-stat {
          font-family: var(--f-display);
          font-size: 32px;
          font-weight: 600;
          letter-spacing: -0.02em;
          line-height: 1;
        }
        .audience-stat-label {
          font-family: var(--f-mono);
          font-size: 10.5px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--ink-2);
        }
        .seo-service-scope {
          margin-top: 28px;
          padding: 26px;
          border: 1px solid var(--line);
          border-radius: 14px;
          background: var(--paper);
          display: grid;
          grid-template-columns: 1.4fr 1fr;
          gap: 28px;
          align-items: center;
        }
        .seo-service-title {
          font-family: var(--f-display);
          font-size: 24px;
          line-height: 1.2;
          letter-spacing: -0.01em;
          margin: 12px 0 10px;
        }
        .seo-service-copy {
          margin: 0;
          color: var(--ink-2);
          font-size: 15px;
        }
        .seo-service-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          justify-content: flex-end;
        }
        .seo-service-tags span {
          border: 1px solid var(--line-2);
          border-radius: 99px;
          padding: 8px 11px;
          font-family: var(--f-mono);
          font-size: 10.5px;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--ink-2);
          background: var(--paper-2);
        }
        @media (max-width: 1080px){ .audience-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 760px){
          .seo-service-scope { grid-template-columns: 1fr; }
          .seo-service-tags { justify-content: flex-start; }
        }
        @media (max-width: 560px){ .audience-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
};

/* ========================================================= */

const MistakesSection = ({ gold, mistakes = {} }) => {
  const rejection = mistakes.rejection || [];
  const approval = mistakes.approval || [];

  return (
    <section id="mistakes" className="section" style={{ background: "var(--paper)" }}>
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 720, marginBottom: 56 }}>
          <span className="eyebrow">05 · Açık konuşalım</span>
          <h2 className="section-title">
            Vizenizi öldüren şeyler.<br />
            <em>Ve kurtaranlar.</em>
          </h2>
          <p className="section-lede" style={{ marginTop: 12 }}>
            İnternetteki yazıların çoğu bunu yanlış anlatıyor. İşte operatör
            seviyesinde liste — dosya incelemede gerçekten kullandığımız.
          </p>
        </div>

        <div className="mistakes-grid">
          <div className="mistakes-card mistakes-bad reveal" data-delay="1">
            <div className="mistakes-head">
              <span className="mistakes-pill" data-kind="bad">
                <span className="mistakes-dot" />
                Reddi tetikler
              </span>
              <span className="mistakes-count">{rejection.length}</span>
            </div>
            <ul className="mistakes-list">
              {rejection.map((r, i) => (
                <li key={i}>
                  <span className="mistakes-x">×</span>
                  <span>{r}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="mistakes-card mistakes-good reveal" data-delay="2">
            <div className="mistakes-head">
              <span className="mistakes-pill" data-kind="good" style={{ borderColor: gold, color: gold }}>
                <span className="mistakes-dot" style={{ background: gold }} />
                Onayı artırır
              </span>
              <span className="mistakes-count" style={{ color: gold }}>{approval.length}</span>
            </div>
            <ul className="mistakes-list">
              {approval.map((r, i) => (
                <li key={i}>
                  <span className="mistakes-check" style={{ color: gold, borderColor: gold }}>✓</span>
                  <span>{r}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="reveal mistakes-cta-row" data-delay="3" style={{
          marginTop: 32, padding: "22px 26px",
          background: "var(--paper-2)", border: "1px solid var(--line-2)",
          borderRadius: 12,
          display: "flex", justifyContent: "space-between", gap: 24, flexWrap: "wrap",
          alignItems: "center",
        }}>
          <div>
            <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--ink-2)", marginBottom: 6 }}>
              Ücretsiz · Ödeme gerekmez
            </div>
            <div style={{ fontFamily: "var(--f-display)", fontSize: 20, fontWeight: 600, letterSpacing: "-0.01em" }}>
              Profilinizi 12 maddelik kontrolümüzden geçirin.
            </div>
          </div>
          <a href="#cta" className="btn btn-primary">Ücretsiz kontrolü başlat <span className="arr">→</span></a>
        </div>
      </div>

      <style>{`
        .mistakes-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 18px;
        }
        .mistakes-card {
          padding: 30px;
          border-radius: 14px;
          border: 1px solid var(--line);
        }
        .mistakes-bad {
          background: linear-gradient(180deg, #ffffff, #f7f0ee);
          border-color: rgba(160, 60, 50, 0.18);
        }
        .mistakes-good {
          background: linear-gradient(180deg, #0b1e3c, #0e2348);
          color: #eef2fb;
          border-color: rgba(212,175,55,0.30);
          position: relative;
          overflow: hidden;
        }
        .mistakes-good::after {
          content: "";
          position: absolute;
          top: -60px; right: -60px;
          width: 220px; height: 220px;
          background: radial-gradient(closest-side, rgba(212,175,55,0.18), transparent);
          pointer-events: none;
        }
        .mistakes-head {
          display: flex; align-items: center; justify-content: space-between;
          margin-bottom: 22px;
        }
        .mistakes-pill {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 7px 12px;
          border-radius: 99px;
          font-family: var(--f-mono);
          font-size: 10.5px;
          letter-spacing: 0.2em;
          text-transform: uppercase;
          border: 1px solid #b94a3b;
          color: #b94a3b;
          background: rgba(255,255,255,0.6);
        }
        .mistakes-good .mistakes-pill { background: rgba(212,175,55,0.10); }
        .mistakes-dot {
          width: 6px; height: 6px; border-radius: 99px; background: #b94a3b;
        }
        .mistakes-count {
          font-family: var(--f-display);
          font-size: 28px;
          font-weight: 600;
          letter-spacing: -0.02em;
          color: #b94a3b;
        }
        .mistakes-list { list-style: none; margin: 0; padding: 0; }
        .mistakes-list li {
          display: flex; gap: 14px; align-items: flex-start;
          padding: 14px 0;
          border-top: 1px solid var(--line);
          font-size: 15px;
          line-height: 1.5;
        }
        .mistakes-good .mistakes-list li {
          border-top-color: rgba(255,255,255,0.10);
          color: rgba(255,255,255,0.92);
        }
        .mistakes-list li:first-child { border-top: none; }
        .mistakes-x {
          font-size: 22px;
          line-height: 1;
          color: #b94a3b;
          font-weight: 400;
          margin-top: -2px;
        }
        .mistakes-check {
          width: 22px; height: 22px;
          border: 1px solid;
          border-radius: 99px;
          display: inline-grid; place-items: center;
          font-size: 12px;
          flex-shrink: 0;
        }
        @media (max-width: 860px){ .mistakes-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
};

/* ========================================================= */

const Stars = ({ gold }) => (
  <div style={{ display: "inline-flex", gap: 3 }}>
    {Array.from({ length: 5 }).map((_, i) => (
      <svg key={i} width="14" height="14" viewBox="0 0 24 24" fill={gold}>
        <path d="M12 2 L14.9 8.5 L22 9.3 L16.5 14.1 L18 21.2 L12 17.5 L6 21.2 L7.5 14.1 L2 9.3 L9.1 8.5 Z" />
      </svg>
    ))}
  </div>
);

const TestimonialsSection = ({ gold, items = [] }) => {
  return (
    <section id="testimonials" className="section dark" style={{
      background: "linear-gradient(180deg, #0b1e3c 0%, #0a1a36 100%)",
    }}>
      <div className="glow-gold" style={{ top: -200, right: "20%", opacity: 0.3 }} />
      <div className="wrap" style={{ position: "relative" }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 40, marginBottom: 56, flexWrap: "wrap" }}>
          <div className="reveal" style={{ maxWidth: 620 }}>
            <span className="eyebrow">06 · Yorumlar</span>
            <h2 className="section-title">
              Reklam değil.<br />
              <em>Belgeli sonuçlar.</em>
            </h2>
          </div>
          <div className="reveal" data-delay="1" style={{
            display: "flex", gap: 32, alignItems: "center", flexWrap: "wrap",
          }}>
            <div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                <span style={{ fontFamily: "var(--f-display)", fontSize: 38, fontWeight: 600, color: gold, lineHeight: 1 }}>4.9</span>
                <span style={{ fontFamily: "var(--f-mono)", fontSize: 11, color: "rgba(255,255,255,0.6)", letterSpacing: "0.18em", textTransform: "uppercase" }}>
                  / 5.0
                </span>
              </div>
              <Stars gold={gold} />
            </div>
            <div style={{ height: 40, width: 1, background: "rgba(255,255,255,0.18)" }} />
            <div>
              <div style={{ fontFamily: "var(--f-display)", fontSize: 38, fontWeight: 600, lineHeight: 1 }}>1,840</div>
              <div style={{ fontFamily: "var(--f-mono)", fontSize: 10.5, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.6)", marginTop: 6 }}>
                Onaylı yorumlar
              </div>
            </div>
          </div>
        </div>

        <div className="testi-grid">
          {items.map((t, i) => (
            <figure key={t.name} className="card testi-card reveal" data-delay={i + 1}>
              <Stars gold={gold} />
              <blockquote className="testi-quote">"{t.quote}"</blockquote>
              <figcaption className="testi-caption">
                <div className="testi-avatar" aria-hidden="true">
                  {t.name.split(" ").map(s => s[0]).join("")}
                </div>
                <div>
                  <div className="testi-name">{t.name}</div>
                  <div className="testi-role">{t.role}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>

      <style>{`
        .testi-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 20px;
        }
        .testi-card {
          padding: 32px;
          display: flex; flex-direction: column; gap: 22px;
        }
        .testi-quote {
          margin: 0;
          font-family: var(--f-display);
          font-size: 22px;
          line-height: 1.4;
          letter-spacing: -0.01em;
          font-weight: 400;
          color: #ecf1fb;
          text-wrap: pretty;
        }
        .testi-caption {
          display: flex; align-items: center; gap: 14px;
          padding-top: 18px; margin-top: auto;
          border-top: 1px solid rgba(255,255,255,0.08);
        }
        .testi-avatar {
          width: 44px; height: 44px; border-radius: 99px;
          background: linear-gradient(135deg, #1e3a8a, #0b1e3c);
          border: 1px solid rgba(212,175,55,0.4);
          color: #D4AF37;
          display: grid; place-items: center;
          font-family: var(--f-display);
          font-weight: 600; font-size: 14px;
          letter-spacing: 0.04em;
        }
        .testi-name {
          font-family: var(--f-display); font-weight: 600; font-size: 15px;
        }
        .testi-role {
          font-family: var(--f-mono); font-size: 10.5px;
          color: rgba(255,255,255,0.6);
          letter-spacing: 0.16em; text-transform: uppercase;
          margin-top: 4px;
        }
        @media (max-width: 860px){ .testi-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
};

/* ========================================================= */

const FinalCTA = ({ gold, mascotStyle, content = {}, onOpenApplyModal }) => {
  const openApplyModal = (e) => {
    e.preventDefault();
    onOpenApplyModal();
  };

  return (
  <section id="cta" className="section" style={{
    background: "linear-gradient(180deg, #0a1a36 0%, #060f21 100%)",
    color: "#eef2fb",
    overflow: "hidden",
    position: "relative",
  }}>
    <div className="placeholder-img" style={{
      position: "absolute", inset: 0, opacity: 0.2,
      borderRadius: 0, border: "none",
    }}>
      <span className="ph-label">Avrupa hava çekimi · hafif tam ekran</span>
    </div>
    <div style={{
      position: "absolute", inset: 0,
      background:
        "radial-gradient(60% 60% at 70% 50%, rgba(30,58,138,0.6) 0%, rgba(6,15,33,0.95) 70%)",
    }} />
    <div className="glow-gold" style={{ top: -200, left: "20%", opacity: 0.4 }} />

    <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
      <div className="cta-grid">
        <div className="reveal">
          <span className="eyebrow">07 · Son söz</span>
          <h2 className="section-title" style={{ marginTop: 16 }}>
            <em>{content.title}</em><br />
            {content.subtitle}
          </h2>
          <p className="section-lede" style={{ marginTop: 12, color: "rgba(255,255,255,0.74)" }}>
            {content.description}
          </p>
          <div style={{ display: "flex", gap: 14, marginTop: 32, flexWrap: "wrap" }}>
            <a href="#apply" onClick={openApplyModal} className="btn btn-primary">{content.ctaText} <span className="arr">→</span></a>
            <a href={"tel:" + content.phone} className="btn btn-ghost">Ara: {content.phone}</a>
          </div>

          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16,
            marginTop: 44,
            padding: 22, borderRadius: 12,
            border: "1px solid rgba(255,255,255,0.08)",
            background: "rgba(255,255,255,0.02)",
          }} className="cta-badges">
            {[
              ["İade maddesi", "'Evet' deyip dosya belgelerden kalpırsa, danışmanlık ücretiniz iade edilir."],
              ["Konsolosluk eğitimli", "İnceleme ekibinde üç eski konsolosluk kabul memuru."],
              ["Veri güvenliği", "Uçtan uca şifreleme. Dosyalar karardan 30 gün sonra silinir."],
            ].map(([t, b]) => (
              <div key={t}>
                <div style={{ fontFamily: "var(--f-mono)", fontSize: 10.5, letterSpacing: "0.20em", textTransform: "uppercase", color: gold, marginBottom: 6 }}>
                  {t}
                </div>
                <div style={{ fontSize: 13.5, color: "rgba(255,255,255,0.78)", lineHeight: 1.5 }}>{b}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="reveal" data-delay="1" style={{
          display: "grid", placeItems: "center", position: "relative",
        }}>
          <div style={{
            animation: "idleFloat 6.5s ease-in-out infinite",
            filter: "drop-shadow(0 30px 50px rgba(0,0,0,0.45))",
          }}>
            <Mascot style={mascotStyle} size={400} gold={gold} />
          </div>
        </div>
      </div>
    </div>

    <style>{`
      .cta-grid {
        display: grid;
        grid-template-columns: 1.3fr 1fr;
        gap: 60px;
        align-items: center;
      }
      @media (max-width: 1080px) {
        .cta-grid { grid-template-columns: 1fr; }
        .cta-badges { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </section>
  );
};

const Footer = ({ gold, navigation = {} }) => (
  <footer style={{
    background: "#040a18", color: "rgba(255,255,255,0.6)",
    borderTop: "1px solid rgba(255,255,255,0.08)",
    padding: "44px 0 28px",
    fontSize: 13,
  }}>
    <div className="wrap" style={{
      display: "flex", justifyContent: "space-between", gap: 24, flexWrap: "wrap",
      alignItems: "center",
    }}>
      <div className="brand-mark" style={{ color: "#fff" }}>
        <span className="brand-shield" style={{ background: "transparent", border: "none", padding: 0, width: 36, height: 36, overflow: "hidden" }}>
          <img src={(typeof window !== "undefined" && window.__resources && window.__resources.logo) || "assets/schegen-adam-logo.png"} alt="" style={{ width: "100%", height: "100%", objectFit: "contain" }} />
        </span>
        <span>Schegen<span style={{ color: gold }}>·</span>Adam</span>
      </div>
      <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase" }}>
        © 2026 · Vize sistemine karşı değil, sistemle birlikte.
      </div>
      <div style={{ display: "flex", gap: 22 }}>
        <a href="/gizlilik.html" style={{ color: "rgba(255,255,255,0.7)" }}>{navigation.privacyText || "Gizlilik"}</a>
        <a href="/kosullar.html" style={{ color: "rgba(255,255,255,0.7)" }}>{navigation.termsText || "Koşullar"}</a>
        <a href="/iletisim.html" style={{ color: "rgba(255,255,255,0.7)" }}>{navigation.contactText || "İletişim"}</a>
      </div>
    </div>
  </footer>
);

window.AudienceSection = AudienceSection;
window.MistakesSection = MistakesSection;
window.TestimonialsSection = TestimonialsSection;
window.FinalCTA = FinalCTA;
window.Footer = Footer;
