/* global React, ReactDOM, Icon, Crown, Logo, Nav, Footer, ContactForm, formatPrice, Divider, PageShell, useT, useLang */
const { useState, useEffect, useContext } = React;

const Hero = () => {
  const t = useT('hero');
  return (
    <section className="hero container">
      <div className="hero__grid">
        <div className="hero__text">
          <span className="eyebrow hero__eyebrow"><Crown/> {t.eyebrow}</span>
          <h1>{t.h1a} <em>{t.h1em}</em> {t.h1b}</h1>
          <p className="hero__lead">{t.lead}</p>
          <div className="hero__ctas">
            <a href="Projects.html" className="btn btn--lg">{t.cta1} <span className="arrow"><Icon name="arrow" size={14}/></span></a>
            <a href="About Us.html" className="btn btn--ghost btn--lg">{t.cta2}</a>
          </div>
        </div>
        <div className="hero__media">
          <img src={window.NH_DATA.hero} alt="Scandinavian timber-frame home"/>
          <div className="hero__chips">
            <span className="chip"><span className="dot"/> Up to 60% faster construction</span>
            <span className="chip"><span className="dot"/> A+ energy efficiency class</span>
          </div>
        </div>
      </div>
      <div className="hero__sub">
        <div><span className="hero__sub__num">01</span><div className="hero__sub__body"><strong>{t.sub1title}</strong><span>{t.sub1body}</span></div></div>
        <div><span className="hero__sub__num">02</span><div className="hero__sub__body"><strong>{t.sub2title}</strong><span>{t.sub2body}</span></div></div>
        <div><span className="hero__sub__num">03</span><div className="hero__sub__body"><strong>{t.sub3title}</strong><span>{t.sub3body}</span></div></div>
      </div>
    </section>
  );
};

