const { Button: FBtn, Icon: FIcon, SectionLabel: FLabel, Input, Select, Checkbox, Radio } = window.BeTechnikDesignSystem_72fdfa;

const INDUSTRIES = ['Automotive', 'Aerospace', 'Electronics', 'Industrial equipment', 'Consumer products', 'Food & beverage', 'Medical devices', 'Packaging', 'Metal fabrication', 'Plastics', 'Other'];
const PTYPES = ['Custom machinery', 'Industrial automation', 'Robotics integration', 'Production optimization', 'Process improvement', 'Retrofit & modernization', 'Special devices & tooling', 'Gauges & calibration', 'Engineering support', 'Not sure yet'];
const PCHAL = ['Bottleneck', 'Downtime', 'Manual operations', 'Quality variation', 'Material flow', 'Obsolete equipment', 'Ergonomics', 'New product / variant', 'Other'];
const TIMELINE = ['Immediate (0–3 months)', '3–6 months', '6–12 months', 'More than 12 months', 'Exploring options'];
const HEARD = ['Search engine', 'LinkedIn', 'Instagram', 'Referral', 'Trade event', 'Existing customer', 'Other'];
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

function useForm(init, required) {
  const [v, setV] = React.useState(init);
  const [err, setErr] = React.useState({});
  const [state, setState] = React.useState('idle');
  const set = k => x => { setV(p => ({ ...p, [k]: x && x.target ? x.target.value : x })); setErr(e => ({ ...e, [k]: undefined })); };
  const bind = k => ({ value: v[k] || '', onChange: set(k), error: err[k], name: k, id: 'f-' + k });
  const [sendErr, setSendErr] = React.useState('');
  const submit = async (e, ref, form, files) => {
    e.preventDefault();
    setSendErr('');
    if (v._hp) return;
    const n = {};
    required.forEach(k => { const x = v[k]; if (!x || (Array.isArray(x) && !x.length)) n[k] = 'Required'; });
    if (v.email && !EMAIL_RE.test(v.email)) n.email = 'Enter a valid email address';
    setErr(n);
    if (Object.keys(n).length) { const f = document.getElementById('f-' + Object.keys(n)[0]); f && f.focus && f.focus(); return; }
    setState('sending');
    const fd = new FormData();
    fd.append('_form', form);
    fd.append('_page', location.href);
    Object.entries(v).forEach(([k, x]) => { if (Array.isArray(x)) x.forEach(y => fd.append(k + '[]', y)); else if (x !== undefined && x !== null && x !== '') fd.append(k, x === true ? 'yes' : x); });
    (files || []).forEach(file => fd.append('files[]', file, file.name));
    try {
      const r = await fetch('send.php', { method: 'POST', body: fd });
      const j = await r.json().catch(() => ({}));
      if (!r.ok || !j.ok) throw new Error(j.error || 'The message could not be sent.');
      setState('done');
      setTimeout(() => ref && ref.current && window.scrollTo({ top: ref.current.getBoundingClientRect().top + scrollY - 110, behavior: 'smooth' }), 50);
    } catch (x) {
      setState('idle');
      setSendErr((x && x.message ? x.message + ' ' : '') + 'If the problem continues, email us at aline@betechnikusa.com.');
    }
  };
  return { v, set, bind, err, state, setState, submit, sendErr, reset: () => { setV(init); setState('idle'); setSendErr(''); } };
}

function Chips({ options, value = [], onChange, multi = true, id }) {
  const t = o => onChange(multi ? (value.includes(o) ? value.filter(x => x !== o) : [...value, o]) : [o]);
  return <div className="chips" id={id} tabIndex={-1}>{options.map(o => <button type="button" key={o} className="chip" aria-pressed={value.includes(o)} onClick={() => t(o)}>{o}</button>)}</div>;
}

function RadioRow({ label, name, options, value, onChange, error }) {
  return <div role="radiogroup" aria-label={label} id={'f-' + name} tabIndex={-1}><span className="flabel">{label}</span><div className="opts">{options.map(o => <Radio key={o} name={name} value={o} label={o} checked={value === o} onChange={onChange} />)}</div>{error && <div className="err">{error}</div>}</div>;
}

