// MEGALIS — Contact form with validation + success state, plus dual studio info

const SOCIAL_LINKS = {
  Instagram: "https://www.instagram.com/megalisvfx/",
  LinkedIn:  "https://www.linkedin.com/company/megalisvfx/",
  Vimeo:     "https://vimeo.com/megalis",
};

const contactStyles = `
  .contact-section { border-bottom: 1px solid var(--line); }

  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 1px;
    background: var(--line);
    border-bottom: 1px solid var(--line);
  }
  .contact-grid > * { background: var(--bg); padding: 40px var(--pad); }

  .studio-info { display: flex; flex-direction: column; gap: 32px; }
  .studio {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  .studio .city-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .studio .city {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(40px, 5vw, 72px);
    letter-spacing: -0.04em;
    line-height: 0.9;
  }
  body[data-lang="ja"] .studio .city {
    font-family: var(--font-jp);
    font-weight: 700;
    font-size: clamp(32px, 4vw, 56px);
    letter-spacing: -0.02em;
  }
  .studio .city-jp {
    font-family: var(--font-jp);
    font-size: 12px;
    color: var(--fg-3);
    letter-spacing: 0.2em;
    margin-top: 4px;
  }
  .studio .details {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.7;
    color: var(--fg-2);
    letter-spacing: 0.04em;
  }
  body[data-lang="ja"] .studio .details {
    font-family: var(--font-jp);
    letter-spacing: 0.02em;
    font-size: 13px;
  }
  .studio .details .label {
    color: var(--fg-3);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 10px;
    display: block;
    margin-top: 12px;
  }
  body[data-lang="ja"] .studio .details .label {
    font-family: var(--font-jp);
    letter-spacing: 0.1em;
    text-transform: none;
    font-size: 11px;
  }
  .studio .details .label:first-child { margin-top: 0; }

  /* Form */
  .form-block .form-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
  }
  .form-block h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 3vw, 48px);
    letter-spacing: -0.03em;
    margin: 0;
    line-height: 0.95;
  }
  body[data-lang="ja"] .form-block h3 {
    font-family: var(--font-jp);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 36px);
  }
  .form-block .step {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--fg-3);
    text-transform: uppercase;
  }
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 24px;
  }
  .field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
  }
  .field.full { grid-column: 1 / -1; }
  .field label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-3);
  }
  body[data-lang="ja"] .field label {
    font-family: var(--font-jp);
    letter-spacing: 0.06em;
    text-transform: none;
    font-size: 12px;
  }
  .field label .req { color: var(--accent); margin-left: 4px; }
  .field input, .field textarea, .field select {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 10px 0;
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--fg);
    transition: border-color 0.25s var(--easing);
    width: 100%;
    border-radius: 0;
    -webkit-appearance: none;
  }
  .field textarea { resize: vertical; min-height: 100px; }
  .field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    border-bottom-color: var(--accent);
  }
  .field.invalid input,
  .field.invalid textarea,
  .field.invalid select {
    border-bottom-color: oklch(60% 0.22 25);
  }
  .field .err {
    font-family: var(--font-mono);
    font-size: 10px;
    color: oklch(70% 0.22 25);
    letter-spacing: 0.1em;
  }
  body[data-lang="ja"] .field .err {
    font-family: var(--font-jp);
    letter-spacing: 0;
    font-size: 11px;
  }

  .form-foot {
    margin-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  .submit {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 18px 32px;
    background: var(--fg);
    color: var(--bg);
    transition: all 0.25s var(--easing);
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  body[data-lang="ja"] .submit {
    font-family: var(--font-jp);
    letter-spacing: 0.1em;
    text-transform: none;
    font-size: 13px;
  }
  .submit:hover { background: var(--accent); color: var(--accent-fg); }
  .submit[disabled] { opacity: 0.5; cursor: not-allowed; }
  .submit .arr { transition: transform 0.3s var(--easing); }
  .submit:hover .arr { transform: translateX(4px); }

  .form-success {
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  .form-success .check {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-fg);
    display: grid;
    place-items: center;
    font-size: 26px;
    font-weight: 600;
  }
  .form-success h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 3vw, 44px);
    letter-spacing: -0.03em;
    margin: 0;
  }
  body[data-lang="ja"] .form-success h4 {
    font-family: var(--font-jp);
    font-size: clamp(22px, 2.4vw, 34px);
  }

  @media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
  }
`;

