/* global React */
const NS = window.AlessandroMerliPortfolioDesignSystem_251cec;
const { Input, Textarea, Button, MonoLabel, Card } = NS;
const { useState } = React;

function ContactScreen({ go }) {
  const { Section } = window.AMLayout;
  const D = window.AM_DATA;
  const [form, setForm] = useState({ name: '', email: '', message: '' });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    const er = {};
    if (!form.name.trim()) er.name = 'Please add your name';
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) er.email = 'Enter a valid email';
    if (!form.message.trim()) er.message = 'A few words help';
    setErrors(er);
    if (Object.keys(er).length === 0) setSent(true);
  };

  return (
    <div>
      <Section>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px,1fr))', gap: 'clamp(40px,6vw,96px)', alignItems: 'flex-start' }}>
          {/* Left — pitch + direct details */}
          <div>
            <div style={{ marginBottom: '28px' }}><MonoLabel index={1} tone="muted">Contact</MonoLabel></div>
            <h1 style={{
              fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--type-display)',
              lineHeight: 1.02, letterSpacing: 'var(--ls-display)', color: 'var(--fg-0)', margin: 0,
            }}>
              Let&rsquo;s talk.
            </h1>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--type-lead)', lineHeight: 1.55, color: 'var(--fg-2)', margin: '26px 0 44px', maxWidth: '44ch' }}>
              Hiring teams, R&amp;D leads, and design studios in hardware, sporting goods, and mobility —
              I&rsquo;d love to hear what you&rsquo;re building. I usually reply within a day.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
              <div>
                <MonoLabel tone="faint">Email</MonoLabel>
                <div style={{ marginTop: '10px' }}>
                  <a href={`mailto:${D.contact.email}`} style={{
                    fontFamily: 'var(--font-display)', fontSize: 'clamp(1.1rem,2vw,1.5rem)', color: 'var(--fg-0)',
                    textDecoration: 'none', borderBottom: '1px solid var(--line-strong)', paddingBottom: '3px', letterSpacing: '-0.01em',
                  }}>{D.contact.email}</a>
                </div>
              </div>
              <div style={{ display: 'flex', gap: '40px', flexWrap: 'wrap' }}>
                <div>
                  <MonoLabel tone="faint">LinkedIn</MonoLabel>
                  <div style={{ marginTop: '10px' }}><a href={D.contact.linkedin} style={{ color: 'var(--fg-1)', fontSize: '15px', textDecoration: 'none', borderBottom: '1px solid var(--line-strong)', paddingBottom: '2px' }}>in/alessandromerli</a></div>
                </div>
                <div>
                  <MonoLabel tone="faint">Based in</MonoLabel>
                  <div style={{ marginTop: '10px', fontSize: '15px', color: 'var(--fg-2)' }}>{D.contact.location}</div>
                </div>
              </div>
            </div>
          </div>

          {/* Right — form card */}
          <Card padding="lg" surface="card" style={{ borderColor: 'var(--line-strong)' }}>
            {sent ? (
              <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '24px 4px', minHeight: '320px', justifyContent: 'center' }}>
                <MonoLabel tone="muted">Message sent</MonoLabel>
                <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--type-h2)', color: 'var(--fg-0)', margin: 0, letterSpacing: '-0.018em' }}>
                  Thanks, {form.name.split(' ')[0] || 'there'}.
                </h2>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: '15px', lineHeight: 1.6, color: 'var(--fg-2)', margin: 0, maxWidth: '38ch' }}>
                  Your message is on its way to my inbox. I&rsquo;ll get back to you shortly.
                </p>
                <div style={{ marginTop: '8px' }}>
                  <Button variant="secondary" onClick={() => { setSent(false); setForm({ name: '', email: '', message: '' }); }}>Send another</Button>
                </div>
              </div>
            ) : (
              <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
                <Input label="Name" name="name" placeholder="Your name" required value={form.name} onChange={set('name')} error={errors.name} />
                <Input label="Email" name="email" type="email" placeholder="you@studio.com" required value={form.email} onChange={set('email')} error={errors.email} />
                <Textarea label="Message" name="message" rows={5} placeholder="Tell me about the role or project…" required value={form.message} onChange={set('message')} error={errors.message} />
                <div style={{ marginTop: '4px' }}>
                  <Button variant="primary" size="lg" fullWidth trailingArrow>Send message</Button>
                </div>
                <p style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--fg-4)', letterSpacing: '0.04em', margin: 0, textAlign: 'center' }}>
                  Or email me directly — whichever is easier.
                </p>
              </form>
            )}
          </Card>
        </div>
      </Section>
    </div>
  );
}

window.ContactScreen = ContactScreen;