const Stats = () => {
  const t = useT('stats');
  const nums = [
    { num: 200, suffix: "+" },
    { num: 10, suffix: "+" },
    { num: 4, suffix: "" },
    { num: 100, suffix: "%" },
  ];
  return (
    <section className="section section--alt" id="numbers">
      <div className="container">
        <div className="section__head">
          <div><span className="eyebrow"><Crown/> {t.eyebrow}</span><h2 style={{ marginTop: 16 }}>{t.h2}</h2></div>
          <p>{t.lead}</p>
        </div>
        <div className="stats">
          {nums.map((it, i) => (
            <div className="stat" key={i}>
              <div className="stat__num">{it.num}<span className="suffix">{it.suffix}</span></div>
              <div className="stat__label">{t.labels[i]}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const About = () => {
  const t = useT('about');
  return (
    <section className="section" id="about">
      <div className="container about">
        <div className="about__media"><img src={window.NH_DATA.about} alt="About Norge House"/></div>
        <div>
          <span className="eyebrow"><Crown/> {t.eyebrow}</span>
          <h2 style={{ marginTop: 16, marginBottom: 24 }}>{t.h2}</h2>
          <p>{t.p1}</p>
          <p>{t.p2}</p>
          <ul className="about__bullets">
            <li><Icon name="check" size={16}/> {t.b1}</li>
            <li><Icon name="check" size={16}/> {t.b2}</li>
            <li><Icon name="check" size={16}/> {t.b3}</li>
          </ul>
          <a href="About Us.html" className="btn">{t.cta} <span className="arrow"><Icon name="arrow" size={14}/></span></a>
        </div>
      </div>
    </section>
  );
};

const Features = () => {
  const t = useT('features');
  const lang = useLang();
  const featureCards = (window.NH_TRANSLATIONS[lang] || window.NH_TRANSLATIONS['EN']).featureCards || window.NH_DATA.features;
  return (
    <section className="section section--alt">
      <div className="container">
        <div className="section__head">
          <div><span className="eyebrow"><Crown/> {t.eyebrow}</span><h2 style={{ marginTop: 16 }}>{t.h2}</h2></div>
          <p>{t.lead}</p>
        </div>
        <div className="features">
          {featureCards.map((f, i) => (
            <article className="feature" key={i}>
              <div className="feature__head">
                <span className="feature__icon"><Icon name={window.NH_DATA.features[i].icon}/></span>
                <span className="feature__num">0{i + 1} / 06</span>
              </div>
              <h3>{f.title}</h3>
              <p>{f.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const Projects = ({ onOpen }) => {
  const t = useT('projects');
  const list = window.NH_DATA.projects.slice(0, 3);
  return (
    <section className="section">
      <div className="container">
        <div className="section__head">
          <div><span className="eyebrow"><Crown/> {t.eyebrow}</span><h2 style={{ marginTop: 16 }}>{t.h2}</h2></div>
          <p>{t.lead}</p>
        </div>
        <div className="projects__grid">
          {list.map(p => (
            <button className="project" key={p.id} onClick={() => onOpen(p)}>
              <div className="project__media">
                <span className="project__tag">{p.tag}</span>
                <img src={p.img} alt={p.name} loading="lazy"/>
              </div>
              <div className="project__head">
                <h3>{p.name}</h3>
                <div className="project__price-block">
                  {p.price != null && <span className="project__price">{formatPrice(p.price)}</span>}
                  {p.price != null && <span className="project__price-note">excl. VAT</span>}
                </div>
              </div>
              <div className="project__meta">
                <span><Icon name="area" size={14}/> {p.area} m²</span>
                <span><Icon name="levels" size={14}/> {p.levels} level{p.levels > 1 ? "s" : ""}</span>
                {p.rooms && <span><Icon name="rooms" size={14}/> {p.rooms} rooms</span>}
              </div>
            </button>
          ))}
        </div>
        <div className="projects__cta">
          <a href="Projects.html" className="btn btn--lg">{t.cta} <span className="arrow"><Icon name="arrow" size={14}/></span></a>
        </div>
      </div>
    </section>
  );
};

const Lightbox = ({ project, onClose }) => {
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = project ? "hidden" : "";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [project, onClose]);
  if (!project) return null;
  return (
    <div className="lightbox is-open" onClick={onClose}>
      <div className="lightbox__inner" onClick={e => e.stopPropagation()}>
        <button className="lightbox__close" onClick={onClose} aria-label="Close"><Icon name="close" size={16}/></button>
        <div className="lightbox__media"><img src={project.img} alt={project.name}/></div>
        <div className="lightbox__body">
          <span className="eyebrow"><Crown/> {project.tag} · House kit</span>
          <h2 style={{ fontSize: 40 }}>{project.name}</h2>
          <p>Engineered timber-frame house kit, manufactured in our facility.</p>
          <div className="lightbox__specs">
            <div><span>Floor area</span><strong>{project.area} m²</strong></div>
            <div><span>Levels</span><strong>{project.levels}</strong></div>
            <div><span>Rooms</span><strong>{project.rooms || "—"}</strong></div>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 8, gap: 14, flexWrap: "wrap" }}>
            <div>
              <div style={{ fontSize: 12, color: "var(--muted)", marginBottom: 4 }}>Kit price (excl. VAT)</div>
              <div style={{ fontSize: 30, color: "var(--accent-2)", fontWeight: 500 }}>{project.price != null ? formatPrice(project.price) : "On request"}</div>
            </div>
            <a href="Contacts.html" className="btn" onClick={onClose}>Request quote <span className="arrow"><Icon name="arrow" size={14}/></span></a>
          </div>
        </div>
      </div>
    </div>
  );
};

const CtaSection = () => {
  const t = useT('cta');
  const lang = useLang();
  return (
    <section className="cta">
      <div className="container cta__inner">
        <div>
          <span className="eyebrow" style={{ color: "rgba(255,255,255,0.7)" }}><Crown/> {t.eyebrow}</span>
          <h2 style={{ marginTop: 16 }}>{t.h2}</h2>
          <p className="cta__lead">{t.lead}</p>
          <div style={{ marginTop: 32, display: "grid", gap: 10, fontSize: 14, color: "rgba(255,255,255,0.7)" }}>
            <div>{t.address}</div>
            <div>+371 25 774 431 · info@norgehouse.com</div>
          </div>
        </div>
        <ContactForm projects={window.NH_DATA.projects.map(p => p.name)} fields={t.fields} lang={lang}/>
      </div>
    </section>
  );
};

const NewsSection = () => {
  const t = useT('news');
  return (
    <section className="section section--paper">
      <div className="container">
        <div className="section__head">
          <div><span className="eyebrow"><Crown/> {t.eyebrow}</span><h2 style={{ marginTop: 16 }}>{t.h2}</h2></div>
          <p>{t.lead}</p>
        </div>
        <div className="news__grid">
          {window.NH_DATA.news.slice(0,3).map((n, i) => (
            <article className="news-item" key={i}>
              <div className="news-item__media"><img src={n.img} alt=""/></div>
              <div className="news-item__date">{n.category} · {n.date}</div>
              <h3>{n.title}</h3>
              <span className="news-item__more"><a href={"Article.html#" + n.id}>{t.readMore} <Icon name="arrow" size={14}/></a></span>
            </article>
          ))}
        </div>
        <div className="projects__cta">
          <a href="News.html" className="btn btn--lg">{t.cta} <span className="arrow"><Icon name="arrow" size={14}/></span></a>
        </div>
      </div>
    </section>
  );
};

const App = () => {
  const [openProject, setOpenProject] = useState(null);
  const lang = useLang();
  const td = useT('divider') || {};
  return (
    <>
      <Hero/>
      <Stats/>
      <About/>
      <Features/>
      <Projects onOpen={setOpenProject}/>
      <section className="divider">
        <div className="container">
          <div className="divider__text">{td.line1} <em>{td.em1}</em> {td.line2} <em>{td.em2}</em> {td.line3}</div>
          <a href="Contacts.html" className="btn btn--lg">{td.cta} <span className="arrow"><Icon name="arrow" size={14}/></span></a>
        </div>
      </section>
      <CtaSection/>
      <Lightbox project={openProject} onClose={() => setOpenProject(null)}/>
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <PageShell current="home">
    <App/>
  </PageShell>
);