// ============================================
// Contact + Footer
// ============================================

function Contact() {
  const PC = window.PC;
  const [form, setForm] = React.useState({
    firstName: '', lastName: '', company: '', email: '', service: '', msg: '',
  });
  const [sent, setSent] = React.useState(false);

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

  return (
    <section className="section contact" id="contact">
      <div className="wrap contact__inner">

        <div className="contact__left">
          <span className="eyebrow reveal">08 — Begin</span>
          <h2 className="h-1 reveal" data-d="1">
            Let's <span className="serif it gold-text">build it</span>.
          </h2>
          <p className="lead reveal" data-d="2">
            Tell us about your project. We'll get back within 24 hours with a brief, a budget, and a shot list — no obligation.
          </p>

          <ul className="contact__details">
            <li className="reveal" data-d="3">
              <span className="contact__icon"><IMail size={16}/></span>
              <div>
                <span className="label">Email</span>
                <a href={`mailto:${PC.brand.email}`} className="contact__detail-v">{PC.brand.email}</a>
              </div>
            </li>
            <li className="reveal" data-d="4">
              <span className="contact__icon"><IPin size={16}/></span>
              <div>
                <span className="label">Location</span>
                <span className="contact__detail-v">{PC.brand.location} · Serving Global Builders</span>
              </div>
            </li>
            <li className="reveal" data-d="5">
              <span className="contact__icon"><IPhone size={16}/></span>
              <div>
                <span className="label">WhatsApp / Phone</span>
                <a href={`https://wa.me/${PC.brand.phone.replace(/[^0-9]/g,'')}`} target="_blank" rel="noreferrer" className="contact__detail-v">{PC.brand.phone}</a>
              </div>
            </li>
            <li className="reveal" data-d="6">
              <span className="contact__icon"><IClock size={16}/></span>
              <div>
                <span className="label">Response Time</span>
                <span className="contact__detail-v">{PC.brand.response}</span>
              </div>
            </li>
          </ul>

          <div className="contact__social reveal" data-d="7">
            <span className="label">Find us</span>
            <div className="contact__social-row">
              <a href={PC.social.linktree} target="_blank" rel="noreferrer" aria-label="Linktree"><ILink size={16}/></a>
              <a href={PC.social.linkedin} target="_blank" rel="noreferrer" aria-label="LinkedIn"><ILinkedin size={16}/></a>
              <a href={PC.social.instagram} target="_blank" rel="noreferrer" aria-label="Instagram"><IInstagram size={16}/></a>
            </div>
          </div>
        </div>

        <form className="contact__form reveal reveal--right" data-d="2"
              onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
          {sent ? (
            <div className="contact__ok">
              <span className="serif it gold-text" style={{fontSize: '36px'}}>Thank you.</span>
              <p className="body">Your project is in our inbox. You'll hear from {PC.brand.creator} within 24 hours.</p>
            </div>
          ) : (
            <>
              <div className="form-grid">
                <Field label="First name"
                       value={form.firstName} onChange={v => update('firstName', v)} required/>
                <Field label="Last name"
                       value={form.lastName} onChange={v => update('lastName', v)} required/>
              </div>
              <Field label="Company"
                     value={form.company} onChange={v => update('company', v)}/>
              <Field label="Email" type="email"
                     value={form.email} onChange={v => update('email', v)} required/>
              <SelectField label="Service of interest"
                           value={form.service} onChange={v => update('service', v)}
                           options={PC.serviceOptions}/>
              <Field label="Tell us about your project" multi
                     value={form.msg} onChange={v => update('msg', v)} required/>
              <button type="submit" className="btn btn--gold contact__submit">
                <span>Send Inquiry</span>
                <span className="btn__arrow"></span>
              </button>
              <p className="label contact__fineprint">We'll only use your details to respond to this inquiry.</p>
            </>
          )}
        </form>

      </div>
    </section>
  );
}

