// Contact page (/contact) and its form controls.

function SiteInput({ T, label, tall = false, value }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
      <span style={{ fontSize: 12.5, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase', color: T.mut }}>{label}</span>
      {tall
        ? <textarea rows={5} style={{ resize: 'vertical', border: `1.5px solid ${T.line}`, borderRadius: RAD(14), background: T.isDark ? T.paper : '#fff', color: T.ink, fontFamily: T.bf, fontSize: 14.5, padding: '12px 14px', outline: 'none', boxSizing: 'border-box', width: '100%' }}></textarea>
        : <input defaultValue={value} style={{ height: 46, border: `1.5px solid ${T.line}`, borderRadius: RAD(14), background: T.isDark ? T.paper : '#fff', color: T.ink, fontFamily: T.bf, fontSize: 14.5, padding: '0 14px', outline: 'none', boxSizing: 'border-box', width: '100%' }} />}
    </div>
  );
}

function SiteSelect({ T, label, options, lang }) {
  const [open, setOpen] = React.useState(false);
  const [val, setVal] = React.useState(options[0]);
  const shown = React.useMemo(() => (window.HBtFor ? window.HBtFor(val, lang) : val), [val, lang]);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 7, position: 'relative' }}>
      <span style={{ fontSize: 12.5, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase', color: T.mut }}>{label}</span>
      <div onClick={() => setOpen(!open)} style={{ height: 46, border: `1.5px solid ${open ? T.accent : T.line}`, borderRadius: RAD(14), background: T.isDark ? T.paper : '#fff', color: T.ink, fontFamily: T.bf, fontSize: 14.5, padding: '0 14px', boxSizing: 'border-box', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, cursor: 'pointer' }}>
        <span key={lang + val} style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{shown}</span>
        <span style={{ display: 'inline-flex', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s ease' }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 9.5l6 6 6-6" stroke={T.mut} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </span>
      </div>
      {open && (
        <div style={{ position: 'absolute', top: '100%', left: 0, right: 0, marginTop: 6, background: T.isDark ? T.paper : '#fff', border: `1px solid ${T.line}`, borderRadius: RAD(14), boxShadow: '0 16px 34px rgba(10,25,38,0.16)', padding: 6, zIndex: 30, maxHeight: 264, overflowY: 'auto' }}>
          {options.map((o) => (
            <div key={o} onClick={() => { setVal(o); setOpen(false); }} style={{ padding: '10px 12px', borderRadius: RAD(10), fontSize: 14, fontWeight: o === val ? 750 : 550, color: o === val ? T.deep : T.ink, background: o === val ? T.tint(8) : 'transparent', cursor: 'pointer' }}>{o}</div>
          ))}
        </div>
      )}
    </div>
  );
}

function ContactCard({ T, icon, title, sub, value }) {
  return (
    <div className="hb-card" style={{ background: T.card, borderRadius: RAD(20), border: `1px solid ${T.line}`, padding: '18px 20px', display: 'flex', gap: 13, alignItems: 'flex-start' }}>
      <div style={{ width: IW(38), height: IW(38), borderRadius: RAD(13), background: T.tint(8), border: WSTROKE(`1px solid ${T.tint(22)}`), boxSizing: 'border-box', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <Ic name={icon} size={18} c={T.deep} w={1.9} />
      </div>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontSize: 14.5, fontWeight: 750, color: T.ink }}>{title}</div>
        <div style={{ fontSize: 13, lineHeight: 1.45, color: T.mut, marginTop: 3, textWrap: 'pretty' }}>{sub}</div>
        {value && <div style={{ fontSize: 13.5, fontWeight: 700, color: T.deep, marginTop: 7 }}>{value}</div>}
      </div>
    </div>
  );
}

function ContactPage({ T, nav, lang }) {
  const expect = [
    { ic: 'bell',   t: 'A reply in two working days', s: 'Every message is read by a person, not a bot.' },
    { ic: 'book',   t: 'Romanian or English',         s: 'Write in whichever language you prefer.' },
    { ic: 'shield', t: 'Bugs get a version check',    s: 'Add your iPhone model and iOS version to speed things up.' },
  ];
  return (
    <React.Fragment>
      <div style={{ background: `linear-gradient(175deg, ${T.tint(12)} 0%, ${T.tint(4)} 55%, ${T.tint(2)} 100%)` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '58px 28px 8px', textAlign: 'center' }}>
          <h1 style={{ margin: 0, fontFamily: T.df, fontSize: 'clamp(28px, 6vw, 40px)', fontWeight: 700, color: T.ink, letterSpacing: -0.7, lineHeight: 1.12, textWrap: 'pretty' }}>Talk to the people who built the app</h1>
          <p style={{ margin: '14px auto 0', maxWidth: 560, fontSize: 16, lineHeight: 1.55, color: T.mut, textWrap: 'pretty' }}>Questions, billing, wrong answers in the question bank: one small team reads all of it.</p>
        </div>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '34px 28px 40px' }}>
          <div style={{ maxWidth: 760, margin: '0 auto' }}>
          <div style={{ background: '#fff', borderRadius: RAD(24), border: `1px solid ${T.line}`, padding: '28px 28px 26px' }}>
            <h2 style={{ margin: 0, fontFamily: T.df, fontSize: 24, fontWeight: 700, color: T.ink, letterSpacing: -0.3 }}>Send us a message</h2>
            <p style={{ margin: '6px 0 22px', fontSize: 13.5, color: T.mut }}>No account required. We only use your address to reply, nothing else.</p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 16 }}>
              <SiteInput T={T} label="Your name" />
              <SiteInput T={T} label="Email address" />
            </div>
            <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 16 }}>
              <SiteSelect T={T} lang={lang} label="Topic" options={['Help with the app', 'Report a wrong question or explanation', 'Report a bug or crash', 'Subscriptions and payments', 'Feedback and feature request', 'Partnership or business opportunity', 'Something else']} />
              <SiteInput T={T} label="Message" tall />
              <Btn T={T} h={48} fs={15} icon="arrowR">Send message</Btn>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 14, marginTop: 20 }}>
            {expect.map((e, i) => (
              <div key={i} className="hb-card" style={{ background: '#fff', borderRadius: RAD(20), border: `1px solid ${T.line}`, padding: '20px 20px 18px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <span style={{ flex: 1, fontSize: 14.5, fontWeight: 750, color: T.ink, textWrap: 'pretty' }}>{e.t}</span>
                  <div style={{ width: IW(36), height: IW(36), borderRadius: RAD(12), background: T.tint(8), border: WSTROKE(`1px solid ${T.tint(22)}`), boxSizing: 'border-box', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Ic name={e.ic} size={17} c={T.deep} w={1.9} />
                  </div>
                </div>
                <div style={{ fontSize: 13, lineHeight: 1.5, color: T.mut, marginTop: 10, textWrap: 'pretty' }}>{e.s}</div>
              </div>
            ))}
          </div>
          <div style={{ background: `linear-gradient(160deg, ${T.heroA} 0%, ${T.heroDeep} 100%)`, borderRadius: RAD(20), padding: '24px 26px', marginTop: 14, display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap', boxShadow: SH(`0 12px 28px color-mix(in oklab, ${T.accent} 24%, transparent)`) }}>
            <div style={{ flex: '1 1 280px', minWidth: 240 }}>
              <div style={{ fontSize: 16, fontWeight: 750, color: '#fff' }}>Faster than writing to us</div>
              <div style={{ fontSize: 13.5, lineHeight: 1.5, color: 'rgba(255,255,255,0.82)', marginTop: 4 }}>Most answers about plans, offline use and the question bank are already written down.</div>
            </div>
            <Btn T={T} kind="dark" h={44} fs={14} icon="arrowR" onClick={() => nav('features')} style={{ padding: '0 20px' }}>Browse the FAQ</Btn>
          </div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { ContactPage, SiteInput, SiteSelect, ContactCard });