// karm.dev — Content sections: Projects, Experience, Skills, Contact

function ProjectCardReal({ p, lang, t, delay }) {
  const [hovered, setHovered] = React.useState(false);
  const title = p[`title_${lang}`];
  const desc = p[`description_${lang}`];
  const kind = p[`kind_${lang}`];
  return (
    <a
      className={`project-card${hovered ? ' is-hover' : ''}`}
      href={p.url} target="_blank" rel="noreferrer"
      style={{ animation: `fadeInUp 0.6s ease-out ${delay}s both`, textDecoration: 'none', color: 'inherit' }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <div className={`project-card__image project-card__image--${p.mono_class}`}>
        {p.image
          ? <img src={p.image} alt={title} style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}} />
          : <>
              <span className="project-card__url">{p.domain}</span>
              <span className="project-card__monogram">{p.monogram}</span>
              <span className="project-card__kind">{kind}</span>
            </>
        }
      </div>
      <div className="project-card__body">
        <h3 className="project-card__title">{title}</h3>
        <p className="project-card__desc">{desc}</p>
        <div className="project-card__tags">
          {p.tags.map((tag, i) => <Tag key={i}>{tag}</Tag>)}
        </div>
        <div className="project-card__action">
          <Button variant="ghost" size="sm">{t('projects.visit')} →</Button>
        </div>
      </div>
    </a>
  );
}

function ProjectsSection({ lang, t }) {
  return (
    <section className="section" id="proyectos" data-screen-label="Proyectos">
      <p className="section__eyebrow">{t('projects.eyebrow')}</p>
      <h2 className="section__title">{t('projects.title')}</h2>
      <p className="section__lead">{t('projects.lead')}</p>
      <div className="grid-3">
        {PROJECTS.map((p, i) => (
          <ProjectCardReal key={p.id} p={p} lang={lang} t={t} delay={i * 0.1} />
        ))}
      </div>
    </section>
  );
}