function FileDrop({ files, setFiles, label = 'Drawings, photos or technical documents', accept = '.pdf,.jpg,.jpeg,.png,.dwg,.dxf,.step,.stp,.zip' }) {
  const ref = React.useRef(); const [over, setOver] = React.useState(false);
  const add = list => setFiles([...files, ...Array.from(list).filter(f => f.size <= 10e6)].slice(0, 10));
  return <div>
    <span className="flabel">{label} <span className="muted" style={{ letterSpacing: '.06em' }}>(optional)</span></span>
    <div className={'drop' + (over ? ' over' : '')} role="button" tabIndex={0} onClick={() => ref.current.click()} onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && ref.current.click()}
      onDragOver={e => { e.preventDefault(); setOver(true); }} onDragLeave={() => setOver(false)} onDrop={e => { e.preventDefault(); setOver(false); add(e.dataTransfer.files); }}>
      <FIcon name="upload" size={22} color="var(--be-blue-500)" />
      <span style={{ font: '600 15px/1.3 var(--font-sans)', color: 'var(--text-strong)' }}>Drop files here or browse</span>
      <span className="sm muted">PDF, JPG, PNG, DWG, DXF, STEP or ZIP · up to 10 MB each · 20 MB total</span>
      <input ref={ref} type="file" multiple accept={accept} hidden onChange={e => add(e.target.files)} />
    </div>
    {files.length > 0 && <div className="files">{files.map((f, i) => <div key={i}><span>{f.name} <span className="muted">· {(f.size / 1e6).toFixed(1)} MB</span></span><button type="button" aria-label={'Remove ' + f.name} onClick={() => setFiles(files.filter((_, j) => j !== i))}>×</button></div>)}</div>}
  </div>;
}

function Consent({ f, children }) {
  return <div id="f-consent" tabIndex={-1}>
    <Checkbox checked={!!f.v.consent} onChange={f.set('consent')} label={children || <span className="sm">I agree that Be Technik may use the information I provide to respond to my request, as described in the <a href={href('privacy')}>Privacy Policy</a>.</span>} />
    {f.err.consent && <div className="err">Please confirm to continue</div>}
  </div>;
}

function Security() {
  return <div className="row" style={{ gap: 10 }}><FIcon name="shield-check" size={16} color="var(--text-muted)" /><span className="sm muted">Protected by spam filtering. Information and files are sent over an encrypted connection.</span></div>;
}

function Done({ title, name, method, time, onReset, children }) {
  return <div className="done" role="status" aria-live="polite">
    <FIcon name="circle-check" size={32} color="var(--be-blue-500)" />
    <h2 className="h2" style={{ fontSize: 30 }}>{title}</h2>
    <p className="p">Thank you{name ? ', ' + name.split(' ')[0] : ''}. Your information has been received by the Be Technik team.{method ? ` We will reach you by ${method.toLowerCase()}${time ? ' in the ' + time.toLowerCase() : ''}, usually within one business day.` : ''}</p>
    {children}
    <div className="row"><FBtn variant="secondary" onClick={onReset}>Submit Another Request</FBtn><FBtn variant="ghost" iconRight={<Arrow />} onClick={() => go('solutions')} style={{ color: 'var(--text-accent)' }}>Explore Solutions</FBtn></div>
  </div>;
}

function DiscoveryForm() {
  const ref = React.useRef();
  const [files, setFiles] = React.useState([]);
  const f = useForm({ ptype: [], pchal: [] }, ['name', 'company', 'email', 'country', 'ptype', 'desc', 'method', 'consent']);
  if (f.state === 'done') return <div ref={ref}><Done title="Your project details are with our engineers." name={f.v.name} method={f.v.method} time={f.v.time} onReset={() => { f.reset(); setFiles([]); }} /></div>;
  return <form ref={ref} onSubmit={e => f.submit(e, ref, 'discovery', files)} noValidate aria-label="Project discovery form">
    <input className="hp" tabIndex={-1} autoComplete="off" aria-hidden="true" value={f.v._hp || ''} onChange={f.set('_hp')} />
    <fieldset className="fset"><legend><span className="eyebrow-num">01</span>About You</legend>
      <div className="fgrid">
        <Input label="Full Name *" autoComplete="name" {...f.bind('name')} />
        <Input label="Company *" autoComplete="organization" {...f.bind('company')} />
        <Input label="Job Title" autoComplete="organization-title" {...f.bind('title')} />
        <Input label="Email *" type="email" autoComplete="email" {...f.bind('email')} />
        <Input label="Phone" type="tel" autoComplete="tel" {...f.bind('phone')} />
        <Input label="Country *" autoComplete="country-name" {...f.bind('country')} />
        <Select label="Industry" placeholder="Select industry" options={INDUSTRIES} {...f.bind('industry')} />
        <Input label="Company Website" type="url" placeholder="https://" {...f.bind('web')} />
      </div>
    </fieldset>
    <fieldset className="fset"><legend><span className="eyebrow-num">02</span>Your Project</legend>
      <div><span className="flabel">Project Type * <span className="muted" style={{ letterSpacing: '.06em' }}>(select all that apply)</span></span><Chips id="f-ptype" options={PTYPES} value={f.v.ptype} onChange={f.set('ptype')} />{f.err.ptype && <div className="err">Select at least one</div>}</div>
      <div><span className="flabel">Current Production Challenge</span><Chips options={PCHAL} value={f.v.pchal} onChange={f.set('pchal')} /></div>
      <Input label="Project Description *" multiline rows={4} placeholder="What needs to be solved, and where in the process?" {...f.bind('desc')} />
      <div className="fgrid">
        <Input label="Current Process" multiline rows={3} placeholder="How is it done today?" {...f.bind('process')} />
        <Input label="Desired Objective" multiline rows={3} placeholder="What should change?" {...f.bind('objective')} />
      </div>
      <Select label="Estimated Project Timeline" placeholder="Select timeline" options={TIMELINE} {...f.bind('timeline')} />
      <FileDrop files={files} setFiles={setFiles} />
    </fieldset>
    <fieldset className="fset"><legend><span className="eyebrow-num">03</span>How Should We Reach You?</legend>
      <div className="fgrid">
        <RadioRow label="Preferred Contact Time" name="time" options={['Morning', 'Afternoon']} value={f.v.time} onChange={f.set('time')} />
        <RadioRow label="Preferred Contact Method *" name="method" options={['Phone', 'Email', 'Message']} value={f.v.method} onChange={f.set('method')} error={f.err.method} />
      </div>
      <Consent f={f} />
      <Security />
      {f.sendErr && <div className="err" role="alert" style={{ fontSize: 14 }}>{f.sendErr}</div>}
      <div><FBtn type="submit" size="lg" iconRight={f.state === 'sending' ? null : <Arrow />} disabled={f.state === 'sending'}>{f.state === 'sending' ? 'Sending…' : 'Discuss Your Project'}</FBtn></div>
    </fieldset>
  </form>;
}

