/* global React */
const { useState: useStateF } = React;

// ============================================================
// FAQ — accordion, one row open at a time
// ============================================================
function FAQ({ t }) {
  const [open, setOpen] = useStateF(0);
  return (
    <section id="faq" style={faqStyles.root}>
      <div style={faqStyles.inner}>
        <div style={faqStyles.head}>
          <div style={faqStyles.eyebrow}>{t.faq.eyebrow}</div>
          <h2 style={faqStyles.h2}>{t.faq.title}</h2>
        </div>
        <div style={faqStyles.list}>
          {t.faq.items.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ ...faqStyles.row, borderTop: i === 0 ? '1px solid var(--border)' : undefined }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={faqStyles.q}
                  aria-expanded={isOpen}
                >
                  <span style={faqStyles.qNum}>{String(i + 1).padStart(2, '0')}</span>
                  <span style={faqStyles.qText}>{item.q}</span>
                  <span style={{
                    ...faqStyles.plus,
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                  }}>+</span>
                </button>
                <div style={{
                  ...faqStyles.aWrap,
                  maxHeight: isOpen ? 300 : 0,
                  opacity: isOpen ? 1 : 0,
                }}>
                  <p style={faqStyles.a}>{item.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

const faqStyles = {
  root: { padding: '120px 40px' },
  inner: { maxWidth: 1080, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64 },
  head: { display: 'flex', flexDirection: 'column', gap: 14, position: 'sticky', top: 100, alignSelf: 'start' },
  eyebrow: { fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-muted)' },
  h2: {
    fontFamily: 'var(--font-sans)', fontSize: 'clamp(36px, 4.5vw, 56px)',
    fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.02, color: 'var(--fg-strong)', margin: 0,
  },
  list: { display: 'flex', flexDirection: 'column' },
  row: { borderBottom: '1px solid var(--border)' },
  q: {
    display: 'grid', gridTemplateColumns: '40px 1fr 24px', gap: 16, alignItems: 'center',
    width: '100%', padding: '22px 0', background: 'transparent', border: 'none',
    cursor: 'pointer', textAlign: 'left', fontFamily: 'var(--font-sans)',
  },
  qNum: { fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-subtle)' },
  qText: { fontSize: 18, fontWeight: 500, color: 'var(--fg-strong)', letterSpacing: '-0.01em' },
  plus: { fontSize: 24, color: 'var(--fg-muted)', transition: 'transform 220ms var(--ease-out)', fontWeight: 300 },
  aWrap: {
    overflow: 'hidden', transition: 'max-height 300ms var(--ease-out), opacity 220ms var(--ease-out)',
    paddingLeft: 56,
  },
  a: { fontSize: 15.5, lineHeight: 1.65, color: 'var(--fg-muted)', margin: '0 0 22px', maxWidth: 620 },
};

// ============================================================
// CONTACT — book a call form, left copy / right form
// ============================================================
function Contact({ t, accentVar }) {
  const [vals, setVals] = useStateF({ name: '', email: '', company: '', unit: '', message: '' });
  const [sent, setSent] = useStateF(false);

  const setV = (k, v) => setVals(s => ({ ...s, [k]: v }));
  const valid = vals.name.trim() && /@/.test(vals.email) && vals.message.trim().length > 4;

  const submit = (e) => {
    e.preventDefault();
    if (!valid) return;
    setSent(true);
  };

  return (
    <section id="contact" style={ctStyles.root}>
      <div style={ctStyles.inner}>
        <div style={ctStyles.left}>
          <div style={ctStyles.eyebrow}>{t.contact.eyebrow}</div>
          <h2 style={ctStyles.h2}>
            {t.contact.title}<br/>
            <em style={{ ...ctStyles.em, color: accentVar }}>{t.contact.titleEm}</em>
          </h2>
          <p style={ctStyles.lede}>{t.contact.lede}</p>
          <div style={ctStyles.meta}>
            <span style={ctStyles.metaMono}>// hello@prodct.group</span>
            <span style={ctStyles.metaMono}>// Essen · Berlin · remote DACH</span>
          </div>
        </div>

        <div style={ctStyles.right}>
          {sent ? (
            <div style={ctStyles.sent}>
              <div style={{ ...ctStyles.sentMark, background: accentVar }}>✓</div>
              <h3 style={ctStyles.sentTitle}>
                Thanks, {vals.name.split(' ')[0]}.
              </h3>
              <p style={ctStyles.sentBody}>
                We've got your note. A partner from{' '}
                <em style={{ fontFamily: 'var(--font-serif)', color: accentVar }}>
                  {vals.unit || 'the right unit'}
                </em>{' '}
                will reach out within one business day.
              </p>
              <button onClick={() => { setSent(false); setVals({name:'',email:'',company:'',unit:'',message:''}); }} style={ctStyles.resetBtn}>
                Send another →
              </button>
            </div>
          ) : (
            <form onSubmit={submit} style={ctStyles.form}>
              <div style={ctStyles.row2}>
                <Field label={t.contact.fields.name} v={vals.name} on={v=>setV('name', v)} />
                <Field label={t.contact.fields.email} v={vals.email} on={v=>setV('email', v)} type="email" />
              </div>
              <div style={ctStyles.row2}>
                <Field label={t.contact.fields.company} v={vals.company} on={v=>setV('company', v)} />
                <SelectField label={t.contact.fields.unit} v={vals.unit} on={v=>setV('unit', v)} opts={t.contact.units} />
              </div>
              <TextArea label={t.contact.fields.message} v={vals.message} on={v=>setV('message', v)} />
              <div style={ctStyles.submitRow}>
                <button
                  type="submit"
                  disabled={!valid}
                  style={{
                    ...ctStyles.submit,
                    background: valid ? accentVar : 'var(--bone-300)',
                    cursor: valid ? 'pointer' : 'not-allowed',
                  }}
                >
                  {t.contact.submit}
                </button>
                <span style={ctStyles.small}>{t.contact.small}</span>
              </div>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function Field({ label, v, on, type = 'text' }) {
  return (
    <label style={fieldStyles.root}>
      <span style={fieldStyles.label}>{label}</span>
      <input
        type={type}
        value={v}
        onChange={e => on(e.target.value)}
        style={fieldStyles.input}
      />
    </label>
  );
}
function SelectField({ label, v, on, opts }) {
  return (
    <label style={fieldStyles.root}>
      <span style={fieldStyles.label}>{label}</span>
      <select value={v} onChange={e => on(e.target.value)} style={{ ...fieldStyles.input, cursor: 'pointer' }}>
        <option value="">—</option>
        {opts.map(o => <option key={o}>{o}</option>)}
      </select>
    </label>
  );
}
function TextArea({ label, v, on }) {
  return (
    <label style={fieldStyles.root}>
      <span style={fieldStyles.label}>{label}</span>
      <textarea
        value={v}
        onChange={e => on(e.target.value)}
        rows={4}
        style={{ ...fieldStyles.input, resize: 'vertical', minHeight: 100, fontFamily: 'var(--font-sans)' }}
      />
    </label>
  );
}

const fieldStyles = {
  root: { display: 'flex', flexDirection: 'column', gap: 6, flex: 1 },
  label: { fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-muted)' },
  input: {
    fontFamily: 'var(--font-sans)', fontSize: 15,
    padding: '12px 0', border: 'none', borderBottom: '1px solid var(--border-strong)',
    background: 'transparent', color: 'var(--fg-strong)', outline: 'none',
    width: '100%',
  },
};

const ctStyles = {
  root: { padding: '120px 40px' },
  inner: { maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80 },
  left: { display: 'flex', flexDirection: 'column', gap: 20, position: 'sticky', top: 100, alignSelf: 'start' },
  eyebrow: { fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-muted)' },
  h2: {
    fontFamily: 'var(--font-sans)', fontSize: 'clamp(40px, 5vw, 60px)',
    fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.02, color: 'var(--fg-strong)', margin: 0,
  },
  em: { fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400 },
  lede: { fontSize: 16, lineHeight: 1.6, color: 'var(--fg-muted)', margin: '4px 0 0', maxWidth: 420 },
  meta: { display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 },
  metaMono: { fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-subtle)' },
  right: {
    background: 'var(--bg-elevated)', border: '1px solid var(--border)', borderRadius: 12,
    padding: 36,
  },
  form: { display: 'flex', flexDirection: 'column', gap: 24 },
  row2: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 },
  submitRow: { display: 'flex', alignItems: 'center', gap: 18, marginTop: 8, flexWrap: 'wrap' },
  submit: {
    color: '#fff', border: 'none', padding: '14px 22px',
    borderRadius: 6, fontSize: 14, fontWeight: 500,
    fontFamily: 'var(--font-sans)',
    transition: 'background 200ms var(--ease-out)',
  },
  small: { fontSize: 12, color: 'var(--fg-subtle)', fontFamily: 'var(--font-mono)' },
  sent: { display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'flex-start', padding: '40px 0' },
  sentMark: {
    width: 48, height: 48, borderRadius: '50%', display: 'flex',
    alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 22, fontWeight: 500,
  },
  sentTitle: { fontFamily: 'var(--font-sans)', fontSize: 32, fontWeight: 500, color: 'var(--fg-strong)', letterSpacing: '-0.02em', margin: 0 },
  sentBody: { fontSize: 16, lineHeight: 1.6, color: 'var(--fg-muted)', margin: 0 },
  resetBtn: { fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-muted)', background: 'transparent', border: 'none', cursor: 'pointer', padding: 0 },
};

// ============================================================
// FOOTER
// ============================================================
function Footer({ t, dark }) {
  return (
    <footer style={footStyles.root}>
      <div style={footStyles.top}>
        <div style={footStyles.brandCol}>
          <img
            src={dark ? 'assets/wordmark-v5-light.svg' : 'assets/wordmark-v5.svg'}
            style={{ height: 26 }}
            alt="prodct"
          />
          <span style={footStyles.tagline}>{t.footer.tag}</span>
        </div>
        <div style={footStyles.cols}>
          <div style={footStyles.col}>
            <div style={footStyles.head}>{t.footer.units}</div>
            <a style={footStyles.l} href="prodct CX.html">prodct [CX]</a>
            <a style={footStyles.l} href="prodct Labs.html">prodct [Labs]</a>
            <a style={footStyles.l}>prodct [Elements]</a>
            <a style={footStyles.l}>prodct /skills</a>
          </div>
          <div style={footStyles.col}>
            <div style={footStyles.head}>{t.footer.company}</div>
            <a style={footStyles.l}>{t.footer.about}</a>
            <a style={footStyles.l}>{t.footer.work}</a>
            <a style={footStyles.l}>{t.footer.thinking}</a>
            <a style={footStyles.l} href="prodct Careers.html">{t.footer.careers}</a>
          </div>
          <div style={footStyles.col}>
            <div style={footStyles.head}>{t.footer.contact}</div>
            <a style={footStyles.l}>hello@prodct.group</a>
            <a style={footStyles.l}>Essen · DE</a>
            <a style={footStyles.l}>LinkedIn</a>
          </div>
        </div>
      </div>
      <div style={footStyles.bottom}>
        <span style={footStyles.bottomMono}>// © 2026 prodct GmbH</span>
        <span style={footStyles.bottomMono}>
          <a href="prodct Imprint.html" style={{ color: 'inherit', textDecoration: 'none' }}>{t.footer.legal}</a>
        </span>
      </div>
    </footer>
  );
}

const footStyles = {
  root: { borderTop: '1px solid var(--border)', padding: '72px 40px 32px', background: 'var(--bg)' },
  top: { display: 'grid', gridTemplateColumns: '1.3fr 2fr', gap: 48, maxWidth: 1200, margin: '0 auto' },
  brandCol: { display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-start' },
  tagline: { fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-muted)', maxWidth: 260 },
  cols: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 },
  col: { display: 'flex', flexDirection: 'column', gap: 10 },
  head: { fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-muted)', marginBottom: 4 },
  l: { color: 'var(--fg)', fontSize: 14, textDecoration: 'none', cursor: 'pointer' },
  bottom: {
    display: 'flex', justifyContent: 'space-between',
    maxWidth: 1200, margin: '56px auto 0',
    paddingTop: 24, borderTop: '1px solid var(--border)',
  },
  bottomMono: { fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-subtle)' },
};

Object.assign(window, { FAQ, Contact, Footer });