/* global React, ProjectImage, ProjectThumb, BrandMark, CONTACT_PHONE, TEL_HREF */
// Home page — hero with 4 layout variants + featured project list + studio brief

const FEATURED_IDS = ["ik-dukkan-restorasyon", "ai-ikiz-evler", "ag-binasi", "s-insaat", "zafer-mh-konut", "eh-evi"];

// Broşürün 2. sayfası — hizmet listesi kartı.
// Görsel olarak broşürle aynı ama içerik gerçek metin: Google okuyabilir,
// her ekranda ölçeklenir ve arama için anahtar kelime taşır.
function BrochureCard({ navigate }) {
  const services = (window.EXPERTISE || []).map(([t]) => t);
  return (
    <aside
      onClick={() => navigate({ page: "about" })}
      style={{
        border: "2px solid var(--fg)",
        background: "var(--bg-alt)",
        padding: "34px 30px 30px",
        maxWidth: 420,
        width: "100%",
        cursor: "pointer",
        alignSelf: "center",
      }}
    >
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center" }}>
        <BrandMark height={38} />
        <div
          style={{
            marginTop: 16,
            fontFamily: "'Cormorant Garamond', 'Instrument Serif', Georgia, serif",
            fontSize: 30,
            fontWeight: 500,
            letterSpacing: "0.06em",
            textTransform: "uppercase",
            color: "var(--accent)",
            lineHeight: 1,
          }}
        >
          Gizem Güleç
        </div>
        <div
          className="t-mono"
          style={{ marginTop: 9, fontSize: 10.5, letterSpacing: "0.08em", color: "var(--fg)" }}
        >
          Yüksek Mimar | Restorasyon Uzmanı
        </div>
        <div style={{ marginTop: 16, display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ width: 58, height: 1.5, background: "var(--accent)" }} />
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)" }} />
          <span style={{ width: 58, height: 1.5, background: "var(--accent)" }} />
        </div>
      </div>

      <ul style={{ listStyle: "none", padding: 0, margin: "22px 0 0", display: "flex", flexDirection: "column", gap: 11 }}>
        {services.map((s) => (
          <li key={s} style={{ display: "flex", alignItems: "baseline", gap: 11, fontSize: 14.5, lineHeight: 1.3 }}>
            <span style={{ color: "var(--accent)", fontSize: 11, lineHeight: 1.6 }}>●</span>
            <span>{s}</span>
          </li>
        ))}
      </ul>

      <div style={{ marginTop: 24, paddingTop: 16, borderTop: "1px solid var(--line)", textAlign: "center" }}>
        <div className="t-mono" style={{ fontSize: 10, letterSpacing: "0.22em", color: "var(--accent)" }}>
          Mimarlık · Tasarım · Restorasyon
        </div>
        <a
          href={TEL_HREF}
          onClick={(e) => e.stopPropagation()}
          className="t-mono"
          style={{ display: "inline-block", marginTop: 10, fontSize: 15, letterSpacing: "0.06em", color: "var(--fg)" }}
        >
          {CONTACT_PHONE}
        </a>
        <div style={{ marginTop: 8, fontSize: 12, color: "var(--muted)" }}>
          Ertuğrul Mh. Park Otel Sk. No:9 D:3 · Bergama / İzmir
        </div>
      </div>
    </aside>
  );
}

