/* global React */

/* ============================================
   CONTACT
   ============================================ */

const SOCIALS = [
  { n: 'GitHub', a: '@ashma4444', href: 'https://github.com/ashma4444', glow: '#ffffff' },
  { n: 'LinkedIn', a: 'ashma-maharjan', href: 'https://www.linkedin.com/in/ashma-maharjan-230323250/', glow: '#4d9fff' },
  { n: 'Instagram', a: '@imashmaharzan', href: 'https://www.instagram.com/imashmaharzan/', glow: '#ff7ad1' },
  { n: 'Facebook', a: 'ashmaharzan', href: 'https://www.facebook.com/ashmaharzan', glow: '#5ef3ff' },
  { n: 'Email', a: 'ashma20570218@gmail.com', href: 'mailto:ashma20570218@gmail.com', glow: '#7af0c2' },
];

function Contact() {
  const [form, setForm] = React.useState({ name: '', email: '', project: '', message: '' });
  const [sent, setSent] = React.useState(false);

  const send = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4200);
  };

  return (
    <section id="contact" data-screen-label="07 Contact">
      <div className="container">
        <div className="reveal">
          <span className="eyebrow eyebrow-dot">/ 06 — Signal</span>
          <h2 className="section-title" style={{ marginTop: 22, maxWidth: 920 }}>
            Let's build something <span className="alt">great</span>
            <br/>together.
          </h2>
          <p className="section-lead" style={{ marginTop: 26 }}>
            Have a project in mind or want to collaborate? Drop me a message
            and I'll get back to you as soon as possible.
          </p>
        </div>

        <div className="contact-wrap">
          <form className="contact-form reveal" onSubmit={send}>
            <div className="field cursor-target">
              <label>Your name</label>
              <input
                type="text"
                placeholder="Your Name"
                value={form.name}
                onChange={(e) => setForm({ ...form, name: e.target.value })}
                required
              />
              <span className="underglow" />
            </div>
            <div className="field cursor-target">
              <label>Email</label>
              <input
                type="email"
                placeholder="you@example.com"
                value={form.email}
                onChange={(e) => setForm({ ...form, email: e.target.value })}
                required
              />
              <span className="underglow" />
            </div>
            <div className="field cursor-target">
              <label>Project type</label>
              <input
                type="text"
                placeholder="Web · Brand · Motion · Other"
                value={form.project}
                onChange={(e) => setForm({ ...form, project: e.target.value })}
              />
              <span className="underglow" />
            </div>
            <div className="field cursor-target">
              <label>About the project</label>
              <textarea
                rows={4}
                placeholder="Tell me about your project, goals, and timeline..."
                value={form.message}
                onChange={(e) => setForm({ ...form, message: e.target.value })}
                required
              />
              <span className="underglow" />
            </div>

            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 30, gap: 12, flexWrap: 'wrap' }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-mute)' }}>
                {sent ? '◉ Message received — talk soon.' : 'I read every message'}
              </span>
              <button type="submit" className="btn btn-primary" disabled={sent}>
                {sent ? 'Sent ✓' : 'Send message'} <Arrow />
              </button>
            </div>
          </form>

          <div className="contact-side">
            <div className="contact-info reveal">
              <div className="k">Location</div>
              <div className="v">Nayabazar, Kathmandu, Nepal</div>
            </div>
            <div className="contact-info reveal reveal-delay-1">
              <div className="k">Hours</div>
              <div className="v">10:00 — 18:00 NPT (GMT+5:45)</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--cyan)', marginTop: 6 }}>● Available for work</div>
            </div>

            <div className="socials reveal reveal-delay-2">
              {SOCIALS.map((s) => (
                <a key={s.n} className="social cursor-target" href={s.href} target="_blank" rel="noopener noreferrer">
                  <div>
                    <div className="n">{s.n}</div>
                    <div className="a">{s.a}</div>
                  </div>
                  <Arrow />
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================
   FOOTER
   ============================================ */

function Footer() {
  const [time, setTime] = React.useState('');
  React.useEffect(() => {
    const update = () => {
      const d = new Date();
      const opts = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false, timeZone: 'Asia/Kathmandu' };
      setTime(d.toLocaleTimeString('en-US', opts) + ' NPT');
    };
    update();
    const id = setInterval(update, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-eyebrow">
          <span className="eyebrow eyebrow-dot">Software Developer · est. 2022</span>
        </div>
        <div className="footer-mark">ashma maharjan<span className="period">.</span></div>
        <div className="footer-tag">Crafting dynamic web experiences with modern code — one component at a time.</div>
        <div className="footer-row">
          <span>© 2026 — Ashma Maharjan · All rights reserved</span>
          <span>{time}</span>
          <span>Crafted with care</span>
        </div>
      </div>
    </footer>
  );
}

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