function Field({ label, value, onChange, type = 'text', required, multi }) {
  return (
    <label className="field">
      <span className="field__label label">{label}{required && <span className="field__req"> *</span>}</span>
      {multi ? (
        <textarea className="field__input field__input--multi"
                  value={value} onChange={e => onChange(e.target.value)}
                  required={required} rows={5}/>
      ) : (
        <input className="field__input"
               type={type} value={value}
               onChange={e => onChange(e.target.value)} required={required}/>
      )}
    </label>
  );
}

function SelectField({ label, value, onChange, options }) {
  return (
    <label className="field">
      <span className="field__label label">{label}</span>
      <div className="select">
        <select className="field__input"
                value={value} onChange={e => onChange(e.target.value)}>
          <option value="">Choose a service…</option>
          {options.map(o => <option key={o} value={o}>{o}</option>)}
        </select>
        <span className="select__chev"><IChevDown size={14}/></span>
      </div>
    </label>
  );
}

function Footer() {
  const PC = window.PC;
  const navLinks = [
    { href: "#services", label: "Services" },
    { href: "#work",     label: "Work" },
    { href: "#process",  label: "Process" },
    { href: "#tools",    label: "Tools" },
    { href: "#pricing",  label: "Pricing" },
    { href: "#contact",  label: "Contact" },
  ];
  return (
    <footer className="footer">
      <div className="wrap">

        <div className="footer__hero">
          <h2 className="h-display footer__big">
            Let's make<br/>
            <span className="serif it gold-text">something cinematic.</span>
          </h2>
          <a href="#contact" className="btn btn--gold footer__cta">
            <span>Start a Project</span>
            <span className="btn__arrow"></span>
          </a>
        </div>

        <div className="divider" style={{margin: '80px 0 48px'}}></div>

        <div className="footer__cols">
          <div className="footer__brand">
            <span className="serif footer__name">Poly<span className="gold-text it">Craft</span> Visuals</span>
            <p className="body" style={{marginTop: '16px', maxWidth: '32ch'}}>
              Cinematic architectural visualization for production homebuilders. Built by {PC.brand.creator} in {PC.brand.location}.
            </p>
            <div className="contact__social-row" style={{marginTop: '24px'}}>
              <a href={PC.social.linktree} target="_blank" rel="noreferrer" aria-label="Linktree"><ILink size={16}/></a>
              <a href={PC.social.linkedin} target="_blank" rel="noreferrer" aria-label="LinkedIn"><ILinkedin size={16}/></a>
              <a href={PC.social.instagram} target="_blank" rel="noreferrer" aria-label="Instagram"><IInstagram size={16}/></a>
            </div>
          </div>

          <div className="footer__nav">
            <span className="label footer__h">Site</span>
            <ul>
              {navLinks.map(l => (
                <li key={l.href}><a href={l.href}>{l.label}</a></li>
              ))}
            </ul>
          </div>

          <div className="footer__nav">
            <span className="label footer__h">Studio Tools</span>
            <ul>
              {PC.tools.map(t => (
                <li key={t.id}>
                  <a href={t.gumroadUrl || PC.social.linktree} target="_blank" rel="noreferrer">{t.name}</a>
                </li>
              ))}
            </ul>
          </div>

          <div className="footer__nav">
            <span className="label footer__h">Contact</span>
            <ul>
              <li><a href={`mailto:${PC.brand.email}`}>{PC.brand.email}</a></li>
              <li><a href={`https://wa.me/${PC.brand.phone.replace(/[^0-9]/g,'')}`} target="_blank" rel="noreferrer">{PC.brand.phone}</a></li>
              <li className="muted">{PC.brand.location}</li>
              <li className="muted">Response within 24h</li>
            </ul>
          </div>
        </div>

        <div className="footer__bottom">
          <span className="label">© 2026 PolyCraft Visuals — All rights reserved.</span>
          <span className="label muted">Built by {PC.brand.creator} · India → World</span>
        </div>

      </div>
    </footer>
  );
}

window.Contact = Contact;
window.Footer = Footer;