function HeroEditorial({ projects, navigate }) {
  return (
    <section
      style={{
        display: "grid",
        gridTemplateColumns: "minmax(0, 1.35fr) minmax(0, 1fr)",
        gap: 56,
        alignItems: "center",
        padding: "72px 32px 88px",
        minHeight: "calc(80vh - 80px)",
      }}
    >
      <div style={{ maxWidth: 900 }}>
        <div className="t-mono" style={{ color: "var(--muted)", marginBottom: 28 }}>
          <span style={{ color: "var(--accent)" }}>●</span>{"  "}
          Yüksek Mimar · Restorasyon Uzmanı · Bergama
        </div>
        <h1
          className="t-display"
          style={{
            fontSize: "clamp(64px, 8.5vw, 132px)",
            margin: 0,
          }}
        >
          Mimarlık, tasarım ve<br /><em style={{ color: "var(--accent)" }}>restorasyon</em>.
        </h1>
        <p
          style={{
            marginTop: 36,
            maxWidth: 540,
            fontSize: 17,
            lineHeight: 1.5,
            color: "var(--muted)",
            textWrap: "pretty",
          }}
        >
          Konut ve villa projelerinden tarihi yapı restorasyonlarına;
          mimari tasarım, uygulama projeleri, 3B görselleştirme ve şantiye
          takibi Bergama merkezli olarak tek elden yürütülür.
        </p>
        <div style={{ display: "flex", gap: 16, marginTop: 40 }}>
          <button
            onClick={() => navigate({ page: "archive" })}
            className="t-mono"
            style={{
              padding: "14px 22px",
              border: "1px solid var(--fg)",
              borderRadius: 999,
              color: "var(--fg)",
            }}
          >
            {projects.length} Projeyi Gör →
          </button>
          <button
            onClick={() => navigate({ page: "about" })}
            className="t-mono"
            style={{
              padding: "14px 22px",
              color: "var(--muted)",
            }}
          >
            Hakkımızda
          </button>
        </div>
      </div>
      <BrochureCard navigate={navigate} />
    </section>
  );
}

function HeroFullBleed({ project, navigate }) {
  return (
    <section
      style={{
        position: "relative",
        minHeight: "calc(100vh - 80px)",
        overflow: "hidden",
      }}
    >
      <ProjectImage
        project={project}
        index={0}
        ratio="auto"
        showMeta={false}
        style={{ position: "absolute", inset: 0, aspectRatio: "auto" }}
      />
      <div
        style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%)",
        }}
      />
      <div
        style={{
          position: "relative",
          zIndex: 2,
          minHeight: "calc(100vh - 80px)",
          padding: "48px 48px 64px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          color: "#FBF7EE",
        }}
      >
        <div className="t-mono" style={{ opacity: 0.85 }}>
          Öne çıkan · {project.year} · {project.location}
        </div>
        <div>
          <h1
            className="t-display"
            style={{
              fontSize: "clamp(72px, 10vw, 168px)",
              margin: 0,
              fontStyle: "italic",
            }}
          >
            {project.title.split(" ")[0]}<br />{project.title.split(" ").slice(1).join(" ")}
          </h1>
          <div
            style={{
              display: "flex",
              alignItems: "flex-end",
              justifyContent: "space-between",
              marginTop: 32,
              gap: 32,
            }}
          >
            <p style={{ maxWidth: 480, fontSize: 16, lineHeight: 1.5, margin: 0, opacity: 0.95, textWrap: "pretty" }}>
              {project.summary}
            </p>
            <button
              onClick={() => navigate({ page: "project", id: project.id })}
              className="t-mono"
              style={{
                padding: "14px 22px",
                border: "1px solid currentColor",
                borderRadius: 999,
              }}
            >
              Projeyi oku →
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroMarquee({ projects, navigate }) {
  const words = ["Hafıza", "Yer", "Işık", "Malzeme", "Eğim", "Gölge", "Doku", "Ritim", "Avlu", "Eşik"];
  return (
    <section
      style={{
        padding: "80px 0 100px",
        borderBottom: "1px solid var(--line-soft)",
      }}
    >
      <div style={{ padding: "0 32px", display: "flex", justifyContent: "space-between", marginBottom: 56 }}>
        <span className="t-mono" style={{ color: "var(--muted)" }}>Gizem Güleç Mimarlık · 2014—{new Date().getFullYear()}</span>
        <span className="t-mono" style={{ color: "var(--muted)" }}>Bergama, İzmir</span>
      </div>
      <div style={{ overflow: "hidden", margin: "0 -32px" }}>
        {[0, 1].map((row) => (
          <div
            key={row}
            style={{
              display: "flex",
              gap: 56,
              whiteSpace: "nowrap",
              animation: `marquee${row} ${60 + row * 10}s linear infinite`,
              animationDirection: row ? "reverse" : "normal",
            }}
            className="t-display"
          >
            {[...words, ...words, ...words].map((w, i) => (
              <span
                key={i}
                style={{
                  fontSize: "clamp(96px, 16vw, 220px)",
                  fontStyle: row ? "italic" : "normal",
                  color: i % 5 === 0 ? "var(--accent)" : "var(--fg)",
                  lineHeight: 0.9,
                }}
              >
                {w}<span style={{ color: "var(--muted)", marginLeft: 32 }}>·</span>
              </span>
            ))}
          </div>
        ))}
      </div>
      <style>{`
        @keyframes marquee0 { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        @keyframes marquee1 { from { transform: translateX(0); } to { transform: translateX(-50%); } }
      `}</style>
      <div style={{ padding: "72px 32px 0", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "end" }}>
        <p className="t-display" style={{ fontSize: "clamp(28px, 3vw, 44px)", lineHeight: 1.15, margin: 0, maxWidth: 720 }}>
          Yapılar inşa etmiyoruz; <em>insan ölçekli mekânlar</em> kuruyoruz. Konut, kültür, kentsel; her ölçekte aynı dikkati taşıyoruz.
        </p>
        <button
          onClick={() => navigate({ page: "archive" })}
          className="t-mono"
          style={{
            justifySelf: "end",
            padding: "16px 24px",
            border: "1px solid var(--fg)",
            borderRadius: 999,
          }}
        >
          Bütün arşive bak →
        </button>
      </div>
    </section>
  );
}

