/* ContactPage.jsx — contact form + details */
const { createElement: xh, useState: xUseState } = React;

function Field({ label, type = 'text', placeholder, value, onChange, area, full }) {
  const [focus, setFocus] = xUseState(false);
  const common = {
    value, onChange: e => onChange(e.target.value), placeholder, onFocus: () => setFocus(true), onBlur: () => setFocus(false),
    style: {
      width: '100%', boxSizing: 'border-box', background: 'var(--bg-2)', color: 'var(--fg-1)',
      border: '1px solid ' + (focus ? 'var(--brand)' : 'var(--border-2)'), borderRadius: 'var(--radius-md)',
      padding: '12px 14px', fontFamily: 'var(--font-sans)', fontSize: 15, outline: 'none',
      boxShadow: focus ? 'var(--ring-focus)' : 'none', transition: 'border-color var(--dur), box-shadow var(--dur)', resize: 'vertical'
    }
  };
  return xh('label', { style: { display: 'flex', flexDirection: 'column', gap: 8, gridColumn: full ? '1 / -1' : 'auto' } },
    xh('span', { className: 'ys-kicker', style: { color: 'var(--fg-3)', letterSpacing: '.1em' } }, label.toUpperCase()),
    area ? xh('textarea', { ...common, rows: 4 }) : xh('input', { ...common, type })
  );
}

function ContactPage({ go }) {
  const { Container, Kicker, GradientButton, GridBG, GlowField, Icon, SocialIcons, PartnerMark } = window;
  const [form, setForm] = xUseState({ name: '', email: '', company: '', message: '' });
  const [sent, setSent] = xUseState(false);
  const set = k => v => setForm(f => ({ ...f, [k]: v }));

  return xh('div', null,
    xh('section', { style: { position: 'relative', overflow: 'hidden', paddingTop: 84, paddingBottom: 72 } },
      xh(GridBG, null), xh(GlowField, null),
      xh(Container, { style: { position: 'relative' } },
        xh(Kicker, { style: { marginBottom: 22 } }, 'CONTACT'),
        xh('h1', { style: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(38px,5.4vw,68px)', lineHeight: 1.03, letterSpacing: '-.035em', margin: 0, maxWidth: 760, color: 'var(--fg-1)' } },
          'Ready to ', xh('span', { className: 'ys-grad-text' }, 'work together?')),
        xh('p', { style: { color: 'var(--fg-2)', fontSize: 'clamp(17px,1.5vw,20px)', lineHeight: 1.6, maxWidth: 560, marginTop: 24 } }, 'Book a demo, talk to the team, or get help self-hosting the platform. We usually reply within a business day.')
      )
    ),

    xh('section', { style: { padding: '20px 0 104px', borderTop: '1px solid var(--border-1)' } },
      xh(Container, null,
        xh('div', { style: { display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 64, paddingTop: 64 } },
          /* form */
          xh('div', { style: { padding: 32, borderRadius: 'var(--radius-xl)', border: '1px solid var(--border-1)', background: 'var(--bg-2)' } },
            sent
              ? xh('div', { style: { padding: '40px 0', textAlign: 'center' } },
                xh('div', { style: { width: 56, height: 56, margin: '0 auto 20px', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--brand-gradient-soft)', border: '1px solid rgba(31,200,210,.3)' } }, xh(Icon, { name: 'check', size: 26, style: { color: 'var(--brand-300)' } })),
                xh('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, color: 'var(--fg-1)', margin: '0 0 8px' } }, 'Message sent.'),
                xh('p', { style: { color: 'var(--fg-2)', fontSize: 15, margin: 0 } }, 'Thanks \u2014 we\u2019ll be in touch shortly.'))
              : xh('form', { onSubmit: e => { e.preventDefault(); setSent(true); }, style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 } },
                xh(Field, { label: 'Name', placeholder: 'Jane Doe', value: form.name, onChange: set('name') }),
                xh(Field, { label: 'Work email', type: 'email', placeholder: 'jane@acme.io', value: form.email, onChange: set('email') }),
                xh(Field, { label: 'Company', placeholder: 'Acme Security', value: form.company, onChange: set('company'), full: true }),
                xh(Field, { label: 'How can we help?', area: true, placeholder: 'Tell us about your environment and what you\u2019d like to see\u2026', value: form.message, onChange: set('message'), full: true }),
                xh('div', { style: { gridColumn: '1 / -1', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, marginTop: 4 } },
                  xh('span', { style: { fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--fg-4)' } }, 'PGP & encrypted intake available'),
                  xh(GradientButton, { icon: 'arrow-right' }, 'Send message')))
          ),
          /* details */
          xh('div', { style: { display: 'flex', flexDirection: 'column', gap: 28 } },
            [
              ['mail', 'Email', 'hello@yottasecure.io'],
              ['calendar', 'Book a demo', 'See the context engine on your data'],
              ['github', 'Open source', 'Read, run, and extend the platform'],
            ].map(([ic, t, b]) => xh('div', { key: t, style: { display: 'flex', gap: 16 } },
              xh('div', { style: { width: 42, height: 42, flex: 'none', borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--bg-3)', border: '1px solid var(--border-2)' } }, xh(Icon, { name: ic, size: 18, style: { color: 'var(--brand-300)' } })),
              xh('div', null,
                xh('div', { style: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 16, color: 'var(--fg-1)' } }, t),
                xh('div', { style: { color: 'var(--fg-2)', fontSize: 14, marginTop: 3 } }, b)))),
            xh('div', { style: { height: 1, background: 'var(--border-1)' } }),
            xh('div', null,
              xh('div', { className: 'ys-kicker', style: { color: 'var(--fg-3)', marginBottom: 16 } }, 'FOLLOW'),
              xh(SocialIcons, { size: 18, color: 'var(--fg-2)' })),
            xh('div', null,
              xh('div', { className: 'ys-kicker', style: { color: 'var(--fg-3)', marginBottom: 16 } }, 'PARTNERS'),
              xh('div', { style: { display: 'flex', flexWrap: 'wrap', gap: '14px 28px' } }, ['Tabulera', 'Dosanjh USA', 'legalconnection', 'FedTech'].map(n => xh(PartnerMark, { key: n, name: n }))))
          )
        )
      )
    )
  );
}
Object.assign(window, { ContactPage });