/* global React, TopBar, MenuOverlay, Footer, Home, About, ProjectDetail, Placeholder, PROJECTS */

const { useState: useState2, useEffect: useEffect2, useMemo: useMemo2 } = React;

/* ------------------------------------------------------------
   PROJECTS INDEX
   ------------------------------------------------------------ */
function ProjectsIndex({ setPage, setActiveProject }) {
  const [filter, setFilter] = useState2('all');
  const [hoverImg, setHoverImg] = useState2(null);
  const [mouse, setMouse] = useState2({ x: 0, y: 0 });
  const filters = [
    { id: 'all', label: 'all' },
    { id: 'original', label: 'residential' },
    { id: 'landscape', label: 'mixed-use' },
    { id: 'small', label: 'commercial' },
  ];
  const list = useMemo2(
    () => filter === 'all' ? PROJECTS : PROJECTS.filter((p) => p.cat === filter),
    [filter]
  );
  return (
    <div className="page-shell" onMouseMove={(e) => setMouse({ x: e.clientX, y: e.clientY })}>
      <div className="page-intro">
        <h1>Built work.</h1>
        <p className="lede">
          Different in scale. Consistent in standard.
        </p>
      </div>

      <div className="projects-index">
        <div className="filter-bar">
          {filters.map((f) => (
            <button
              key={f.id}
              className={`chip ${filter === f.id ? 'active' : ''}`}
              onClick={() => setFilter(f.id)}
            >
              {f.label}
            </button>
          ))}
          <span className="chip" style={{ marginLeft: 'auto', opacity: 0 }} aria-hidden="true" />
        </div>

        <div className="projects-rows" key={filter}>
          {list.map((p, i) => (
            <div
              key={p.id}
              className="project-row fade-in"
              style={{ animationDelay: `${i * 40}ms` }}
              onMouseEnter={() => setHoverImg(p)}
              onMouseLeave={() => setHoverImg((cur) => cur && cur.id === p.id ? null : cur)}
              onClick={() => { setActiveProject(p.id); setPage('project'); }}
            >
              <span className="idx">{p.idx}</span>
              <span className="name">{p.name}</span>
              <span className="meta">{p.place}</span>
              <span className="meta">{p.status}</span>
              <span className="arrow"><span>view →</span></span>
            </div>
          ))}
          {list.length === 0 && (
            <div style={{ padding: '64px 0', color: 'var(--muted)' }}>
              <span className="mono">no projects in this category yet.</span>
            </div>
          )}
        </div>
      </div>
      {hoverImg && hoverImg.image && (
        <div className="row-preview" style={{ left: mouse.x, top: mouse.y, backgroundImage: `url('${hoverImg.image}')` }} aria-hidden="true" />
      )}
    </div>
  );
}

/* ------------------------------------------------------------
   CONTACT
   ------------------------------------------------------------ */