function HeroIndex({ projects, navigate }) {
  return (
    <section style={{ padding: "40px 32px 64px" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 32 }}>
        <div>
          <span className="t-mono" style={{ color: "var(--muted)" }}>Proje dizini · 2014—{new Date().getFullYear()}</span>
          <h1 className="t-display" style={{ fontSize: "clamp(40px, 5vw, 72px)", margin: "16px 0 0", maxWidth: 760 }}>
            {projects.length} yapı, {new Set(projects.map(p => p.location.split(",")[1]?.trim() || p.location)).size} şehirde.
          </h1>
        </div>
        <button
          onClick={() => navigate({ page: "archive" })}
          className="t-mono"
          style={{
            padding: "14px 22px",
            border: "1px solid var(--fg)",
            borderRadius: 999,
          }}
        >
          Tüm filtrelere geç →
        </button>
      </div>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(6, 1fr)",
          gap: 8,
        }}
      >
        {projects.map((p, i) => (
          <button
            key={p.id}
            onClick={() => navigate({ page: "project", id: p.id })}
            style={{ position: "relative", textAlign: "left" }}
            onMouseEnter={(e) => e.currentTarget.style.outline = "1px solid var(--fg)"}
            onMouseLeave={(e) => e.currentTarget.style.outline = "none"}
          >
            <ProjectImage project={p} index={i % 4} ratio="3 / 4" showMeta={false} />
            <div style={{ padding: "10px 2px 0" }}>
              <div className="t-mono" style={{ color: "var(--muted)" }}>{p.year} · {p.type}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 18, marginTop: 4, lineHeight: 1.1 }}>{p.title}</div>
            </div>
          </button>
        ))}
      </div>
    </section>
  );
}

