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

const Hero = () => {
  const t = useT('hero');
  const lang = useLang();
  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={hrefFor("projects", lang)} className="btn btn--lg">{t.cta1} <span className="arrow"><Icon name="arrow" size={14}/></span></a>
            <a href={hrefFor("about", lang)} 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');
  const lang = useLang();
  return (
    <section className="section" id="about">
      <div className="container about">
        <div className="about__media"><img src={window.NH_DATA.homeAbout || 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={hrefFor("about", lang)} 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 = ({ count = 3 }) => {
  const t = useT('projects');
  const tp = useT('projectsPage') || {};
  const tagLabels = tp.tagLabels || {};
  const tc = (useT('common')) || {};
  const lang = useLang();
  const list = window.NH_DATA.projects.slice(0, count);
  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 => (
            <a className="project" key={p.id} href={hrefFor("projects", lang) + "#" + p.id}>
              <div className="project__media">
                <span className="project__tag">{tagLabels[p.tag] || p.tag}</span>
                <img src={p.img} alt={p.name} loading="lazy"/>
                <div className="project__hover-hint">{(window.NH_TRANSLATIONS[lang] && window.NH_TRANSLATIONS[lang].projectsPage && window.NH_TRANSLATIONS[lang].projectsPage.viewDetails) || "View details"}</div>
              </div>
              <div className="project__head">
                <h3>{p.name}</h3>
              </div>
              <div className="project__meta">
                <span><Icon name="area" size={14}/> {p.area} m²</span>
                <span><Icon name="levels" size={14}/> {p.levels} {p.levels > 1 ? (tc.levelPlural || "levels") : (tc.levelSingular || "level")}</span>
                {p.rooms && <span><Icon name="rooms" size={14}/> {p.rooms} {tc.roomsLabel || "rooms"}</span>}
              </div>
            </a>
          ))}
        </div>
        <div className="projects__cta">
          <a href={hrefFor("projects", lang)} className="btn btn--lg">{t.cta} <span className="arrow"><Icon name="arrow" size={14}/></span></a>
        </div>
      </div>
    </section>
  );
};

// Lightbox is provided by shared.jsx (window.Lightbox). Home page no longer renders it inline —
// clicking a project card navigates to Projects.html#<id> which opens the shared lightbox there.

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');
  const lang = useLang();
  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={hrefFor("news", lang)} className="btn btn--lg">{t.cta} <span className="arrow"><Icon name="arrow" size={14}/></span></a>
        </div>
      </div>
    </section>
  );
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "projectCount": 3,
  "showStats": true,
  "showAbout": true,
  "showFeatures": true,
  "showContactForm": true
}/*EDITMODE-END*/;

const App = () => {
  const lang = useLang();
  const td = useT('divider') || {};
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  const [editOpen, setEditOpen] = useState(false);

  useEffect(() => {
    const onMsg = (e) => {
      if (!e.data || !e.data.type) return;
      if (e.data.type === '__activate_edit_mode') setEditOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setEditOpen(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const setTweak = (k, v) => {
    setTweaks(t => ({ ...t, [k]: v }));
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  const closePanel = () => {
    setEditOpen(false);
    window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*');
  };

  return (
    <>
      <Hero/>
      {tweaks.showStats && <Stats/>}
      {tweaks.showAbout && <About/>}
      {tweaks.showFeatures && <Features/>}
      <Projects count={tweaks.projectCount}/>
      <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={hrefFor("contacts", lang)} className="btn btn--lg">{td.cta} <span className="arrow"><Icon name="arrow" size={14}/></span></a>
        </div>
      </section>
      {tweaks.showContactForm && <CtaSection/>}

      {editOpen && (
        <div style={{ position: 'fixed', right: 20, bottom: 20, width: 280, background: '#fff', border: '1px solid #d8d3c8', borderRadius: 12, boxShadow: '0 20px 60px rgba(0,0,0,0.15)', padding: 18, zIndex: 10000, fontFamily: 'Inter, sans-serif' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
            <strong style={{ fontSize: 13, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Tweaks</strong>
            <button onClick={closePanel} style={{ background: 'none', border: 0, cursor: 'pointer', padding: 4, lineHeight: 0 }}><Icon name="close" size={14}/></button>
          </div>
          <div style={{ display: 'grid', gap: 12 }}>
            <label style={{ display: 'grid', gap: 6, fontSize: 12 }}>
              <span style={{ color: '#6b6b6b' }}>Projects shown ({tweaks.projectCount})</span>
              <input type="range" min="1" max="6" value={tweaks.projectCount} onChange={e => setTweak('projectCount', parseInt(e.target.value, 10))}/>
            </label>
            {[['showStats', 'Stats section'], ['showAbout', 'About section'], ['showFeatures', 'Features section'], ['showContactForm', 'Contact form section']].map(([k, label]) => (
              <label key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13, cursor: 'pointer' }}>
                <span>{label}</span>
                <input type="checkbox" checked={!!tweaks[k]} onChange={e => setTweak(k, e.target.checked)}/>
              </label>
            ))}
          </div>
        </div>
      )}
    </>
  );
};

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