// Contact page

function ContactHero() {
  const h = window.c('site', {});
  return (
    <section className="section" style={{ paddingTop: 'clamp(56px, 7vw, 112px)', paddingBottom: 'clamp(32px, 4vw, 64px)' }}>
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 24 }}>Contact</div>
        <h1 className="display" style={{ fontSize: 'clamp(56px, 9vw, 160px)', maxWidth: '12ch' }}>
          Let's<br/>
          <span style={{ color: 'var(--accent)' }}>build</span> something.
        </h1>
        <div className="grid-12" style={{ marginTop: 64 }}>
          <p style={{ gridColumn: 'span 6', fontSize: 'clamp(17px, 1.6vw, 22px)', color: 'var(--muted)', lineHeight: 1.4 }} className="contact-hero-sub">
            Whether you're scoping a single home or a high-rise development, our engineering team will work with your drawings to deliver a panel layout and quote within 7 days.
          </p>
        </div>
      </div>
    </section>
  );
}

function ContactForm() {
  const [form, setForm] = React.useState({
    inquiry: 'project',
    role: '',
    name: '',
    email: '',
    phone: '',
    company: '',
    project_type: '',
    size: '',
    timing: '',
    message: '',
  });
  const [errors, setErrors] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);

  const update = (k, v) => {
    setForm((f) => ({ ...f, [k]: v }));
    if (errors[k]) setErrors((e) => ({ ...e, [k]: null }));
  };

  const submit = (e) => {
    e.preventDefault();
    const next = {};
    if (!form.name) next.name = 'Required';
    if (!form.email || !/\S+@\S+\.\S+/.test(form.email)) next.email = 'Valid email required';
    if (!form.message) next.message = 'Tell us about your project';
    setErrors(next);
    if (Object.keys(next).length === 0) {
      setSubmitted(true);
    }
  };

  const inquiries = [
    { id: 'project', label: 'Project inquiry', body: 'I have a building project and want a quote.' },
    { id: 'partnership', label: 'Partnership', body: 'Architect, developer, or contractor partnerships.' },
    { id: 'general', label: 'General', body: 'Press, careers, or anything else.' },
  ];

  if (submitted) {
    return (
      <div className="page-fade" style={{ padding: 'clamp(56px, 8vw, 128px) 0', textAlign: 'center' }}>
        <HouseSymbol size={64} color="var(--accent)" style={{ margin: '0 auto 32px' }} />
        <h2 style={{ fontSize: 'clamp(36px, 5vw, 64px)' }}>Thanks — message received.</h2>
        <p style={{ marginTop: 24, color: 'var(--muted)', fontSize: 18, maxWidth: 520, margin: '24px auto 0' }}>
          Our team will review your project details and respond within 1–2 business days. For urgent matters, WhatsApp us at +62 817 7000 8588.
        </p>
        <button
          className="btn btn-ghost"
          style={{ marginTop: 40 }}
          onClick={() => { setSubmitted(false); setForm({ inquiry: 'project', role: '', name: '', email: '', phone: '', company: '', project_type: '', size: '', timing: '', message: '' }); }}
        >
          Send another
        </button>
      </div>
    );
  }

  return (
    <form onSubmit={submit} className="page-fade" style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>
      {/* Inquiry type */}
      <div>
        <div className="eyebrow" style={{ marginBottom: 16 }}>01 · What brings you here?</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          {inquiries.map((it) => (
            <button
              key={it.id}
              type="button"
              onClick={() => update('inquiry', it.id)}
              style={{
                textAlign: 'left',
                padding: 20,
                background: form.inquiry === it.id ? 'var(--fg)' : 'transparent',
                color: form.inquiry === it.id ? 'var(--bg)' : 'var(--fg)',
                border: `1px solid ${form.inquiry === it.id ? 'var(--fg)' : 'var(--line)'}`,
                transition: 'all 0.2s ease',
              }}
            >
              <div style={{ fontWeight: 500, fontSize: 18, letterSpacing: '-0.02em' }}>{it.label}</div>
              <div style={{ fontSize: 13, opacity: 0.7, marginTop: 6 }}>{it.body}</div>
            </button>
          ))}
        </div>
      </div>

      {/* Contact info */}
      <div>
        <div className="eyebrow" style={{ marginBottom: 24 }}>02 · About you</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          <FormField label="Full name" value={form.name} onChange={(v) => update('name', v)} error={errors.name} required />
          <FormField label="Email" type="email" value={form.email} onChange={(v) => update('email', v)} error={errors.email} required />
          <FormField label="Phone / WhatsApp" value={form.phone} onChange={(v) => update('phone', v)} />
          <FormField label="Company" value={form.company} onChange={(v) => update('company', v)} />
          <FormSelect
            label="I'm a..."
            value={form.role}
            onChange={(v) => update('role', v)}
            options={[
              { value: '', label: 'Select role' },
              { value: 'developer', label: 'Developer' },
              { value: 'contractor', label: 'Contractor' },
              { value: 'architect', label: 'Architect' },
              { value: 'homeowner', label: 'Homeowner' },
              { value: 'other', label: 'Other' },
            ]}
          />
          <FormSelect
            label="Project timing"
            value={form.timing}
            onChange={(v) => update('timing', v)}
            options={[
              { value: '', label: 'Select timing' },
              { value: '0-3', label: 'Starting in 0–3 months' },
              { value: '3-6', label: '3–6 months' },
              { value: '6-12', label: '6–12 months' },
              { value: 'exploring', label: 'Just exploring' },
            ]}
          />
        </div>
      </div>

      {form.inquiry === 'project' && (
        <div className="page-fade">
          <div className="eyebrow" style={{ marginBottom: 24 }}>03 · About your build</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
            <FormSelect
              label="Project type"
              value={form.project_type}
              onChange={(v) => update('project_type', v)}
              options={[
                { value: '', label: 'Select type' },
                { value: 'landed', label: 'Landed residential' },
                { value: 'low-rise', label: 'Low-rise (≤4 floors)' },
                { value: 'high-rise', label: 'High-rise (5+ floors)' },
                { value: 'commercial', label: 'Commercial' },
              ]}
            />
            <FormField label="Approx. size (m²)" value={form.size} onChange={(v) => update('size', v)} />
          </div>
        </div>
      )}

      <div>
        <div className="eyebrow" style={{ marginBottom: 24 }}>0{form.inquiry === 'project' ? '4' : '3'} · Your message</div>
        <FormField
          label="Tell us about your project, partnership idea, or question"
          value={form.message}
          onChange={(v) => update('message', v)}
          error={errors.message}
          textarea
          required
        />
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap', paddingTop: 16, borderTop: '1px solid var(--line)' }}>
        <div style={{ color: 'var(--muted)', fontSize: 13, maxWidth: 480 }}>
          By submitting, you agree we can contact you about your inquiry. We won't sell your data. View our <a href="#" style={{ textDecoration: 'underline' }}>privacy notice</a>.
        </div>
        <button type="submit" className="btn btn-primary" style={{ fontSize: 16, padding: '18px 32px' }}>
          Send message <span className="btn-arrow">→</span>
        </button>
      </div>
    </form>
  );
}