// Seçili çalışmalar — tek satırlık, sağa doğru kendiliğinden kayan şerit.
// Fotoğraflar 5 sn'de bir yumuşak solmayla değişir; kullanıcı kontrolü yok.
function FeaturedCardImage({ project, tick }) {
  const multi = (project.images || 1) > 1;
  const [idx, setIdx] = React.useState(0);
  const [visible, setVisible] = React.useState(true);

  React.useEffect(() => {
    if (!multi) return;
    setVisible(false);
    const t = setTimeout(() => {
      setIdx(tick % project.images);
      setVisible(true);
    }, 450);
    return () => clearTimeout(t);
  }, [tick, multi, project.images]);

  const base = `/images/${project.id}-${idx}`;
  return (
    <div style={{ position: "relative", aspectRatio: "3 / 4", overflow: "hidden", background: "var(--card)" }}>
      <img
        src={`${base}.webp`}
        alt={`${project.title} — ${project.type || ""}`}
        decoding="async"
        style={{
          position: "absolute",
          inset: 0,
          width: "100%",
          height: "100%",
          objectFit: "cover",
          opacity: visible ? 1 : 0,
          transition: "opacity 900ms ease",
        }}
      />
    </div>
  );
}

function FeaturedList({ projects, navigate }) {
  const featured = FEATURED_IDS.map((id) => projects.find((p) => p.id === id)).filter(Boolean);
  const [tick, setTick] = React.useState(0);

  // Fotoğraf döngüsü: 5 sn'de bir; kopya kartlar aynı tick'i paylaştığı için senkron
  React.useEffect(() => {
    const t = setInterval(() => setTick((n) => n + 1), 5000);
    return () => clearInterval(t);
  }, []);

  // Tüm şerit görsellerini baştan yükle — geçişlerde boşluk olmasın
  React.useEffect(() => {
    featured.forEach((p) => {
      for (let i = 0; i < (p.images || 1); i++) {
        const im = new Image();
        im.src = `/images/${p.id}-${i}.webp`;
      }
    });
  }, []);

  return (
    <section
      style={{
        padding: "72px 0 72px",
        borderTop: "1px solid var(--line-soft)",
        overflow: "hidden",
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 36, padding: "0 32px" }}>
        <h2 className="t-display" style={{ fontSize: "clamp(34px, 4vw, 56px)", margin: 0, fontStyle: "italic" }}>
          Seçili çalışmalar
        </h2>
        <span className="t-mono" style={{ color: "var(--muted)" }}>{featured.length} / {projects.length}</span>
      </div>
      <div
        style={{
          display: "flex",
          gap: 20,
          width: "max-content",
          animation: "featuredDrift 60s linear infinite",
          willChange: "transform",
        }}
      >
        {[...featured, ...featured].map((p, i) => (
          <div
            key={`${p.id}-${i}`}
            onClick={() => navigate({ page: "project", id: p.id })}
            style={{ width: 190, flex: "none", cursor: "pointer" }}
            title={p.title}
          >
            <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 8, whiteSpace: "nowrap", overflow: "hidden" }}>
              <span className="t-mono" style={{ fontSize: 10, color: "var(--muted)" }}>
                {String((i % featured.length) + 1).padStart(2, "0")}
              </span>
              <span
                style={{
                  fontFamily: "var(--font-display)",
                  fontSize: 17,
                  lineHeight: 1,
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                }}
              >
                {p.title}
              </span>
            </div>
            <FeaturedCardImage project={p} tick={tick} />
            <div className="t-mono" style={{ display: "flex", justifyContent: "space-between", marginTop: 7, fontSize: 9.5, color: "var(--muted)" }}>
              <span>{p.type}</span>
              <span className="t-num">{p.year}</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// Uzmanlık alanları — broşürdeki 7 hizmet (SEO: hizmet anahtar kelimeleri)
function ExpertiseGrid({ navigate }) {
  const items = window.EXPERTISE || [];
  return (
    <section style={{ padding: "72px 32px 88px", borderTop: "1px solid var(--line-soft)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 48 }}>
        <h2 className="t-display" style={{ fontSize: "clamp(34px, 4vw, 56px)", margin: 0, fontStyle: "italic" }}>
          Uzmanlık alanları
        </h2>
        <span className="t-mono" style={{ color: "var(--muted)" }}>Bergama · İzmir</span>
      </div>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
          gap: "1px",
          background: "var(--line-soft)",
          border: "1px solid var(--line-soft)",
        }}
      >
        {items.map(([title, desc], i) => (
          <div key={title} style={{ background: "var(--bg)", padding: "28px 24px" }}>
            <div className="t-mono t-num" style={{ color: "var(--accent)" }}>{String(i + 1).padStart(2, "0")}</div>
            <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 22, margin: "12px 0 0", lineHeight: 1.15 }}>
              {title}
            </h3>
            <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--muted)", margin: "10px 0 0", textWrap: "pretty" }}>
              {desc}
            </p>
          </div>
        ))}
        <div
          onClick={() => navigate({ page: "contact" })}
          style={{
            background: "var(--card)",
            padding: "28px 24px",
            cursor: "pointer",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            gap: 16,
          }}
        >
          <div className="t-mono" style={{ color: "var(--muted)" }}>Projeniz mi var?</div>
          <div className="t-display" style={{ fontSize: 22, fontStyle: "italic" }}>
            Birlikte çalışalım →
          </div>
        </div>
      </div>
    </section>
  );
}