function QuoteForm() {
  const ref = React.useRef();
  const f = useForm({}, ['name', 'company', 'email', 'phone', 'country', 'web', 'industry', 'heard', 'desc', 'time', 'method', 'consent']);
  if (f.state === 'done') return <div ref={ref}><Done title="Your quote request has been received." name={f.v.name} method={f.v.method} time={f.v.time} onReset={f.reset}><p className="sm muted">For complex engineering projects, we may first schedule a short project discussion to define scope before preparing a formal quotation.</p></Done></div>;
  return <form ref={ref} onSubmit={e => f.submit(e, ref, 'quote')} noValidate aria-label="Request a quote form">
    <input className="hp" tabIndex={-1} autoComplete="off" aria-hidden="true" value={f.v._hp || ''} onChange={f.set('_hp')} />
    <fieldset className="fset"><legend><span className="eyebrow-num">01</span>Company &amp; Contact</legend>
      <div className="fgrid">
        <Input label="Name *" autoComplete="name" {...f.bind('name')} />
        <Input label="Company *" autoComplete="organization" {...f.bind('company')} />
        <Input label="Email *" type="email" autoComplete="email" {...f.bind('email')} />
        <Input label="Phone *" type="tel" autoComplete="tel" {...f.bind('phone')} />
        <Input label="Country *" autoComplete="country-name" {...f.bind('country')} />
        <Input label="Company Website *" type="url" placeholder="https://" {...f.bind('web')} />
        <Select label="Industry *" placeholder="Select industry" options={INDUSTRIES} {...f.bind('industry')} />
        <Select label="How did you hear about us? *" placeholder="Select an option" options={HEARD} {...f.bind('heard')} />
      </div>
    </fieldset>
    <fieldset className="fset"><legend><span className="eyebrow-num">02</span>Your Request</legend>
      <Input label="Brief description of your request *" multiline rows={5} placeholder="Equipment, process, part, quantities or any requirement we should know" {...f.bind('desc')} />
      <div className="fgrid">
        <RadioRow label="Preferred Contact Time *" name="time" options={['Morning', 'Afternoon']} value={f.v.time} onChange={f.set('time')} error={f.err.time} />
        <RadioRow label="Preferred Contact Method *" name="method" options={['Phone', 'Email', 'Message']} value={f.v.method} onChange={f.set('method')} error={f.err.method} />
      </div>
      <Consent f={f} />
      <Security />
      {f.sendErr && <div className="err" role="alert" style={{ fontSize: 14 }}>{f.sendErr}</div>}
      <div><FBtn type="submit" size="lg" iconRight={f.state === 'sending' ? null : <Arrow />} disabled={f.state === 'sending'}>{f.state === 'sending' ? 'Sending…' : 'Request a Quote'}</FBtn></div>
    </fieldset>
  </form>;
}