function Contact() {
  const t = window.useI18n('contact');
  const [form, setForm] = React.useState({
    firstName: "", lastName: "", email: "", phone: "", purpose: "", message: "",
  });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const validate = () => {
    const e = {};
    if (!form.firstName.trim()) e.firstName = t.errs.required;
    if (!form.lastName.trim())  e.lastName  = t.errs.required;
    if (!form.email.trim())     e.email     = t.errs.required;
    else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) e.email = t.errs.email;
    if (!form.purpose)          e.purpose   = t.errs.purpose;
    if (!form.message.trim())   e.message   = t.errs.required;
    else if (form.message.trim().length < 12) e.message = t.errs.message;
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    const subject = `New inquiry — ${form.purpose} — ${form.firstName} ${form.lastName}`;
    const body =
      `Name: ${form.firstName} ${form.lastName}\n` +
      `Email: ${form.email}\n` +
      `Phone: ${form.phone}\n` +
      `Purpose: ${form.purpose}\n\n` +
      `${form.message}`;
    window.location.href =
      `mailto:contact@megalisvfx.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    setSent(true);
  };

  const fieldClass = (k) => `field ${errors[k] ? 'invalid' : ''}`;

  const renderAddress = (s) =>
    s.address.split('\n').map((line, idx, arr) => (
      <React.Fragment key={idx}>{line}{idx < arr.length - 1 ? <br/> : null}</React.Fragment>
    ));

  const successName = form.firstName || t.form.successFriend;
  const successBody = t.form.successBody.replace('{name}', successName);

  return (
    <>
      <style>{contactStyles}</style>
      <section className="contact-section" id="contact" data-screen-label="Contact">
        <header className="sec-head">
          <div>
            <div className="sec-num">{t.num}</div>
            <h2 className="sec-title">{t.title[0]}<br/>{t.title[1]}</h2>
          </div>
          <div className="sec-kana">{t.kana}</div>
        </header>

        <div className="contact-grid">
          <div className="studio-info">
            {t.studios.map((s, idx) => (
              <React.Fragment key={idx}>
                <div className="studio">
                  <div className="city-row">
                    <div className="city">{s.city}</div>
                    <div className="city-jp">{s.kana}</div>
                  </div>
                  <div className="details">
                    <span className="label">{t.labels.address}</span>
                    {renderAddress(s)}
                    <span className="label">{s.emailLabel}</span>
                    {s.email}
                  </div>
                </div>
                {idx < t.studios.length - 1 ? <div className="rule"></div> : null}
              </React.Fragment>
            ))}

            <div className="rule"></div>

            <div style={{display:"flex", gap:"16px", flexWrap:"wrap"}}>
              <span className="micro">{t.findUs}</span>
              {t.socials.map((s) => (
                <a key={s} className="micro" style={{color:"var(--fg)"}} href={SOCIAL_LINKS[s] || "#"} target="_blank" rel="noopener noreferrer">{s}</a>
              ))}
            </div>
          </div>

          <div className="form-block">
            {sent ? (
              <div className="form-success">
                <div className="check">✓</div>
                <h4>{t.form.successTitle}</h4>
                <p style={{color:"var(--fg-2)", margin: 0, maxWidth:"40ch"}}>
                  {successBody}
                </p>
                <button className="submit" onClick={() => { setSent(false); setForm({firstName:"",lastName:"",email:"",phone:"",purpose:"",message:""}); }}>
                  {t.form.again} <span className="arr">↻</span>
                </button>
              </div>
            ) : (
              <form onSubmit={submit} noValidate>
                <div className="form-head">
                  <h3>{t.form.title[0]}<br/>{t.form.title[1]}</h3>
                  <span className="step">{t.form.step}</span>
                </div>
                <div className="form-grid">
                  <div className={fieldClass('firstName')}>
                    <label>{t.form.firstName} <span className="req">*</span></label>
                    <input value={form.firstName} onChange={e => set('firstName', e.target.value)} />
                    {errors.firstName && <span className="err">{errors.firstName}</span>}
                  </div>
                  <div className={fieldClass('lastName')}>
                    <label>{t.form.lastName} <span className="req">*</span></label>
                    <input value={form.lastName} onChange={e => set('lastName', e.target.value)} />
                    {errors.lastName && <span className="err">{errors.lastName}</span>}
                  </div>
                  <div className={fieldClass('email')}>
                    <label>{t.form.email} <span className="req">*</span></label>
                    <input type="email" value={form.email} onChange={e => set('email', e.target.value)} />
                    {errors.email && <span className="err">{errors.email}</span>}
                  </div>
                  <div className={fieldClass('phone')}>
                    <label>{t.form.phone}</label>
                    <input value={form.phone} onChange={e => set('phone', e.target.value)} />
                  </div>
                  <div className={fieldClass('purpose') + ' full'}>
                    <label>{t.form.purpose} <span className="req">*</span></label>
                    <select value={form.purpose} onChange={e => set('purpose', e.target.value)}>
                      <option value="">{t.form.purposePlaceholder}</option>
                      {t.purposes.map(p => <option key={p} value={p}>{p}</option>)}
                    </select>
                    {errors.purpose && <span className="err">{errors.purpose}</span>}
                  </div>
                  <div className={fieldClass('message') + ' full'}>
                    <label>{t.form.message} <span className="req">*</span></label>
                    <textarea rows="4" value={form.message} onChange={e => set('message', e.target.value)} placeholder={t.form.messagePlaceholder}></textarea>
                    {errors.message && <span className="err">{errors.message}</span>}
                  </div>
                </div>
                <div className="form-foot">
                  <span className="micro">{t.form.reply}</span>
                  <button type="submit" className="submit">
                    {t.form.submit} <span className="arr">→</span>
                  </button>
                </div>
              </form>
            )}
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { Contact });