// Sections
function Hero({ c }) {
  return (
    <section id="hero" data-screen-label="01 Hero" className="hero">
      <div className="hero-grid">
        <div>
          <div className="hero-eyebrow">
            <span className="pulse"></span>
            {c.heroEyebrow}
          </div>
          <h1>
            {c.heroTitle[0]}<br/>
            <span className="out">{c.heroTitle[1]}</span> <span className="accent">{c.heroTitle[2]}</span>
          </h1>
          <p className="hero-sub">{c.heroSub}</p>
          <div className="hero-cta">
            <a href="#contact" className="btn btn-primary btn-arrow" onClick={(e) => { e.preventDefault(); const el = document.getElementById("contact"); if (el) window.scrollTo({ top: el.offsetTop - 64, behavior: "smooth" }); }}>{c.heroPrimary}</a>
            <a href="#services" className="btn btn-ghost btn-arrow" onClick={(e) => { e.preventDefault(); const el = document.getElementById("services"); if (el) window.scrollTo({ top: el.offsetTop - 64, behavior: "smooth" }); }}>{c.heroSecondary}</a>
          </div>
          <div className="hero-stats">
            {c.heroStats.map((s, i) => (
              <div key={i} className="hero-stat">
                <div className="num">{s.num.includes("+") ? <>{s.num.replace("+","")}<span className="accent">+</span></> : s.num}</div>
                <div className="label">{s.label}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="hero-visual">
          <div className="hero-visual-inner" />
          <img src="images/site/hero-machine.png" alt="AVK Aydın Vinç Kiralama — Eklemli Manlift" style={{ position: "absolute", left: "-10%", right: "-10%", top: 0, bottom: "60px", width: "120%", height: "calc(100% - 60px)", objectFit: "contain", objectPosition: "center bottom" }} />
          <div className="hero-visual-label">
            <span>ZA20JERT · EKLEMLİ MANLIFT</span>
            <span>ZOOMLION</span>
          </div>
          <div className="hero-visual-ruler">
            <span style={{ top: "0%" }}>22 m</span>
            <span style={{ top: "33%" }}>15 m</span>
            <span style={{ top: "66%" }}>8 m</span>
            <span style={{ top: "100%" }}>0</span>
          </div>
          <div className="hero-visual-spec">
            <div className="title">ZA20JERT · EKLEMLİ</div>
            <div className="spec-row"><span>maks. yükseklik</span><b>22 m</b></div>
            <div className="spec-row"><span>platform kapasitesi</span><b>300 kg</b></div>
            <div className="spec-row"><span>tırmanma kabiliyeti</span><b>%30 eğim</b></div>
            <div className="spec-row"><span>toplam ağırlık</span><b>10.200 kg</b></div>
            <div className="spec-row"><span>durum</span><b style={{color:"var(--ok)"}}>● müsait</b></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Services({ c }) {
  return (
    <section id="services" data-screen-label="02 Services" className="section">
      <div className="section-inner">
        <div className="section-head">
          <div>
            <div className="mono label">{c.servicesLabel}</div>
            <h2>{c.servicesTitle}</h2>
          </div>
          <p className="desc">{c.servicesDesc}</p>
        </div>
        <div className="services">
          {c.services.map(s => (
            <div key={s.n} className={"service " + s.col}>
              <div className="service-arrow">→</div>
              <div className="service-num">{s.tag}</div>
              <div className="service-illus">
                <img src={s.img} alt={s.title} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "contain", padding: "12px" }} />
              </div>
              <h3>{s.title}</h3>
              <div className="service-desc">{s.desc}</div>
              <div className="service-specs">
                {s.specs.map((sp, i) => (
                  <div key={i} className="service-spec">{sp[0]} <b>{sp[1]}</b></div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Fleet({ c }) {
  return (
    <section className="section" style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div className="section-inner">
        <div className="section-head">
          <div>
            <div className="mono label">{c.fleetLabel}</div>
            <h2>{c.fleetTitle}</h2>
          </div>
          <p className="desc">{c.fleetDesc}</p>
        </div>
        <div className="fleet-strip">
          {c.fleet.map((f, i) => (
            <div key={i} className="fleet-item">
              <div className="big">{f.big}<sup>{f.sup}</sup></div>
              <div className="title">{f.title}</div>
              <div className="desc">{f.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function About({ c }) {
  return (
    <section id="about" data-screen-label="03 About" className="section">
      <div className="section-inner">
        <div className="section-head">
          <div>
            <div className="mono label">{c.aboutLabel}</div>
            <h2 style={{ whiteSpace: "pre-line" }}>{c.aboutTitle}</h2>
          </div>
        </div>
        <div className="about-grid">
          <div className="about-copy">
            <p className="lead">{c.aboutLead}</p>
            {c.aboutBody.map((p, i) => <p key={i}>{p}</p>)}
          </div>
          <div className="timeline">
            {c.timeline.map((t, i) => (
              <div key={i} className="timeline-item">
                <div className="year">{t.year}</div>
                <div className="what">{t.what}</div>
                <div className="sub">{t.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Coverage({ c, lang }) {
  const [filter, setFilter] = useState("all");
  const [hovered, setHovered] = useState(null);
  const [selected, setSelected] = useState({ kind: "hq", data: { name: "İvedik OSB", province: "Ankara", note: "Merkez" } });

  const zone1 = GEO.ankara.filter(d => d.zone === 1);
  const zone2 = GEO.ankara.filter(d => d.zone === 2);
  const totalTowns = GEO.provinces.reduce((a, p) => a + p.towns.length, 0);

  const filters = [
    { k: "all", label: lang === "tr" ? "TÜMÜ" : "ALL", count: GEO.ankara.length + totalTowns + 1 },
    { k: "ankara", label: "ANKARA", count: GEO.ankara.length },
    { k: "provinces", label: lang === "tr" ? "İLLER" : "CITIES", count: GEO.provinces.length },
    ...GEO.provinces.map(p => ({ k: p.key, label: p.name, count: p.towns.length })),
  ];

  const active = hovered || selected;
  const detailInfo = (() => {
    if (!active) return null;
    if (active.kind === "hq") return { label: lang === "tr" ? "MERKEZ" : "HQ", title: "İvedik OSB", sub: "Yenimahalle / Ankara", rows: [["Teslimat", "Aynı gün"], ["Mesafe", "0 km"], ["ETA", "—"]] };
    if (active.kind === "ankara") {
      const d = active.data;
      const eta = d.zone === 1 ? "1–4 saat" : "4–8 saat";
      return { label: lang === "tr" ? "ANKARA · İLÇE" : "ANKARA · DISTRICT", title: d.name, sub: d.zone === 1 ? (lang==="tr"?"Merkez bölge":"Metropolitan") : (lang==="tr"?"Kırsal bölge":"Outer zone"), rows: [["Teslimat", lang==="tr"?"Aynı gün":"Same day"], ["ETA", eta], ["Bölge", "Zone " + d.zone]] };
    }
    if (active.kind === "province") {
      const p = active.data;
      return { label: lang === "tr" ? "İL MERKEZİ" : "PROVINCE HUB", title: p.name, sub: (lang==="tr"?"Nokta":"Points") + ": " + p.towns.length, rows: [["Teslimat", "24 saat"], ["Nakliye", lang==="tr"?"Kendi filo":"Own fleet"], ["Destek", "7/24"]] };
    }
    if (active.kind === "town") {
      const t = active.data;
      return { label: t.province + (lang === "tr" ? " · İLÇE" : " · TOWN"), title: t.name, sub: lang==="tr"?"Yerel ekip":"Local crew", rows: [["Teslimat", "24 saat"], ["ETA", "8–18 saat"], ["Destek", "7/24"]] };
    }
    return null;
  })();

  return (
    <section id="coverage" data-screen-label="04 Coverage" className="section">
      <div className="section-inner">
        <div className="section-head">
          <div>
            <div className="mono label">{c.coverageLabel}</div>
            <h2>{c.coverageTitle}</h2>
          </div>
          <p className="desc">{c.coverageDesc}</p>
        </div>

        <div className="map-filters">
          {filters.map(f => (
            <button key={f.k} className={"map-filter " + (filter === f.k ? "on" : "")} onClick={() => { setFilter(f.k); setSelected(null); }}>
              {f.label}<span className="count">{f.count}</span>
            </button>
          ))}
        </div>

        <div className="coverage">
          <div>
            <div className="city-list">
              {GEO.provinces.slice(0,6).concat([{ key: "_anka", name: "Ankara (25 ilçe)", hub: {}, towns: GEO.ankara }]).length && null}
              {[
                { n: "00", name: "Ankara", primary: true, key: "ankara", sub: GEO.ankara.length + (lang==="tr"?" ilçe":" districts") },
                ...GEO.provinces.map((p, i) => ({ n: String(i+1).padStart(2, "0"), name: p.name.charAt(0) + p.name.slice(1).toLowerCase(), key: p.key, sub: p.towns.length + (lang==="tr"?" nokta":" points") })),
              ].map(city => (
                <div key={city.key} className={"city-row " + (city.primary ? "primary" : "") + (filter === city.key ? " primary" : "")}
                     onClick={() => setFilter(city.key)} style={{ cursor: "pointer" }}>
                  <div className="city-num">{city.n}</div>
                  <div>
                    <div className="city-name">{city.name}</div>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-3)", letterSpacing: "0.08em", textTransform: "uppercase", marginTop: 2 }}>{city.sub}</div>
                  </div>
                  <div className="city-arrow">→</div>
                </div>
              ))}
            </div>

            <div className="coverage-summary">
              <div className="cell"><div className="n">{GEO.ankara.length}</div><div className="lbl">{lang==="tr"?"Ankara ilçe":"Ankara districts"}</div></div>
              <div className="cell"><div className="n">{GEO.provinces.length}</div><div className="lbl">{lang==="tr"?"Komşu il":"Provinces"}</div></div>
              <div className="cell"><div className="n">{totalTowns}<sup>+</sup></div><div className="lbl">{lang==="tr"?"Teslimat noktası":"Drop points"}</div></div>
              <div className="cell"><div className="n">24<sup>h</sup></div><div className="lbl">{lang==="tr"?"Maks. süre":"Max ETA"}</div></div>
            </div>
          </div>

          <div>
            <div className="map-wrap">
              <div className="map-overlay">[ TESLİMAT HARİTASI · {filter === "all" ? "İÇ ANADOLU" : filter.toUpperCase()} ]</div>
              <div className="map-legend">
                <div className="row"><span className="sw hq"></span>HQ · İvedik OSB</div>
                <div className="row"><span className="sw dist"></span>{lang==="tr"?"Ankara ilçe":"Ankara district"}</div>
                <div className="row"><span className="sw prov"></span>{lang==="tr"?"İl / ilçe":"Province / town"}</div>
                <div className="row"><span className="sw ring"></span>{lang==="tr"?"Teslimat yarıçapı":"Delivery radius"}</div>
              </div>
              <MapCanvas filter={filter} hovered={hovered} setHovered={setHovered} selected={selected} setSelected={setSelected}/>
              {detailInfo && (
                <div className="map-detail">
                  <div className="label">◉ {detailInfo.label}</div>
                  <h4>{detailInfo.title}</h4>
                  <div className="sub">{detailInfo.sub}</div>
                  <div className="rows">
                    {detailInfo.rows.map((r, i) => (
                      <div key={i} className="r"><span>{r[0]}</span><b>{r[1]}</b></div>
                    ))}
                  </div>
                </div>
              )}
              <div className="map-caption">
                <span>HQ · 39.98° N · 32.74° E</span>
                <span>{lang==="tr"?"FARENİ NOKTALARIN ÜZERİNE GETİR":"HOVER POINTS FOR DETAIL"}</span>
              </div>
            </div>

            <div className="district-chips">
              {zone1.map((d, i) => (
                <button key={i} className={"chip " + (selected && selected.kind==="ankara" && selected.data.name===d.name ? "on" : "")}
                        onClick={() => { setFilter("ankara"); setSelected({ kind: "ankara", idx: GEO.ankara.indexOf(d), data: d }); }}>
                  <span className="dot"/>{d.name}
                </button>
              ))}
              {zone2.map((d, i) => (
                <button key={"z2"+i} className={"chip z2 " + (selected && selected.kind==="ankara" && selected.data.name===d.name ? "on" : "")}
                        onClick={() => { setFilter("ankara"); setSelected({ kind: "ankara", idx: GEO.ankara.indexOf(d), data: d }); }}>
                  <span className="dot"/>{d.name}
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ({ c }) {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" data-screen-label="05 FAQ" className="section">
      <div className="section-inner">
        <div className="section-head">
          <div>
            <div className="mono label">{c.faqLabel}</div>
            <h2>{c.faqTitle}</h2>
          </div>
          <p className="desc">{c.faqDesc}</p>
        </div>
        <div className="faq-grid">
          {c.faqs.map((f, i) => (
            <div key={i} className={"faq-item " + (open === i ? "open" : "")}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="num">0{i+1}</span>
                <span>{f.q}</span>
                <span className="plus">+</span>
              </button>
              <div className="faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Blog({ c }) {
  return (
    <section id="blog" data-screen-label="06 Blog" className="section">
      <div className="section-inner">
        <div className="section-head">
          <div>
            <div className="mono label">{c.blogLabel}</div>
            <h2>{c.blogTitle}</h2>
          </div>
          <p className="desc">{c.blogDesc}</p>
        </div>
        <div className="blog-grid">
          {c.posts.map((p, i) => (
            <div key={i} className="post">
              <div className="post-img">
                <img src={p.img} alt={p.title} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
              <div className="post-meta">
                <span className="tag">{p.tag}</span>
                <span>·</span>
                <span>{p.date}</span>
              </div>
              <h4>{p.title}</h4>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact({ c, lang }) {
  return (
    <section id="contact" data-screen-label="07 Contact" className="section">
      <div className="section-inner">
        <div className="section-head">
          <div>
            <div className="mono label">{c.contactLabel}</div>
            <h2>{c.contactTitle}</h2>
          </div>
          <p className="desc">{c.contactDesc}</p>
        </div>
        <div className="contact-grid">
          <div className="contact-info">
            <div className="info-block">
              <div className="label">{lang === "tr" ? "Merkez" : "Headquarters"}</div>
              <div className="value small" style={{ whiteSpace: "pre-line" }}>{c.contactInfo.address}</div>
            </div>
            <div className="info-block">
              <div className="label">{lang === "tr" ? "Telefon (7/24)" : "Phone (24/7)"}</div>
              <a className="value" href={"tel:" + c.contactInfo.phone.replace(/\s/g,"")}>{c.contactInfo.phone}</a>
            </div>
            <div className="info-block">
              <div className="label">E-mail</div>
              <a className="value" href={"mailto:" + c.contactInfo.email} style={{ fontSize: 16 }}>{c.contactInfo.email}</a>
            </div>
            <div className="info-block">
              <div className="label">{lang === "tr" ? "Çalışma Saatleri" : "Hours"}</div>
              <div className="value small">{c.contactInfo.hours}</div>
            </div>
            <div style={{ marginTop: "auto", paddingTop: 24, borderTop: "1px solid var(--line)" }}>
              <div className="label mono" style={{ marginBottom: 10 }}>{lang === "tr" ? "Hızlı Erişim" : "Quick Access"}</div>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                <a href="https://wa.me/903123955862" target="_blank" rel="noopener" className="btn btn-ghost" style={{ background: "#22c55e", color: "#fff", borderColor: "#22c55e" }}>WhatsApp</a>
                <a href="tel:+903123955862" className="btn btn-ghost">{lang === "tr" ? "Telefon" : "Call"}</a>
                <a href="mailto:torehan@aydinvinc.com" className="btn btn-ghost">E-mail</a>
              </div>
            </div>
          </div>
          <div className="contact-form">
            <QuoteForm lang={lang} />
          </div>
        </div>
      </div>
    </section>
  );
}

function BigCTA({ c, lang }) {
  return (
    <section className="big-cta">
      <div className="big-cta-inner">
        <h2>
          <span className="out">{c.bigCta[0]}</span><br/>
          {c.bigCta[1]}
        </h2>
        <div>
          <div className="big-cta-meta">
            {lang === "tr" ? "ACİL HAT · 7/24" : "URGENT LINE · 24/7"}<br/>
            {c.ctaHours}
          </div>
          <div style={{ marginTop: 20, display: "flex", gap: 10, flexWrap: "wrap" }}>
            <a href="tel:+903123955862" className="btn btn-primary btn-arrow">{c.ctaPhone}</a>
            <a href="https://wa.me/903123955862" target="_blank" rel="noopener" className="btn btn-ghost" style={{ borderColor: "var(--accent-ink)", color: "var(--accent-ink)" }}>WhatsApp</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ c, lang }) {
  const links = {
    services: lang === "tr" ? ["Makaslı","Eklemli","Teleskopik","Sepetli","Forklift"] : ["Scissor","Articulating","Telescopic","Truck-Mnt","Forklift"],
    company: lang === "tr" ? ["Hakkımızda","Filo","Referanslar","Kariyer","Blog"] : ["About","Fleet","References","Careers","Blog"],
    support: lang === "tr" ? ["SSS","Teklif al","İletişim","Teknik servis"] : ["FAQ","Get quote","Contact","Service"],
    legal: lang === "tr" ? ["KVKK","Çerez politikası","Sözleşme"] : ["Privacy","Cookies","Terms"],
  };
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-top">
          <div className="footer-col">
            <div className="brand">
              <img src="images/site/logo.png" alt="AVK Aydın Vinç Kiralama" style={{ height: "36px", width: "auto", objectFit: "contain" }} />
            </div>
            <p className="footer-brand-text">{c.footerAbout}</p>
          </div>
          <div className="footer-col">
            <h5>{lang === "tr" ? "Hizmetler" : "Services"}</h5>
            <ul>{links.services.map((l,i) => <li key={i}><a href="#services">{l}</a></li>)}</ul>
          </div>
          <div className="footer-col">
            <h5>{lang === "tr" ? "Kurumsal" : "Company"}</h5>
            <ul>{links.company.map((l,i) => <li key={i}><a href="#about">{l}</a></li>)}</ul>
          </div>
          <div className="footer-col">
            <h5>{lang === "tr" ? "Destek" : "Support"}</h5>
            <ul>{links.support.map((l,i) => <li key={i}><a href="#contact">{l}</a></li>)}</ul>
          </div>
          <div className="footer-col">
            <h5>{lang === "tr" ? "Hukuki" : "Legal"}</h5>
            <ul>{links.legal.map((l,i) => <li key={i}><a href="#">{l}</a></li>)}</ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 AYDIN VİNÇ KİRALAMA · AYDINVINC.COM</span>
          <span>İVEDİK OSB · ANKARA / TR</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Hero, Services, Fleet, About, Coverage, FAQ, Blog, Contact, BigCTA, Footer });