function Contact() {
  const [form, setForm] = useState2({ name: '', email: '', org: '', interest: 'landowner', message: '' });
  const [sent, setSent] = useState2(false);
  const onSubmit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) return;
    setSent(true);
  };
  const update = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  return (
    <div className="page-shell">
      <div className="page-intro">
        <h1>Let's talk.</h1>
      </div>

      <div className="contact-wrap">
        <div className="left">
          <div className="placeholder" style={{ aspectRatio: '4 / 3', backgroundImage: "url('assets/contact-image.png')", backgroundSize: 'cover', backgroundPosition: 'left center', filter: 'grayscale(1)' }} />
          <dl className="info">
            <dt>email</dt>
            <dd><a href="mailto:accounts@akamconstructions.com.au">accounts@akamconstructions.com.au</a></dd>
            <dt>post</dt>
            <dd>PO Box 3029, Yeronga QLD 4104</dd>
            <dt>region</dt>
            <dd>South East Queensland — Brisbane / Sunshine Coast / Gold Coast</dd>
            <dt>follow</dt>
            <dd>
              <a href="https://www.instagram.com/akam_constructions/?hl=en" target="_blank" rel="noopener noreferrer" style={{ marginRight: 18 }}>Instagram</a>
              <a href="https://www.linkedin.com/company/akam-constructions/posts/?feedView=all" target="_blank" rel="noopener noreferrer">LinkedIn</a>
            </dd>
          </dl>
        </div>

        <div>
          {!sent ? (
            <form className="form" onSubmit={onSubmit}>

              <div className="field-row">
                <div className="field">
                  <label htmlFor="name">name</label>
                  <input id="name" type="text" value={form.name} onChange={update('name')} required />
                </div>
                <div className="field">
                  <label htmlFor="email">email</label>
                  <input id="email" type="email" value={form.email} onChange={update('email')} required />
                </div>
              </div>

              <div className="field">
                <label htmlFor="org">organisation</label>
                <input id="org" type="text" value={form.org} onChange={update('org')} />
              </div>

              <div className="field">
                <label htmlFor="interest">i am a…</label>
                <select id="interest" value={form.interest} onChange={update('interest')}>
                  <option value="landowner">landowner</option>
                  <option value="investor">investor</option>
                  <option value="jv">joint venture partner</option>
                  <option value="agent">agent / broker</option>
                  <option value="other">other</option>
                </select>
              </div>

              <div className="field">
                <label htmlFor="message">message</label>
                <textarea id="message" value={form.message} onChange={update('message')} required
                  placeholder="A short note on the site, opportunity, or topic you'd like to discuss." />
              </div>

              <button className="btn-line" type="submit">
                send enquiry <span className="arrow-big">→</span>
              </button>
            </form>
          ) : (
            <div className="fade-in" style={{ padding: '48px 0' }}>
              <div className="eyebrow">received — 01</div>
              <h2 className="h-2" style={{ marginTop: 18, marginBottom: 18, maxWidth: '18ch', fontWeight: 400 }}>
                Thank you{form.name ? `, ${form.name.split(' ')[0]}` : ''}. We'll be in touch.
              </h2>
              <p className="lede" style={{ color: 'rgba(19,22,24,0.78)' }}>
                Your enquiry has reached the AKAM team. We aim to respond within two business days.
              </p>
              <div style={{ marginTop: 28 }}>
                <button className="btn-line" onClick={() => { setSent(false); setForm({ name: '', email: '', org: '', interest: 'landowner', message: '' }); }}>
                  send another <span className="arrow-big">→</span>
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ------------------------------------------------------------
   PROJECT PAGE wrapper
   ------------------------------------------------------------ */
function ProjectPage({ projectId, setPage, setActiveProject }) {
  const p = PROJECTS.find((x) => x.id === projectId) || PROJECTS[0];
  return (
    <ProjectDetail
      project={p}
      onNav={(id) => { setPage(id); }}
      onOpenProject={(id) => { setActiveProject(id); setPage('project'); }}
    />
  );
}

/* ------------------------------------------------------------
   APP
   ------------------------------------------------------------ */
function App() {
  const initialHash = (typeof window !== 'undefined' && window.location.hash.replace('#', '')) || 'home';
  const VALID_PAGES = ['home', 'about', 'projects', 'project', 'contact'];

  const [page, setPageInner] = useState2(VALID_PAGES.includes(initialHash) ? initialHash : 'home');
  const [activeProject, setActiveProject] = useState2('cremin-street');
  const [menuOpen, setMenuOpen] = useState2(false);

  const setPage = (id) => {
    setPageInner(id);
    if (typeof window !== 'undefined') {
      window.history.replaceState(null, '', `#${id}`);
      window.scrollTo({ top: 0, behavior: 'instant' });
    }
  };

  useEffect2(() => {
    const onHash = () => {
      const id = window.location.hash.replace('#', '') || 'home';
      if (VALID_PAGES.includes(id)) setPageInner(id);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  useEffect2(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
  }, [menuOpen]);

  return (
    <div className="app">
      <TopBar page={page} setPage={setPage} openMenu={() => setMenuOpen(true)} />
      {menuOpen && <MenuOverlay page={page} setPage={setPage} close={() => setMenuOpen(false)} />}
      <main data-screen-label={`AKAM — ${page}`}>
        {page === 'home' && <Home setPage={setPage} setActiveProject={setActiveProject} />}
        {page === 'about' && <About setPage={setPage} />}
        {page === 'projects' && <ProjectsIndex setPage={setPage} setActiveProject={setActiveProject} />}
        {page === 'project' && <ProjectPage projectId={activeProject} setPage={setPage} setActiveProject={setActiveProject} />}
        {page === 'contact' && <Contact />}
      </main>
      <Footer setPage={setPage} />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);