/* global React, useT, HeroRatio, ProfileMock, EmployerFlow, NymoMark */

const GOOGLE_FORMS_ACTION = "https://docs.google.com/forms/d/e/1FAIpQLSe9u1GSWr-4FUW4A6GKFK-WNi8Unz7aH5QHseg5YaJT6dEk-Q/formResponse";
const GOOGLE_FORMS_EMAIL_ENTRY = "entry.224623263";

function Hero() {
  const { t, lang } = useT();
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-inner">
        <div className="hero-specs" data-reveal aria-hidden="true">
          <span className="k">INDEX</span><span className="v">00</span>
          <span className="sep"></span>
          <span className="k">EDITION</span><span className="v">2026</span>
          <span className="sep"></span>
          <span className="k">{lang === "fi" ? "PAINOS" : "PRESS"}</span><span className="v">OULU</span>
        </div>
        <div className="hero-slogan" data-reveal>{t.hero.slogan}</div>
        <h1 className="h-display xl hero-h1" data-reveal data-reveal-delay="1">
          {t.hero.h1}<br/>
          <span className="accent">{t.hero.h1b}</span>
        </h1>
        <p className="hero-sub" data-reveal data-reveal-delay="2">{t.hero.sub}</p>
        <div className="hero-cta" data-reveal data-reveal-delay="2">
          <a href="#pilot" className="btn btn-primary">{t.hero.cta1} <span aria-hidden="true">→</span></a>
          <a href="#waitlist" className="btn btn-ghost">{t.hero.cta2}</a>
        </div>
        <div className="hero-manual" data-reveal data-reveal-delay="3" aria-hidden="true">
          <div className="hero-manual-meta">
            <span className="item"><span className="k">SIG</span><span className="v">→ ←</span></span>
            <span className="sep"></span>
            <span className="item"><span className="k">{lang === "fi" ? "TILA" : "STATUS"}</span><span className="v">PILOT</span></span>
            <span className="sep"></span>
            <span className="item"><span className="k">{lang === "fi" ? "PAIKKA" : "BUILT IN"}</span><span className="v">OULU · FI</span></span>
          </div>
          <svg className="hero-manual-ornament" viewBox="0 0 200 80" fill="none" aria-hidden="true">
            <g stroke="#131313" strokeWidth="1.5">
              <line x1="8" y1="40" x2="60" y2="40"></line>
              <line x1="60" y1="40" x2="100" y2="14"></line>
              <line x1="60" y1="40" x2="100" y2="40"></line>
              <line x1="60" y1="40" x2="100" y2="66"></line>
              <line x1="100" y1="40" x2="140" y2="40"></line>
              <line x1="140" y1="40" x2="192" y2="40"></line>
            </g>
            <g stroke="#131313" strokeWidth="1.5" fill="#F4F1EA">
              <rect x="2" y="34" width="12" height="12"></rect>
              <circle cx="60" cy="40" r="4"></circle>
              <rect x="92" y="6" width="14" height="14"></rect>
              <rect x="92" y="58" width="14" height="14"></rect>
              <circle cx="140" cy="40" r="4"></circle>
              <rect x="186" y="34" width="12" height="12"></rect>
            </g>
            <rect x="92" y="32" width="14" height="14" fill="#15616D" stroke="#131313" strokeWidth="1.5"></rect>
            <line x1="60" y1="40" x2="92" y2="40" stroke="#15616D" strokeWidth="2.5"></line>
            <line x1="106" y1="40" x2="140" y2="40" stroke="#15616D" strokeWidth="2.5"></line>
          </svg>
          <span className="hero-manual-stamp">SIGNAL ✓</span>
        </div>
        <span className="hero-crop-bl" aria-hidden="true"></span>
        <span className="hero-crop-br" aria-hidden="true"></span>
      </div>
    </section>
  );
}

