/* =========================================================
   SCHEGEN ADAM — Sections (part 1)
   Hero, Trust, Process
   ========================================================= */

const heroStyles = {
  wrap: {
    position: "relative",
    overflow: "hidden",
    background: "linear-gradient(180deg, #060f21 0%, #0b1e3c 60%, #0e2348 100%)",
    color: "#eef2fb"
  },
  cityLayer: {
    position: "absolute",
    inset: 0,
    opacity: 0.34,
    filter: "blur(2px) saturate(1.1)"
  },
  cityVignette: {
    position: "absolute",
    inset: 0,
    background:
    "radial-gradient(60% 70% at 50% 30%, rgba(6,15,33,0) 0%, rgba(6,15,33,0.55) 60%, rgba(6,15,33,0.95) 100%)"
  },
  noise: {
    position: "absolute", inset: 0, opacity: 0.05, mixBlendMode: "overlay",
    backgroundImage:
    "radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px)",
    backgroundSize: "3px 3px",
    pointerEvents: "none"
  },
  inner: {
    position: "relative",
    zIndex: 2,
    display: "grid",
    gridTemplateColumns: "1.1fr 1fr",
    gap: "60px",
    alignItems: "center",
    paddingTop: "80px",
    paddingBottom: "100px",
    minHeight: "min(900px, 88vh)"
  },
  h1: {
    fontFamily: "var(--f-display)",
    fontWeight: 600,
    fontSize: "clamp(44px, 6vw, 88px)",
    lineHeight: 0.98,
    letterSpacing: "-0.025em",
    margin: "20px 0 22px",
    textWrap: "balance"
  },
  sub: {
    color: "rgba(255,255,255,0.74)",
    fontSize: "18px",
    maxWidth: "52ch",
    lineHeight: 1.55,
    textWrap: "pretty"
  },
  ctas: { display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" },
  trust: {
    display: "flex", gap: 28, marginTop: 48, flexWrap: "wrap",
    alignItems: "center", color: "rgba(255,255,255,0.6)",
    fontSize: 13, letterSpacing: "0.04em"
  },
  trustItem: { display: "inline-flex", alignItems: "center", gap: 8 },
  trustDot: {
    width: 6, height: 6, borderRadius: 99, background: "var(--gold)",
    boxShadow: "0 0 12px rgba(212,175,55,0.6)"
  },
  mascotWrap: {
    position: "relative",
    display: "grid",
    placeItems: "center"
  },
  mascotIdle: {
    animation: "idleFloat 6.5s ease-in-out infinite",
    filter: "drop-shadow(0 30px 50px rgba(0,0,0,0.45))"
  },
  metaCard: {
    position: "absolute",
    background: "rgba(7,16,36,0.78)",
    border: "1px solid rgba(212,175,55,0.35)",
    borderRadius: 12,
    padding: "12px 14px",
    backdropFilter: "blur(8px)",
    WebkitBackdropFilter: "blur(8px)",
    fontFamily: "var(--f-mono)",
    fontSize: 11,
    letterSpacing: "0.12em",
    textTransform: "uppercase",
    color: "rgba(255,255,255,0.85)",
    minWidth: 168
  },
  metaCardLabel: {
    color: "var(--gold)", fontSize: 10, marginBottom: 6, letterSpacing: "0.18em"
  },
  metaCardValue: {
    fontFamily: "var(--f-display)", fontSize: 20, letterSpacing: "-0.01em",
    textTransform: "none", color: "#fff"
  }
};

const Hero = ({ mascotStyle, gold, content = {}, navigation = {}, onOpenApplyModal }) => {
  const [navOpen, setNavOpen] = React.useState(false);
  React.useEffect(() => {
    document.body.style.overflow = navOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [navOpen]);
  const closeNav = () => setNavOpen(false);
  const openApplyModal = (e) => {
    e.preventDefault();
    closeNav();
    onOpenApplyModal();
  };

  const trustBadges = content.trustBadges || [];
  const navLabels = {
    privacyText: navigation.privacyText || "Gizlilik",
    termsText: navigation.termsText || "Koşullar",
    contactText: navigation.contactText || "İletişim"
  };

  return (
  <header style={heroStyles.wrap}>
    {/* nav */}
    <nav className="nav" style={{ background: "transparent", borderBottom: "1px solid rgba(255,255,255,0.06)" }}>
      <div className="wrap nav-inner">
        <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 className={"nav-scrim" + (navOpen ? " is-open" : "")} onClick={closeNav} />
        <div className={"nav-links" + (navOpen ? " is-open" : "")}>
          <a href="#trust" onClick={closeNav}>Neden biz</a>
          <a href="#process" onClick={closeNav}>Süreç</a>
          <a href="#audience" onClick={closeNav}>Kimler için</a>
          <a href="#mistakes" onClick={closeNav}>Hatalar</a>
          <a href="#testimonials" onClick={closeNav}>Yorumlar</a>
          <a href="/gizlilik.html" onClick={closeNav}>{navLabels.privacyText}</a>
          <a href="/kosullar.html" onClick={closeNav}>{navLabels.termsText}</a>
          <a href="/iletisim.html" onClick={closeNav}>{navLabels.contactText}</a>
        </div>
        <button className="nav-burger" aria-label="Menü" aria-expanded={navOpen} onClick={() => setNavOpen(v => !v)}>
          <span />
        </button>
      </div>
    </nav>

    {/* city placeholder layer */}
    <div className="placeholder-img" style={heroStyles.cityLayer}>
      <span className="ph-label">Avrupa şehir silueti · tam ekran fotoğraf</span>
    </div>
    <div style={heroStyles.cityVignette} />
    <div style={heroStyles.noise} />

    {/* gold + blue glow */}
    <div className="glow-gold" style={{ top: -160, right: -160, opacity: 0.55 }} />
    <div className="glow-blue" style={{ bottom: -260, left: -260, opacity: 0.6 }} />

    <div className="wrap hero-inner" style={{ position: "relative", zIndex: 2 }}>
      {/* left */}
      <div className="reveal is-in">
        <span className="eyebrow" style={{ color: gold }}>{content.eyebrow}</span>
        <h1 style={heroStyles.h1}>
          {content.title}
          <br />
          <span style={{ color: gold }}>{content.titleHighlight}</span>.
        </h1>
        <p style={heroStyles.sub}>{content.subtitle}</p>
        <div style={heroStyles.ctas}>
          <a href="#apply" onClick={openApplyModal} className="btn btn-primary">
            {content.ctaText} <span className="arr">→</span>
          </a>
          <a href="#process" className="btn btn-ghost">{content.ctaSecondaryText}</a>
        </div>
        <div style={heroStyles.trust}>
          {trustBadges.map((badge, i) => (
            <span key={i} style={heroStyles.trustItem}>
              <span style={heroStyles.trustDot} /> {badge}
            </span>
          ))}
        </div>
      </div>

      {/* right — mascot */}
      <div className="hero-mascot-wrap" style={heroStyles.mascotWrap}>
        <div className="hero-mascot-idle" style={heroStyles.mascotIdle}>
          <Mascot style={mascotStyle} size={520} gold={gold} />
        </div>

        <div style={heroStyles.metaCard} className="hero-meta-card hero-meta-card-status float-a">
          <div style={heroStyles.metaCardLabel}>Dosya durumu</div>
          <div style={heroStyles.metaCardValue}>Teslim edildi · 3. gün</div>
        </div>
        <div style={heroStyles.metaCard} className="hero-meta-card hero-meta-card-approval float-b">
          <div style={heroStyles.metaCardLabel}>Onay olasılığı</div>
          <div style={heroStyles.metaCardValue}>
            <span style={{ color: gold }}>%92</span>
            <span style={{ fontSize: 12, color: "rgba(255,255,255,0.6)", marginLeft: 8 }}>
              · teslim öncesi
            </span>
          </div>
        </div>
      </div>
    </div>
  </header>
  );
};


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

const TrustIcon = ({ kind, gold }) => {
  const stroke = gold;
  const sw = 1.6;
  const props = { fill: "none", stroke, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "shield":
      return (
        <svg viewBox="0 0 32 32" width="28" height="28">
          <path d="M16 3 L27 7 V15 C27 22 22 27 16 29 C10 27 5 22 5 15 V7 Z" {...props} />
          <path d="M11 16 L15 20 L22 12" {...props} />
        </svg>);

    case "user":
      return (
        <svg viewBox="0 0 32 32" width="28" height="28">
          <circle cx="16" cy="12" r="5" {...props} />
          <path d="M5 27 C7 21 11 19 16 19 C21 19 25 21 27 27" {...props} />
          <path d="M22 6 L24 8 L28 4" {...props} />
        </svg>);

    case "trend":
      return (
        <svg viewBox="0 0 32 32" width="28" height="28">
          <path d="M4 24 L12 16 L17 21 L28 8" {...props} />
          <path d="M22 8 L28 8 L28 14" {...props} />
        </svg>);

    case "clock":
      return (
        <svg viewBox="0 0 32 32" width="28" height="28">
          <circle cx="16" cy="16" r="11" {...props} />
          <path d="M16 9 V16 L21 19" {...props} />
        </svg>);

    default: return null;
  }
};

const TrustSection = ({ gold, items = [] }) => {
  return (
    <section id="trust" className="section">
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 60, alignItems: "end", marginBottom: 60 }} className="trust-head">
          <div className="reveal">
            <span className="eyebrow">02 · Neden biz</span>
            <h2 className="section-title">
              Çağrı merkezi değil,<br /><em>operatör</em> gibi kurulduk.
            </h2>
          </div>
          <p className="section-lede reveal" data-delay="1">Her "en iyi vize danışmanı" aynı sözü söyler. İşte yazılı olarak taahhüt ettiğimiz dört şey — ve danışanlarımızın ilk görüşmeden sonra başka yere bakmamasının nedeni.</p>
        </div>

        <div className="trust-grid">
          {items.map((it, i) =>
          <div key={it.tag} className="card reveal" data-delay={i + 1}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
                <div style={{
                width: 48, height: 48, borderRadius: 10,
                display: "grid", placeItems: "center",
                background: "rgba(212,175,55,0.10)",
                border: "1px solid rgba(212,175,55,0.35)"
              }}>
                  <TrustIcon kind={it.kind} gold={gold} />
                </div>
                <span style={{
                fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.22em",
                textTransform: "uppercase", color: "var(--ink-2)",
                padding: "5px 10px", border: "1px solid var(--line-2)", borderRadius: 99
              }}>
                  {it.tag}
                </span>
              </div>
              <h3 style={{
              fontFamily: "var(--f-display)", fontSize: 21,
              lineHeight: 1.2, fontWeight: 600, margin: "0 0 10px",
              letterSpacing: "-0.01em"
            }}>
                {it.title}
              </h3>
              <p style={{ margin: 0, color: "var(--ink-2)", fontSize: 15 }}>{it.body}</p>
            </div>
          )}
        </div>
      </div>

      <style>{`
        .trust-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 20px;
        }
        @media (max-width: 1080px){ .trust-grid { grid-template-columns: repeat(2, 1fr); } .trust-head { grid-template-columns: 1fr !important; gap: 24px !important; } }
        @media (max-width: 560px){ .trust-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>);
};

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

const ProcessSection = ({ gold, steps = [] }) => {
  return (
    <section id="process" className="section dark">
      <div className="glow-blue" style={{ top: -200, right: -300, opacity: 0.5 }} />
      <div className="glow-gold" style={{ bottom: -200, left: -200, opacity: 0.4 }} />

      <div className="wrap" style={{ position: "relative" }}>
        <div className="reveal" style={{ marginBottom: 70, maxWidth: 720 }}>
          <span className="eyebrow">03 · Süreç</span>
          <h2 className="section-title">
            Beş adım. Aralarında<br /><em>sürpriz yok</em>.
          </h2>
          <p className="section-lede" style={{ marginTop: 12 }}>
            İlk görüşmeden uçuş kapısına kadar. Her adımın bir sahibi, bir
            son tarihi ve bir çıktısı var. Bir sonrakini her zaman bilirsiniz.
          </p>
        </div>

        <ol className="process-list" style={{ listStyle: "none", padding: 0, margin: 0 }}>
          {steps.map((s, i) =>
          <li key={s.number} className="process-step reveal" data-delay={i + 1}>
              <div className="process-num" style={{ color: gold }}>
                {s.number}
              </div>
              <div className="process-line" />
              <div className="process-body">
                <h3>{s.title}</h3>
                <p>{s.description}</p>
              </div>
            </li>
          )}
        </ol>
      </div>

      <style>{`
        .process-list {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 0;
          position: relative;
        }
        .process-step {
          position: relative;
          padding: 0 24px 12px 0;
        }
        .process-step:not(:last-child) {
          border-right: 1px solid rgba(255,255,255,0.08);
        }
        .process-num {
          font-family: var(--f-display);
          font-size: 56px;
          font-weight: 600;
          letter-spacing: -0.02em;
          line-height: 1;
        }
        .process-line {
          height: 1px;
          background: linear-gradient(90deg, rgba(212,175,55,0.7), rgba(212,175,55,0));
          margin: 22px 0 22px;
          position: relative;
        }
        .process-line::before{
          content: "";
          position: absolute;
          left: 0; top: 50%;
          width: 8px; height: 8px;
          border-radius: 99px;
          background: #D4AF37;
          transform: translate(-1px, -50%);
          box-shadow: 0 0 16px rgba(212,175,55,0.7);
        }
        .process-body h3 {
          font-family: var(--f-display);
          font-weight: 600;
          font-size: 20px;
          margin: 0 0 8px;
          letter-spacing: -0.01em;
        }
        .process-body p {
          margin: 0;
          color: rgba(255,255,255,0.66);
          font-size: 14.5px;
          line-height: 1.55;
        }

        @media (max-width: 1080px){
          .process-list { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
          .process-step { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 28px; }
        }
        @media (max-width: 560px){
          .process-list { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>);
};

window.Hero = Hero;
window.TrustSection = TrustSection;
window.ProcessSection = ProcessSection;