function FormField({ label, value, onChange, type = 'text', error, required, textarea }) {
  return (
    <div className="field" style={{ position: 'relative' }}>
      <label>
        {label}{required && <span style={{ color: 'var(--accent)', marginLeft: 4 }}>*</span>}
      </label>
      {textarea ? (
        <textarea value={value} onChange={(e) => onChange(e.target.value)} style={{ borderBottomColor: error ? '#d00' : '' }} />
      ) : (
        <input type={type} value={value} onChange={(e) => onChange(e.target.value)} style={{ borderBottomColor: error ? '#d00' : '' }} />
      )}
      {error && <span style={{ color: '#d00', fontSize: 12 }}>{error}</span>}
    </div>
  );
}

function FormSelect({ label, value, onChange, options }) {
  return (
    <div className="field">
      <label>{label}</label>
      <select value={value} onChange={(e) => onChange(e.target.value)}>
        {options.map((o) => (
          <option key={o.value} value={o.value}>{o.label}</option>
        ))}
      </select>
    </div>
  );
}

function ContactInfo() {
  const c = window.c('contact', {});
  const office = c.office || {};
  const factory = c.factory || {};
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>
      <div>
        <div className="eyebrow" style={{ marginBottom: 12 }}>Direct lines</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          <a href={`mailto:${c.email}`} className="link-arrow" style={{ fontSize: 22, fontWeight: 500, alignSelf: 'flex-start' }}>{c.email} →</a>
          <span style={{ marginTop: 12, fontSize: 17 }}>{c.phone}</span>
          <span style={{ fontSize: 17 }}>WA · {c.whatsapp}</span>
        </div>
      </div>

      <div style={{ borderTop: '1px solid var(--line)', paddingTop: 32 }}>
        <div className="eyebrow" style={{ marginBottom: 12 }}>Office</div>
        <p style={{ fontSize: 16, lineHeight: 1.5 }}>
          {office.name}<br/>
          {(office.address_lines || []).map((l, i) => (
            <React.Fragment key={i}>{l}<br/></React.Fragment>
          ))}
        </p>
      </div>

      <div style={{ borderTop: '1px solid var(--line)', paddingTop: 32 }}>
        <div className="eyebrow" style={{ marginBottom: 12 }}>Factory</div>
        <p style={{ fontSize: 16, lineHeight: 1.5 }}>
          {(factory.address_lines || []).map((l, i) => (
            <React.Fragment key={i}>{l}<br/></React.Fragment>
          ))}
        </p>
      </div>

      <div style={{ borderTop: '1px solid var(--line)', paddingTop: 32 }}>
        <div className="eyebrow" style={{ marginBottom: 12 }}>Response time</div>
        <p style={{ fontSize: 16, lineHeight: 1.5, color: 'var(--muted)' }}>
          {c.response_time}
        </p>
      </div>
    </div>
  );
}

