// ─── Skills ───

function Skills() {
  const [ref, visible] = useScrollReveal();
  return (
    <section id="skills" className="section" ref={ref}>
      <div className="container">
        <RevealWrap visible={visible}>
          <SectionHeader number="03" title="Skills & Technologies" />
        </RevealWrap>
        <div className="skills-grid">
          {SKILL_GROUPS.map((g, gi) => (
            <RevealWrap key={gi} visible={visible} delay={0.12 + gi * 0.08} className="skill-group">
              <h3 className="skill-group-title">{g.category}</h3>
              <div className="skill-pills">
                {g.items.map(item => (
                  <span key={item} className="skill-pill">{item}</span>
                ))}
              </div>
            </RevealWrap>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Research ───

function Research() {
  const [ref, visible] = useScrollReveal();
  return (
    <section id="research" className="section section--alt" ref={ref}>
      <div className="container">
        <RevealWrap visible={visible}>
          <SectionHeader number="04" title="Research" />
        </RevealWrap>
        <RevealWrap visible={visible} delay={0.18}>
          <div className="research-card">
            <div className="research-badge">{PUBLICATION.status} · ICCBI 2026</div>
            <h3 className="research-title">{PUBLICATION.title}</h3>
            <p className="research-venue">{PUBLICATION.venue}</p>
            <div className="research-details">
              <div className="research-detail">
                <span className="research-detail-label">Performance</span>
                <span>{PUBLICATION.metrics}</span>
              </div>
              <div className="research-detail">
                <span className="research-detail-label">Method</span>
                <span>{PUBLICATION.method}</span>
              </div>
              <div className="research-detail">
                <span className="research-detail-label">Innovation</span>
                <span>{PUBLICATION.innovations}</span>
              </div>
            </div>
            <p className="research-authors">{PUBLICATION.authors}</p>
          </div>
        </RevealWrap>
      </div>
    </section>
  );
}

// ─── Experience ───

function ExperienceSection() {
  const [ref, visible] = useScrollReveal();
  return (
    <section id="experience" className="section" ref={ref}>
      <div className="container">
        <RevealWrap visible={visible}>
          <SectionHeader number="05" title="Experience" />
        </RevealWrap>
        <div className="exp-grid">
          {EXPERIENCE_DATA.map((exp, i) => (
            <RevealWrap key={i} visible={visible} delay={0.15 + i * 0.1} className="exp-card-wrap">
              <div className="exp-card">
                <span className="exp-date">{exp.date}</span>
                <h3 className="exp-company">{exp.company}</h3>
                <p className="exp-role">{exp.role}</p>
              </div>
            </RevealWrap>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Achievements ───

function AchievementsSection() {
  const [ref, visible] = useScrollReveal();
  return (
    <section className="section section--alt" ref={ref}>
      <div className="container">
        <RevealWrap visible={visible}>
          <SectionHeader number="06" title="Achievements" />
        </RevealWrap>
        <div className="achievements-grid">
          {ACHIEVEMENTS.map((a, i) => (
            <RevealWrap key={i} visible={visible} delay={0.12 + i * 0.07}>
              <div className="achievement-card">
                <div className="achievement-badge">{a.badge}</div>
                <h3 className="achievement-title">{a.title}</h3>
                <p className="achievement-org">{a.org}</p>
                <p className="achievement-desc">{a.desc}</p>
                <span className="achievement-date">{a.date}</span>
              </div>
            </RevealWrap>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Certifications ───

function CertificationsSection() {
  const [ref, visible] = useScrollReveal();
  return (
    <section className="section" ref={ref}>
      <div className="container">
        <RevealWrap visible={visible}>
          <SectionHeader number="07" title="Certifications" />
        </RevealWrap>
        <div className="certs-grid">
          {CERTIFICATIONS.map((c, i) => (
            <RevealWrap key={i} visible={visible} delay={0.1 + i * 0.07}>
              <div className="cert-card">
                <h4 className="cert-name">{c.name}</h4>
                <p className="cert-org">{c.org}</p>
                <div className="cert-bottom">
                  {c.date && <span className="cert-date">{c.date}</span>}
                  {c.link && <a href={c.link} target="_blank" rel="noopener" className="cert-view">View <IconExternal /></a>}
                </div>
              </div>
            </RevealWrap>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Education ───

function EducationSection() {
  const [ref, visible] = useScrollReveal();
  return (
    <section className="section section--alt" ref={ref}>
      <div className="container">
        <RevealWrap visible={visible}>
          <SectionHeader number="08" title="Education" />
        </RevealWrap>
        <div className="edu-timeline">
          {EDUCATION.map((edu, i) => (
            <RevealWrap key={i} visible={visible} delay={0.18 + i * 0.12} className="edu-item">
              <div className="edu-dot-wrap">
                <div className={`edu-dot ${edu.current ? 'edu-dot--active' : ''}`}></div>
              </div>
              <div className="edu-content">
                <span className="edu-period">{edu.period}</span>
                <h3 className="edu-school">{edu.school}</h3>
                <p className="edu-degree">{edu.degree}</p>
                <span className="edu-score">{edu.score}</span>
              </div>
            </RevealWrap>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Contact Form Modal ───

// ─── EmailJS config — replace these with your real IDs from emailjs.com ───
const EMAILJS_SERVICE_ID  = 'service_x5ja7ro';
const EMAILJS_TEMPLATE_ID = 'template_227br4x';
const EMAILJS_PUBLIC_KEY  = 'v_x5V2thFu9Zht0Xt';

function ContactFormModal({ open, onClose }) {
  const [form, setForm] = useState({ name: '', email: '', subject: '', message: '' });
  const [sending, setSending] = useState(false);
  const [sent, setSent] = useState(false);
  const [error, setError] = useState('');

  const handleChange = (e) => {
    setForm(prev => ({ ...prev, [e.target.name]: e.target.value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setError('');
    setSending(true);

    window.emailjs.send(
      EMAILJS_SERVICE_ID,
      EMAILJS_TEMPLATE_ID,
      {
        from_name:  form.name,
        from_email: form.email,
        subject:    form.subject || 'Portfolio Contact',
        message:    form.message,
        reply_to:   form.email,
      },
      EMAILJS_PUBLIC_KEY
    ).then(() => {
      setSending(false);
      setSent(true);
      setTimeout(() => {
        setSent(false);
        onClose();
        setForm({ name: '', email: '', subject: '', message: '' });
      }, 2500);
    }).catch(() => {
      setSending(false);
      setError('Something went wrong. Please email me directly.');
    });
  };

  if (!open) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-card" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}><IconX /></button>
        {sent ? (
          <div className="modal-success">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg>
            <h3>Message sent!</h3>
            <p>Thanks for reaching out. I'll get back to you soon.</p>
          </div>
        ) : (
          <>
            <h3 className="modal-title">Send me a message</h3>
            <p className="modal-subtitle">Fill in the details and I'll get back to you.</p>
            <form className="modal-form" onSubmit={handleSubmit}>
              <div className="form-row">
                <div className="form-group">
                  <label className="form-label">Name</label>
                  <input className="form-input" type="text" name="name" value={form.name} onChange={handleChange} placeholder="Your name" required />
                </div>
                <div className="form-group">
                  <label className="form-label">Email</label>
                  <input className="form-input" type="email" name="email" value={form.email} onChange={handleChange} placeholder="your@email.com" required />
                </div>
              </div>
              <div className="form-group">
                <label className="form-label">Subject</label>
                <input className="form-input" type="text" name="subject" value={form.subject} onChange={handleChange} placeholder="What's this about?" />
              </div>
              <div className="form-group">
                <label className="form-label">Message</label>
                <textarea className="form-textarea" name="message" value={form.message} onChange={handleChange} placeholder="Write your message..." rows="4" required></textarea>
              </div>
              {error && <p className="form-error">{error}</p>}
              <button type="submit" className="btn btn--primary btn--large modal-submit" disabled={sending}>
                {sending ? 'Sending…' : 'Send Message'}
              </button>
            </form>
          </>
        )}
      </div>
    </div>
  );
}

// ─── Contact ───

function ContactSection() {
  const [ref, visible] = useScrollReveal();
  const [modalOpen, setModalOpen] = useState(false);
  return (
    <section id="contact" className="section section--accent" ref={ref}>
      <div className="container contact-container">
        <RevealWrap visible={visible}>
          <h2 className="contact-title">Let's build something great.</h2>
          <p className="contact-subtitle">Open to collaborations, internships, and interesting problems.</p>
        </RevealWrap>
        <RevealWrap visible={visible} delay={0.18} className="contact-links">
          <a href={`mailto:${LINKS.email}`} className="contact-item">
            <IconMail /> <span>{LINKS.email}</span>
          </a>
          <a href={LINKS.github} target="_blank" rel="noopener" className="contact-item">
            <IconGitHub /> <span>GitHub</span>
          </a>
          <a href={LINKS.linkedin} target="_blank" rel="noopener" className="contact-item">
            <IconLinkedIn /> <span>LinkedIn</span>
          </a>
        </RevealWrap>
        <RevealWrap visible={visible} delay={0.3}>
          <button className="btn btn--primary btn--large" onClick={() => setModalOpen(true)}>
            Send a Message
          </button>
        </RevealWrap>
      </div>
      <ContactFormModal open={modalOpen} onClose={() => setModalOpen(false)} />
    </section>
  );
}

// ─── Footer ───

function PortfolioFooter() {
  return (
    <footer className="footer">
      <div className="container footer-inner">
        <span className="footer-name">Darshan Kachhiya</span>
        <span className="footer-note">Built with ☕ and curiosity · {new Date().getFullYear()}</span>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Skills, Research, ExperienceSection, AchievementsSection,
  CertificationsSection, EducationSection,
  ContactSection, ContactFormModal, PortfolioFooter,
});