// Sections — Hero, Marquee, Services, Projects, Approach, Contact, Footer
const { useState, useEffect, useRef } = React;

/* ============== NAV ============== */
function Nav({ t, lang, setLang }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "nav-scrolled" : ""}`}>
      <a href="#top" className="nav-mark">
        <img src="assets/logo.png" alt="Ýyldyzly Asman" className="nav-logo" />
      </a>
      <div className="nav-links">
        {t.nav.map((x, i) => (
          <a key={i} href={["#services", "#gallery", "#approach", "#contact"][i]}>{x}</a>
        ))}
      </div>
      <div className="nav-lang" role="group" aria-label="language">
        <button className={lang === "EN" ? "on" : ""} onClick={() => setLang("EN")}>EN</button>
        <span>·</span>
        <button className={lang === "RU" ? "on" : ""} onClick={() => setLang("RU")}>RU</button>
      </div>
    </nav>
  );
}

/* ============== HERO ============== */
function Hero({ t, hero, starIntensity }) {
  return (
    <section id="top" className="hero">
      {hero === "stars" ? (
        <Starfield intensity={starIntensity} />
      ) : (
        <div className="hero-photo">
          <img src="assets/catalog/p05_1_917x1295.png" alt="Steel-frame industrial construction at sunset" />
        </div>
      )}
      <div className="hero-vignette" />

      <div className="hero-inner">
        <div className="hero-eyebrow">{t.hero.eyebrow}</div>
        <h1 className="hero-title display">
          <span className="line">{t.hero.title1}</span>
          <span className="line">{t.hero.title2}</span>
          <span className="line script">{t.hero.title3}</span>
        </h1>
        <p className="hero-lede">{t.hero.lede}</p>
        <div className="hero-cta">
          <a href="#contact" className="btn btn-gold">{t.hero.cta1} <span aria-hidden="true">→</span></a>
          <a href="#projects" className="btn btn-ghost">{t.hero.cta2}</a>
        </div>
      </div>

      {/* small status row at bottom */}
    </section>
  );
}



/* ============== MARQUEE ============== */
function Marquee({ t }) {
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {Array.from({ length: 4 }).map((_, i) => (
          <span key={i} className="marquee-item">
            <span className="marquee-star">✦</span> {t.marquee}
          </span>
        ))}
      </div>
    </div>
  );
}

/* ============== SERVICES ============== */
function Services({ t }) {
  const [open, setOpen] = useState(0);
  return (
    <section id="services" className="services">
      <header className="sec-head">
        <div className="eyebrow">{t.services.eyebrow}</div>
        <h2 className="display sec-title">{t.services.title}</h2>
        <p className="sec-lede">{t.services.lede}</p>
      </header>

      <div className="svc-list">
        {t.services.items.map((it, i) => (
          <article
            key={i}
            className={`svc ${open === i ? "svc-open" : ""}`}
            onMouseEnter={() => setOpen(i)}
          >
            <div className="svc-row">
              <div className="svc-n mono">{it.n}</div>
              <div className="svc-name display">{it.name}</div>
              <div className="svc-alt mono">{it.ru}</div>
              <div className="svc-tag">{it.tag}</div>
              <div className="svc-arrow">→</div>
            </div>
            <div className="svc-body">
              <div className="svc-illus">
                <ServiceIllustration kind={i} />
              </div>
              <div className="svc-text">
                <p>{it.desc}</p>
                <ul>
                  {it.bullets.map((b, j) => (
                    <li key={j}><span className="bullet-dot">✦</span> {b}</li>
                  ))}
                </ul>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function ServiceIllustration({ kind }) {
  const imgs = [
    { src: "assets/catalog/p05_1_917x1295.png", alt: "Steel-frame industrial construction at sunset" },
    { src: "assets/catalog/p10_1_724x1024.png", alt: "Workforce dining hall on a construction site" },
    { src: "assets/catalog/p13_3_1238x1037.png", alt: "Steel pipe inventory in sourcing warehouse" },
  ];
  const im = imgs[kind];
  return (
    <div className="ph ph-img">
      <img src={im.src} alt={im.alt} loading="lazy" />
    </div>
  );
}

/* ============== GALLERY ============== */
function Gallery({ t }) {
  const [tab, setTab] = useState(0);
  const tabName = t.gallery.tabs[tab];
  const items = t.gallery.items[tabName] || [];
  return (
    <section id="gallery" className="gallery">
      <header className="sec-head">
        <div className="eyebrow">{t.gallery.eyebrow}</div>
        <h2 className="display sec-title">{t.gallery.title}</h2>
        <p className="sec-lede">{t.gallery.lede}</p>
      </header>

      <div className="gallery-tabs" role="tablist">
        {t.gallery.tabs.map((name, i) => (
          <button
            key={i}
            role="tab"
            aria-selected={tab === i}
            className={`gtab ${tab === i ? "on" : ""}`}
            onClick={() => setTab(i)}
          >
            <span className="gtab-n mono">0{i + 1}</span>
            <span className="gtab-name">{name}</span>
          </button>
        ))}
      </div>

      <div className="gallery-grid" key={tab}>
        {items.map((it, i) => (
          <figure key={i} className={`gcard gcard-${i % 6}`}>
            <div className="gcard-img">
              {it.img ? (
                <img src={it.img} alt={it.name} loading="lazy" />
              ) : (
                <Placeholder label={`${tabName.toUpperCase()} · ${it.name}`} tone="warm" />
              )}
            </div>
            <figcaption>
              <div className="gcap-name display">{it.name}</div>
              <div className="gcap-meta mono">{it.meta}</div>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
}

/* ============== PROJECTS (deprecated, kept for compatibility) ============== */
function Projects({ t }) {
  const items = [
    { tag: "Construction", year: "2025", name: "Private residence · Köpetdag district", size: "1 800 m²", scope: "Turn-key build, marble interiors, bespoke joinery" },
    { tag: "Catering",     year: "2025", name: "Diplomatic reception · Berkarar Hall", size: "1 200 guests", scope: "Six-course service, full crew, equipment" },
    { tag: "Sourcing",     year: "2024", name: "Hotel re-fit · Awaza coast",          size: "240 rooms",   scope: "Lighting, stone, HoReCa equipment" },
    { tag: "Construction", year: "2024", name: "Office HQ · Magtymguly Avenue",       size: "4 200 m²",    scope: "Fit-out, acoustic ceilings, terrace" },
    { tag: "Catering",     year: "2024", name: "Wedding · Toý Mekany",                size: "780 guests",  scope: "Traditional + European menus" },
    { tag: "Sourcing",     year: "2023", name: "Government complex · Aşgabat",        size: "9 700 m²",    scope: "Italian stone, bespoke fittings" },
  ];

  return (
    <section id="projects" className="projects">
      <header className="sec-head">
        <div className="eyebrow">{t.work.eyebrow}</div>
        <h2 className="display sec-title">{t.work.title}</h2>
        <p className="sec-lede">{t.work.lede}</p>
      </header>

      <div className="proj-grid">
        {items.map((p, i) => (
          <ProjectCard key={i} idx={i} p={p} />
        ))}
      </div>
    </section>
  );
}

function ProjectCard({ idx, p }) {
  const aspect = idx === 0 ? "tall" : idx === 3 ? "wide" : "std";
  return (
    <article className={`proj proj-${aspect}`}>
      <div className="proj-img">
        <Placeholder label={`PROJECT ${String(idx + 1).padStart(2, "0")} · ${p.name}`} tone="warm" />
        <div className="proj-overlay">
          <div className="proj-tag mono">{p.tag} · {p.year}</div>
          <div className="proj-name display">{p.name}</div>
          <div className="proj-meta">
            <span>{p.size}</span>
            <span className="dot-sep">·</span>
            <span>{p.scope}</span>
          </div>
        </div>
      </div>
    </article>
  );
}

/* ============== APPROACH ============== */
function Approach({ t }) {
  return (
    <section id="approach" className="approach">
      <header className="sec-head">
        <div className="eyebrow">{t.approach.eyebrow}</div>
        <h2 className="display sec-title">{t.approach.title}</h2>
        <p className="sec-lede">{t.approach.lede}</p>
      </header>

      <ol className="steps">
        {t.approach.steps.map((s, i) => (
          <li key={i} className="step">
            <div className="step-n display">{s.n}</div>
            <div className="step-body">
              <h4 className="step-title">{s.title}</h4>
              <p>{s.body}</p>
            </div>
          </li>
        ))}
      </ol>
    </section>
  );
}

/* ============== CONTACT ============== */
function Contact({ t }) {
  const [form, setForm] = useState({ name: "", company: "", type: t.contact.form.types[0], message: "" });
  const [sent, setSent] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4000);
  };
  return (
    <section id="contact" className="contact">
      <Starfield intensity={0.6} density={0.00006} />
      <div className="contact-vignette" />
      <div className="contact-inner">
        <div className="contact-left">
          <div className="eyebrow on-dark">{t.contact.eyebrow}</div>
          <h2 className="display contact-title">
            {t.contact.title.split("\n").map((l, i) => <span key={i} className="line">{l}</span>)}
          </h2>
          <div className="contact-meta">
            <div>
              <div className="cm-label mono">Studio</div>
              {t.contact.address.map((l, i) => <div key={i}>{l}</div>)}
            </div>
            <div>
              <div className="cm-label mono">Hours</div>
              {t.contact.hours.map((l, i) => <div key={i}>{l}</div>)}
            </div>
            <div>
              <div className="cm-label mono">Direct</div>
              <div>{t.contact.phone}</div>
              <div className="link-gold">{t.contact.email}</div>
            </div>
          </div>
        </div>

        <form className="contact-form" onSubmit={submit}>
          <label className="field">
            <span className="mono">{t.contact.form.name}</span>
            <input value={form.name} onChange={(e) => setForm({...form, name: e.target.value})} required />
          </label>
          <label className="field">
            <span className="mono">{t.contact.form.company}</span>
            <input value={form.company} onChange={(e) => setForm({...form, company: e.target.value})} />
          </label>
          <fieldset className="field-group">
            <legend className="mono">{t.contact.form.type}</legend>
            <div className="chips">
              {t.contact.form.types.map((x, i) => (
                <button
                  key={i} type="button"
                  className={`chip ${form.type === x ? "on" : ""}`}
                  onClick={() => setForm({...form, type: x})}
                >{x}</button>
              ))}
            </div>
          </fieldset>
          <label className="field">
            <span className="mono">{t.contact.form.message}</span>
            <textarea rows="4" value={form.message} onChange={(e) => setForm({...form, message: e.target.value})} required />
          </label>
          <div className="form-foot">
            <button className="btn btn-gold" type="submit">
              {sent ? "✓ Sent" : t.contact.form.send} <span aria-hidden="true">→</span>
            </button>
            <p className="form-note">{t.contact.form.note}</p>
          </div>
        </form>
      </div>
    </section>
  );
}

/* ============== FOOTER ============== */
function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="footer-top">
        <div className="footer-brand">
          <img src="assets/logo.png" alt="Ýyldyzly Asman" />
          <p className="footer-tag">{t.footer.tag}</p>
        </div>
        <div className="footer-cols">
          {t.footer.cols.map((c, i) => (
            <div key={i} className="footer-col">
              <div className="mono col-h">{c.h}</div>
              <ul>{c.links.map((l, j) => <li key={j}><a href="#">{l}</a></li>)}</ul>
            </div>
          ))}
        </div>
      </div>
      <div className="footer-bottom">
        <div className="mono">{t.footer.legal}</div>
        <div className="mono">Ashgabat · 41.0°N · 58.4°E</div>
      </div>
    </footer>
  );
}

/* ============== PLACEHOLDER ============== */
function Placeholder({ label, tone = "warm" }) {
  return (
    <div className={`ph ph-${tone}`}>
      <div className="ph-stripes" />
      <div className="ph-label mono">{label}</div>
    </div>
  );
}

Object.assign(window, { Nav, Hero, Marquee, Services, Gallery, Projects, Approach, Contact, Footer, Placeholder });