function Problem() {
  const { t } = useT();
  return (
    <section className="section problem" data-screen-label="02 Problem">
      <div className="section-inner">
        <div className="section-eyebrow" data-reveal><span className="eyebrow">{t.problem.eyebrow}</span></div>
        <h2 className="h-display l problem-h" data-reveal data-reveal-delay="1">
          <span className="line">{t.problem.h1a}</span>
          <span className="line">{t.problem.h1b}</span>
          <span className="line">{t.problem.h1c}</span>
        </h2>
        <p className="section-sub" data-reveal data-reveal-delay="2">{t.problem.sub}</p>
        <div className="problem-cards" data-reveal data-reveal-delay="3">
          {t.problem.cards.map((card, i) => (
            <div key={i} className="problem-card">
              <span className="problem-card-n">{String(i + 1).padStart(2, "0")}</span>
              <p>{card}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function How() {
  const { t } = useT();
  return (
    <section id="how" className="section how" data-screen-label="03 How it works">
      <div className="section-inner">
        <div className="section-eyebrow" data-reveal><span className="eyebrow">{t.how.eyebrow}</span></div>
        <h2 className="h-display l" data-reveal data-reveal-delay="1">{t.how.h1}</h2>
        <div className="how-grid" data-reveal data-reveal-delay="2">
          {t.how.steps.map((s) => (
            <article key={s.n} className="how-step">
              <div className="how-step-n">{s.n}</div>
              <div>
                <h3 className="how-step-h">{s.h}</h3>
                <p className="how-step-p">{s.p}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Candidates() {
  const { t } = useT();
  return (
    <section id="cand" className="section cand" data-screen-label="04 For candidates">
      <div className="section-inner">
        <div className="section-eyebrow" data-reveal><span className="eyebrow">{t.cand.eyebrow}</span></div>
        <div className="section-split">
          <div className="section-split-copy">
            <h2 className="h-display l statement-h" data-reveal data-reveal-delay="1">
              <span className="line accent">{t.cand.h1}</span>
              <span className="line">{t.cand.h1b}</span>
            </h2>
            <p className="section-sub" data-reveal data-reveal-delay="2">{t.cand.sub}</p>
          </div>
          <div data-reveal data-reveal-delay="2"><ProfileMock /></div>
        </div>
      </div>
    </section>
  );
}

function Employers() {
  const { t } = useT();
  return (
    <section id="emp" className="section emp" data-screen-label="05 For employers">
      <div className="section-inner">
        <div className="section-eyebrow" data-reveal><span className="eyebrow">{t.emp.eyebrow}</span></div>
        <div className="emp-head">
          <h2 className="h-display l statement-h" data-reveal data-reveal-delay="1">
            <span className="line">{t.emp.h1}</span>
            <span className="line accent">{t.emp.h1b}</span>
          </h2>
          <p className="section-sub" data-reveal data-reveal-delay="2">{t.emp.sub}</p>
        </div>
        <EmployerFlow />
      </div>
    </section>
  );
}

function Pilot() {
  const { t } = useT();
  return (
    <section id="pilot" className="section pilot" data-screen-label="06 Pilot">
      <div className="section-inner">
        <div className="section-eyebrow" data-reveal><span className="eyebrow">{t.pilot.eyebrow}</span></div>
        <div className="pilot-grid">
          <div className="pilot-copy">
            <h2 className="h-display l" data-reveal data-reveal-delay="1">{t.pilot.h1}</h2>
            <p className="section-sub" data-reveal data-reveal-delay="2">{t.pilot.sub}</p>
            <div className="pilot-cta" data-reveal data-reveal-delay="2">
              <a href="#waitlist" className="btn btn-primary">{t.pilot.cta} <span aria-hidden="true">→</span></a>
            </div>
          </div>
          <aside className="pilot-fit" data-reveal data-reveal-delay="3">
            <div className="pilot-fit-l">{t.pilot.fitL}</div>
            <ul className="pilot-fit-list">
              {t.pilot.fitItems.map((it) => (
                <li key={it}><span className="mk">✓</span><span>{it}</span></li>
              ))}
            </ul>
          </aside>
        </div>
      </div>
    </section>
  );
}

function Waitlist() {
  const { t } = useT();
  const [email, setEmail] = React.useState("");
  const [done, setDone] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  async function submit(e) {
    e.preventDefault();
    if (!email.trim()) return;
    setLoading(true);
    const body = new URLSearchParams();
    body.append(GOOGLE_FORMS_EMAIL_ENTRY, email.trim());
    // no-cors: Google Forms doesn't support CORS — response is opaque but submission goes through
    fetch(GOOGLE_FORMS_ACTION, { method: "POST", mode: "no-cors", body }).finally(() => {
      setDone(true);
      setLoading(false);
    });
  }
  return (
    <section id="waitlist" className="section waitlist" data-screen-label="07 Waitlist">
      <div className="section-inner narrow">
        <div className="section-eyebrow" data-reveal><span className="eyebrow">{t.waitlist.eyebrow}</span></div>
        <h2 className="h-display l" data-reveal data-reveal-delay="1">{t.waitlist.h1}</h2>
        <p className="section-sub" data-reveal data-reveal-delay="2">{t.waitlist.sub}</p>

        {!done ? (
          <form className="wait-form" onSubmit={submit} data-reveal data-reveal-delay="2">
            <div className="wait-row">
              <input
                className="wait-input"
                type="email"
                placeholder={t.waitlist.placeholder}
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                aria-label={t.waitlist.placeholder}
              />
              <button className="wait-btn" type="submit" disabled={loading}>{loading ? "..." : `${t.waitlist.button} →`}</button>
            </div>
            <p className="wait-fine">{t.waitlist.fine}</p>
          </form>
        ) : (
          <div className="wait-done">
            <span className="wait-done-stamp">{t.waitlist.doneStamp}</span>
            <p className="wait-done-msg">{t.waitlist.doneMsg}</p>
          </div>
        )}
      </div>
    </section>
  );
}

function Footer() {
  const { t } = useT();
  return (
    <footer className="ftr">
      <div className="ftr-inner">
        <div className="ftr-mark" data-reveal>
          <span className="ftr-mark-text">nymo<span className="ftr-mark-dot"></span></span>
          <span className="ftr-mark-tag" aria-hidden="true">MANUAL · OULU · v0.1</span>
        </div>
        <div className="ftr-top">
          <div>
            <div className="ftr-brand-line">
              <span>{t.footer.tagline}</span>
              <span>{t.footer.builtIn}</span>
            </div>
          </div>
          <div className="ftr-links">
            {t.footer.links.map(([h, l]) => <a key={l} href={h}>{l}</a>)}
          </div>
        </div>
        <div className="ftr-bot">
          <span className="ftr-fine">© nymo</span>
          <span className="ftr-fine">{t.footer.version}</span>
        </div>
      </div>
    </footer>
  );
}

window.Hero = Hero;
window.Problem = Problem;
window.How = How;
window.Employers = Employers;
window.Candidates = Candidates;
window.Pilot = Pilot;
window.Waitlist = Waitlist;
window.Footer = Footer;