function ExperienceSection({ lang, t }) {
  return (
    <section className="section--alt" id="experiencia" data-screen-label="Experiencia">
      <div className="section-inner section">
        <p className="section__eyebrow">{t('exp.eyebrow')}</p>
        <h2 className="section__title">{t('exp.title')}</h2>
        <p className="section__lead">{t('exp.lead')}</p>
        <div className="timeline">
          {EXPERIENCE.map(e => (
            <article key={e.id} className={`timeline__item${e.current ? ' timeline__item--current' : ''}`}>
              <span className="timeline__dot" />
              <div className="timeline__head">
                <div>
                  <h3 className="timeline__role">
                    {e[`role_${lang}`]} <span className="timeline__company">@ {e.company}</span>
                  </h3>
                </div>
                <span className="timeline__date">
                  {e[`date_${lang}`] || e.date}
                  {e.current && <span style={{marginLeft: 8, color: 'var(--accent)'}}>● {t('exp.current')}</span>}
                </span>
              </div>
              <div className="timeline__body">
                <ul>
                  {e[`bullets_${lang}`].map((b, i) => <li key={i}>{b}</li>)}
                </ul>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function SkillsSection({ lang, t }) {
  return (
    <section className="section" id="skills" data-screen-label="Skills">
      <p className="section__eyebrow">{t('skills.eyebrow')}</p>
      <h2 className="section__title">{t('skills.title')}</h2>
      <p className="section__lead">{t('skills.lead')}</p>
      <div className="skills-grid">
        {SKILL_GROUPS.map(g => (
          <div key={g.id} className="skills-col">
            <div className="skills-col__head">
              <span className="skills-col__glyph" aria-hidden="true">{g.glyph}</span>
              <h3 className="skills-col__title">{g[`title_${lang}`]}</h3>
            </div>
            <p className="skills-col__label">{t('skills.core')}</p>
            <div className="skills-col__tags">
              {g.core.map(s => <span key={s} className="skills-col__tag">{s}</span>)}
            </div>
            <p className="skills-col__label" style={{marginTop: 8}}>{t('skills.also')}</p>
            <div className="skills-col__tags">
              {g.also.map(s => <span key={s} className="skills-col__tag" style={{opacity: 0.7}}>{s}</span>)}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function ContactSection({ lang, t }) {
  const [form, setForm] = React.useState({ name: '', email: '', type: '', message: '' });
  const [sent, setSent] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [submitError, setSubmitError] = React.useState('');
  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const emailError = form.email && !form.email.includes('@') ? t('contact.form.email.err') : '';
  const nameOk = form.name.length > 2;

  const submit = async (e) => {
    e.preventDefault();
    if (!nameOk || !form.email || emailError) return;
    setLoading(true);
    setSubmitError('');
    try {
      const res = await fetch('https://formspree.io/f/xgorzeoj', {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: form.name, email: form.email, type: form.type, message: form.message }),
      });
      if (res.ok) {
        setSent(true);
      } else {
        setSubmitError(t('contact.form.error') || 'Error al enviar. Intentá de nuevo.');
      }
    } catch {
      setSubmitError(t('contact.form.error') || 'Error al enviar. Intentá de nuevo.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <section className="section" id="contacto" data-screen-label="Contacto">
      <div className="contact-grid">
        <div>
          <p className="section__eyebrow">{t('contact.eyebrow')}</p>
          <h2 className="section__title">{t('contact.title')}</h2>
          <p className="lead" style={{marginBottom: 24}}>{t('contact.lead')}</p>
          <div className="avail-pill" style={{marginBottom: 32}}>
            <span className="avail-pill__dot" /> {t('contact.response')}
          </div>
          <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
            <div style={{display: 'flex', gap: 12, alignItems: 'center'}}>
              <span style={{width: 36, height: 36, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'var(--accent-soft)', color: 'var(--accent)', borderRadius: 8, fontWeight: 700}}>✉</span>
              <a href="mailto:krosales@karm.dev" style={{color: 'var(--fg-1)', textDecoration: 'none'}}>krosales@karm.dev</a>
            </div>
            <div style={{display: 'flex', gap: 12, alignItems: 'center'}}>
              <span style={{width: 36, height: 36, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'var(--accent-soft)', color: 'var(--accent)', borderRadius: 8, fontWeight: 700}}>☎</span>
              <span style={{color: 'var(--fg-1)'}}>+52 656 425 9179</span>
            </div>
            <div style={{display: 'flex', gap: 12, alignItems: 'center'}}>
              <span style={{width: 36, height: 36, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'var(--accent-soft)', color: 'var(--accent)', borderRadius: 8, fontWeight: 700}}>●</span>
              <span>Ciudad Juárez, MX · Remoto</span>
            </div>
          </div>
        </div>

        {sent ? (
          <div className="contact-sent">
            <div className="contact-sent__icon">✓</div>
            <h3 style={{fontFamily: 'var(--font-display)', fontSize: 'var(--text-2xl)', margin: '0 0 8px'}}>{t('contact.sent.title')}</h3>
            <p className="lead">{t('contact.sent.body').replace('{name}', form.name).replace('{email}', form.email)}</p>
            <Button variant="ghost" onClick={() => { setSent(false); setForm({name:'',email:'',type:'',message:''}); }}>
              {t('contact.sent.again')}
            </Button>
          </div>
        ) : (
          <form className="contact-form" onSubmit={submit}>
            <FormField
              label={t('contact.form.name')}
              placeholder={t('contact.form.name.ph')}
              value={form.name} onChange={upd('name')}
              success={nameOk ? t('contact.form.name.ok') : ''}
            />
            <FormField
              label={t('contact.form.email')}
              type="email"
              placeholder={t('contact.form.email.ph')}
              value={form.email} onChange={upd('email')}
              error={emailError}
            />
            <FormField
              label={t('contact.form.type')}
              as="select"
              value={form.type} onChange={upd('type')}
            >
              <option value="">{t('contact.form.type.ph')}</option>
              <option value="ai">{t('contact.form.type.opt1')}</option>
              <option value="backend">{t('contact.form.type.opt2')}</option>
              <option value="fullstack">{t('contact.form.type.opt3')}</option>
              <option value="etl">{t('contact.form.type.opt4')}</option>
              <option value="consult">{t('contact.form.type.opt5')}</option>
            </FormField>
            <FormField
              label={t('contact.form.message')}
              as="textarea"
              placeholder={t('contact.form.message.ph')}
              value={form.message} onChange={upd('message')}
            />
            {submitError && <p style={{color: 'var(--error, #ef4444)', fontSize: 13, margin: '0 0 8px'}}>{submitError}</p>}
            <Button type="submit" variant="accent" size="lg" isLoading={loading} style={{width: '100%'}}>
              {loading ? t('contact.form.submitting') : t('contact.form.submit')}
            </Button>
          </form>
        )}
      </div>
    </section>
  );
}

function StatStrip({ t }) {
  return (
    <div className="stat-strip">
      <div className="stat-strip__item">
        <div className="stat-strip__num"><em>5+</em></div>
        <div className="stat-strip__label">{t('stat.years')}</div>
      </div>
      <div className="stat-strip__item">
        <div className="stat-strip__num"><em>15+</em></div>
        <div className="stat-strip__label">{t('stat.projects')}</div>
      </div>
      <div className="stat-strip__item">
        <div className="stat-strip__num" style={{fontSize: 22, fontFamily: 'var(--font-mono)', letterSpacing: 0, lineHeight: 1.3, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>{t('stat.stack.val')}</div>
        <div className="stat-strip__label">{t('stat.stack')}</div>
      </div>
      <div className="stat-strip__item">
        <div className="stat-strip__num"><em>{t('stat.response.val')}</em></div>
        <div className="stat-strip__label">{t('stat.response')}</div>
      </div>
    </div>
  );
}

window.ProjectsSection = ProjectsSection;
window.ExperienceSection = ExperienceSection;
window.SkillsSection = SkillsSection;
window.ContactSection = ContactSection;
window.StatStrip = StatStrip;