function MapPlaceholder() {
  return (
    <section className="section" style={{ paddingTop: 'clamp(48px, 6vw, 96px)', paddingBottom: 0 }}>
      <div className="container">
        <div className="grid-12" style={{ alignItems: 'end', marginBottom: 32 }}>
          <div style={{ gridColumn: 'span 8' }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Visit us</div>
            <h2>Two locations.<br/>One panel system.</h2>
          </div>
        </div>
        <div className="grid-12 locations-grid">
          <div style={{ gridColumn: 'span 6' }} className="location-cell">
            <div style={{ aspectRatio: '4/3', overflow: 'hidden', background: 'var(--cobalt)' }}>
              <img
                src="assets/images/office.jpg"
                alt="Myfab office in South Jakarta"
                style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
              />
            </div>
            <div style={{ marginTop: 16, fontSize: 14 }}>
              <strong>Office</strong> · Kebayoran Lama, South Jakarta
            </div>
          </div>
          <div style={{ gridColumn: 'span 6' }} className="location-cell">
            <div style={{ aspectRatio: '4/3', overflow: 'hidden', background: 'var(--surface)' }}>
              <img
                src="assets/images/factory.jpg"
                alt="Myfab factory in Cikarang"
                style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
              />
            </div>
            <div style={{ marginTop: 16, fontSize: 14 }}>
              <strong>Factory</strong> · Delta Silicon 5, Lippo Cikarang
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactPage({ setRoute, tweaks }) {
  return (
    <div className={`page page-fade house-overlay--${tweaks.houseOverlay}`}>
      <ContactHero />
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="grid-12 contact-layout" style={{ alignItems: 'start', columnGap: 'clamp(32px, 5vw, 96px)' }}>
            <div style={{ gridColumn: 'span 8' }} className="contact-form-col">
              <ContactForm />
            </div>
            <div style={{ gridColumn: 'span 4' }} className="contact-info-col">
              <ContactInfo />
            </div>
          </div>
        </div>
      </section>
      <MapPlaceholder />
    </div>
  );
}

Object.assign(window, { ContactPage });