function ApplyForm() {
  const ref = React.useRef();
  const [files, setFiles] = React.useState([]);
  const f = useForm({}, ['name', 'email', 'area', 'consent']);
  if (f.state === 'done') return <div ref={ref}><Done title="Your application has been received." name={f.v.name} onReset={() => { f.reset(); setFiles([]); }} /></div>;
  return <form ref={ref} onSubmit={e => { if (!files.length) { e.preventDefault(); return alert('Please attach your resume.'); } f.submit(e, ref, 'apply', files); }} noValidate aria-label="Job application form">
    <input className="hp" tabIndex={-1} autoComplete="off" aria-hidden="true" value={f.v._hp || ''} onChange={f.set('_hp')} />
    <fieldset className="fset">
      <div className="fgrid">
        <Input label="Full Name *" autoComplete="name" {...f.bind('name')} />
        <Input label="Email *" type="email" autoComplete="email" {...f.bind('email')} />
        <Input label="Phone" type="tel" autoComplete="tel" {...f.bind('phone')} />
        <Input label="LinkedIn Profile" type="url" placeholder="https://" {...f.bind('li')} />
        <Select label="Area of Interest *" placeholder="Select area" options={['Mechanical engineering', 'Electrical engineering', 'Automation & controls', 'Robotics', 'Manufacturing engineering', 'Assembly & technical', 'Internship / early career', 'Other']} {...f.bind('area')} />
        <Input label="Location" autoComplete="address-level2" {...f.bind('loc')} />
      </div>
      <FileDrop files={files} setFiles={setFiles} label="Resume *" accept=".pdf,.doc,.docx" />
      <Input label="Message" multiline rows={4} {...f.bind('msg')} />
      <Consent f={f}><span className="sm">I agree that Be Technik may store and review my application for recruiting purposes, as described in the <a href={href('privacy')}>Privacy Policy</a>.</span></Consent>
      {f.sendErr && <div className="err" role="alert" style={{ fontSize: 14 }}>{f.sendErr}</div>}
      <div><FBtn type="submit" size="lg" iconRight={<Arrow />} disabled={f.state === 'sending'}>{f.state === 'sending' ? 'Sending…' : 'Submit Application'}</FBtn></div>
    </fieldset>
  </form>;
}

function ContactAside() {
  return <aside className="aside" aria-label="Contact information">
    <div><span className="flabel" style={{ margin: 0 }}>Phone</span><a href={'tel:' + CONTACT.tel}>{CONTACT.phone}</a></div>
    <div><span className="flabel" style={{ margin: 0 }}>Email</span><a href={'mailto:' + CONTACT.email}>{CONTACT.email}</a></div>
    <div><span className="flabel" style={{ margin: 0 }}>Address</span><span className="sm" style={{ color: 'var(--ink-100)' }}>{CONTACT.company}<br />{CONTACT.addr1}<br />{CONTACT.addr2}<br />{CONTACT.country}</span></div>
    <div><span className="flabel" style={{ margin: 0 }}>Follow</span><div className="ftr-soc" style={{ marginTop: 6 }}><a href={CONTACT.li} target="_blank" rel="noopener" aria-label="LinkedIn"><FIcon name="linkedin" size={18} /></a><a href={CONTACT.ig} target="_blank" rel="noopener" aria-label="Instagram"><FIcon name="instagram" size={18} /></a></div></div>
  </aside>;
}

function ConnectPage() {
  useReveal();
  return <>
    <PageHero crumbs={[[null, 'Connect With Us']]} label="Connect With Us" title="Let's begin the conversation about your goals."
      lead="Tell us about your production challenge. An engineer will review it before we reply." />
    <section className="sec light theme-light" style={{ paddingTop: 'clamp(56px,6vw,96px)' }}>
      <div className="wrap formlay"><DiscoveryForm /><ContactAside /></div>
    </section>
  </>;
}

function QuotePage() {
  useReveal();
  return <>
    <PageHero crumbs={[[null, 'Request a Quote']]} label="Request a Quote" title="Request a Quote"
      lead="Complex engineering projects may start with a short project discussion before a formal quotation." />
    <section className="sec light theme-light" style={{ paddingTop: 'clamp(56px,6vw,96px)' }}>
      <div className="wrap formlay">
        <div className="stack" style={{ gap: 40 }}>
          <div className="notice"><FIcon name="messages-square" size={24} color="var(--be-blue-700)" /><div className="stack-s"><h3 className="h3" style={{ fontSize: 18 }}>New or complex project?</h3><p className="sm">Share drawings, photos and documents through the project discovery form.</p><div><FBtn variant="secondary" size="sm" iconRight={<Arrow />} onClick={() => go('connect-with-us')}>Discuss Your Project</FBtn></div></div></div>
          <QuoteForm />
        </div>
        <ContactAside />
      </div>
    </section>
  </>;
}

Object.assign(window, { ConnectPage, QuotePage, ApplyForm });