function StudioBrief({ navigate, projects }) {
  return (
    <section
      style={{
        padding: "88px 32px",
        background: "var(--bg-alt)",
        borderTop: "1px solid var(--line-soft)",
        borderBottom: "1px solid var(--line-soft)",
      }}
    >
      <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 64, alignItems: "start" }}>
        <span className="t-mono" style={{ color: "var(--muted)" }}>(Yüksek Mimar · Restorasyon Uzmanı)</span>
        <div>
          <p
            className="t-display"
            style={{
              fontSize: "clamp(28px, 3vw, 44px)",
              lineHeight: 1.2,
              margin: 0,
              textWrap: "pretty",
            }}
          >
            <em>Gizem Güleç</em> — Bergama merkezli yüksek mimar ve restorasyon uzmanı.
            Konut projelerinden tarihi yapı restorasyonuna; rölöve, restitüsyon,
            3B görselleştirme ve şantiye takibine kadar süreci tek elden yürütüyorum.
          </p>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(4, 1fr)",
              gap: 32,
              marginTop: 56,
              borderTop: "1px solid var(--line-soft)",
              paddingTop: 32,
            }}
          >
            {[
              [String(projects.length).padStart(2, "0"), "Seçili proje"],
              [String(projects.filter((p) => p.type === "Konut").length).padStart(2, "0"), "Konut projesi"],
              [String(projects.filter((p) => p.type === "Restorasyon").length).padStart(2, "0"), "Restorasyon"],
              ["07", "Uzmanlık alanı"],
            ].map(([n, l]) => (
              <div key={l}>
                <div className="t-display" style={{ fontSize: 52, lineHeight: 1, fontVariantNumeric: "tabular-nums" }}>{n}</div>
                <div className="t-mono" style={{ color: "var(--muted)", marginTop: 8 }}>{l}</div>
              </div>
            ))}
          </div>
          <button
            onClick={() => navigate({ page: "about" })}
            className="t-mono"
            style={{
              marginTop: 40,
              padding: "12px 0",
              borderBottom: "1px solid var(--fg)",
            }}
          >
            Hakkımızda →
          </button>
        </div>
      </div>
    </section>
  );
}

function Home({ projects, navigate, tweaks }) {
  const heroVariant = tweaks.hero || "editorial";
  const bigHero = projects.find((p) => p.id === "ag-binasi");

  return (
    <div className="page-in">
      {heroVariant === "editorial" && <HeroEditorial projects={projects} navigate={navigate} />}
      {heroVariant === "fullbleed" && <HeroFullBleed project={bigHero} navigate={navigate} />}
      {heroVariant === "marquee" && <HeroMarquee projects={projects} navigate={navigate} />}
      {heroVariant === "index" && <HeroIndex projects={projects} navigate={navigate} />}

      <FeaturedList projects={projects} navigate={navigate} />
      <ExpertiseGrid navigate={navigate} />
      <StudioBrief navigate={navigate} projects={projects} />
    </div>
  );
}

window.Home = Home;