// Falta Palta — page sections.

const { useState, useEffect, useRef } = React;

function AnimatedText({ children, lang, as: Tag = 'span', className, style }) {
  const [shown, setShown] = useState(children);
  const [stale, setStale] = useState(null);
  const prevLang = useRef(lang);

  useEffect(() => {
    if (prevLang.current !== lang) {
      setStale(shown);
      setShown(children);
      prevLang.current = lang;
      const t = setTimeout(() => setStale(null), 420);
      return () => clearTimeout(t);
    }
    setShown(children);
  }, [children, lang]);

  return (
    <Tag className={className} style={{ position: 'relative', display: 'inline-block', ...style }}>
      {stale && (
        <span aria-hidden="true" className="fp-anim fp-anim-out"
              style={{ position: 'absolute', inset: 0, whiteSpace: 'inherit' }}>
          {stale}
        </span>
      )}
      <span className="fp-anim fp-anim-in" key={lang}>{shown}</span>
    </Tag>
  );
}

function Nav({ t, lang, onLang, active, progress }) {
  const links = [
    { id: 'services', label: t.nav.services },
    { id: 'about', label: t.nav.about },
    { id: 'contact', label: t.nav.contact },
  ];
  const go = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 12, behavior: 'smooth' });
  };
  return (
    <header className="fp-nav">
      <div className="fp-nav-progress" style={{ transform: `scaleX(${progress})` }} />
      <a href="#top" onClick={go('top')} className="fp-brand" aria-label="Falta Palta home">
        <FPMark size={20} mode="tight" accent="var(--accent-bright)" />
        <span className="fp-brand-name">Falta Palta</span>
      </a>
      <nav className="fp-nav-links">
        {links.map((l) => (
          <a key={l.id} href={`#${l.id}`} onClick={go(l.id)}
             className={'fp-nav-link' + (active === l.id ? ' is-active' : '')}>
            <AnimatedText lang={lang}>{l.label}</AnimatedText>
          </a>
        ))}
      </nav>
      <button type="button" className="fp-lang" onClick={onLang}
              aria-label={lang === 'en' ? 'Cambiar a español' : 'Switch to English'}>
        <span className="fp-lang-track" data-lang={lang}>
          <span className={'fp-lang-pill ' + (lang === 'en' ? 'is-active' : '')}>EN</span>
          <span className={'fp-lang-pill ' + (lang === 'es' ? 'is-active' : '')}>ES</span>
        </span>
      </button>
    </header>
  );
}

function Hero({ t, lang }) {
  const [scrolled, setScrolled] = useState(0);
  useEffect(() => {
    const onScroll = () => setScrolled(Math.min(1, window.scrollY / 600));
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section id="top" className="fp-hero" data-screen-label="Hero">
      <div
        className="fp-hero-motif"
        style={{
          transform: `translate3d(0, ${scrolled * -80}px, 0) rotate(${scrolled * -6}deg)`,
          opacity: 1 - scrolled * 0.4,
        }}
      >
        <FPMark size={320} accent="var(--accent-bright)" />
      </div>

      <div className="fp-hero-inner">
        <div className="fp-eyebrow">
          <span className="fp-eyebrow-dot" />
          <AnimatedText lang={lang}>{t.hero.eyebrow}</AnimatedText>
        </div>

        <h1 className="fp-h1">
          <AnimatedText lang={lang} as="span">{t.hero.h1Pre}</AnimatedText>{' '}
          <AnimatedText lang={lang} as="em" className="fp-h1-em">{t.hero.h1Em}</AnimatedText>
        </h1>

        <p className="fp-h2">
          <AnimatedText lang={lang}>{t.hero.h2}</AnimatedText>
        </p>

        <p className="fp-hero-body">
          <AnimatedText lang={lang}>{t.hero.body}</AnimatedText>
        </p>

        <div className="fp-hero-cta">
          <a href="#contact" className="fp-btn fp-btn-primary"
             onClick={(e) => {
               e.preventDefault();
               const el = document.getElementById('contact');
               if (el) window.scrollTo({ top: el.offsetTop - 12, behavior: 'smooth' });
             }}>
            <AnimatedText lang={lang}>{t.hero.cta}</AnimatedText>
            <ArrowRight size={18} />
          </a>
          <span className="fp-hero-hint">
            <span className="fp-hero-hint-arrow">↓</span>
            <AnimatedText lang={lang}>{t.hero.scrollHint}</AnimatedText>
          </span>
        </div>
      </div>

      <div className="fp-hero-marquee" aria-hidden="true">
        <div className="fp-marquee-track">
          {Array.from({ length: 4 }).map((_, i) => (
            <span key={i} className="fp-marquee-group">
              <span>UX writing</span><i>·</i>
              <span>email marketing</span><i>·</i>
              <span>content strategy</span><i>·</i>
              <span>EN / ES</span><i>·</i>
              <span>brand voice</span><i>·</i>
              <span>editorial</span><i>·</i>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ item, idx, lang, expanded, onToggle }) {
  return (
    <article
      className={'fp-svc' + (expanded ? ' is-open' : '')}
      onClick={onToggle}
      style={{ '--svc-i': idx }}
    >
      <div className="fp-svc-row">
        <span className="fp-svc-n">{item.n}</span>
        <div className="fp-svc-head">
          <h3 className="fp-svc-title">
            <AnimatedText lang={lang}>{item.title}</AnimatedText>
          </h3>
          <p className="fp-svc-tag">
            <AnimatedText lang={lang}>{item.tagline}</AnimatedText>
          </p>
        </div>
        <button className="fp-svc-toggle" aria-label="Toggle details" type="button"
                onClick={(e) => { e.stopPropagation(); onToggle(); }}>
          <span className="fp-svc-toggle-icon" data-open={expanded ? '1' : '0'}>
            <PlusMark size={14} />
          </span>
        </button>
      </div>

      <div className="fp-svc-body">
        <p className="fp-svc-body-text">
          <AnimatedText lang={lang}>{item.body}</AnimatedText>
        </p>
        <ul className="fp-svc-bullets">
          {item.bullets.map((b, i) => (
            <li key={i} style={{ '--li-i': i }}>
              <span className="fp-svc-bullet-dot" />
              <AnimatedText lang={lang}>{b}</AnimatedText>
            </li>
          ))}
        </ul>
      </div>
    </article>
  );
}

function Services({ t, lang }) {
  const [openIdx, setOpenIdx] = useState(0);

  return (
    <section id="services" className="fp-section fp-services" data-screen-label="Services">
      <header className="fp-section-head">
        <span className="fp-kicker">
          <span className="fp-kicker-line" />
          <AnimatedText lang={lang}>
            {lang === 'en' ? 'Services' : 'Servicios'}
          </AnimatedText>
        </span>
        <h2 className="fp-h2-section">
          <AnimatedText lang={lang}>{t.services.h2}</AnimatedText>
        </h2>
        <p className="fp-section-intro">
          <AnimatedText lang={lang}>{t.services.intro}</AnimatedText>
        </p>
      </header>

      <div className="fp-svc-list">
        {t.services.items.map((it, i) => (
          <ServiceCard key={i} item={it} idx={i} lang={lang}
                       expanded={openIdx === i}
                       onToggle={() => setOpenIdx(openIdx === i ? -1 : i)} />
        ))}
      </div>
    </section>
  );
}

function About({ t, lang }) {
  return (
    <section id="about" className="fp-section fp-about" data-screen-label="About">
      <header className="fp-section-head">
        <span className="fp-kicker">
          <span className="fp-kicker-line" />
          <AnimatedText lang={lang}>
            {lang === 'en' ? 'About' : 'Sobre mí'}
          </AnimatedText>
        </span>
      </header>

      <div className="fp-about-grid">
        <div className="fp-about-copy">
          <h2 className="fp-h2-section fp-about-h2">
            <AnimatedText lang={lang}>{t.about.h2}</AnimatedText>
          </h2>
          <p className="fp-about-lead">
            <AnimatedText lang={lang}>{t.about.lead}</AnimatedText>
          </p>
          <p className="fp-about-body">
            <AnimatedText lang={lang}>{t.about.body}</AnimatedText>
          </p>

          <div className="fp-bilingual">
            <div className="fp-bilingual-mark" aria-hidden="true">
              <span>EN</span>
              <i />
              <span>ES</span>
            </div>
            <h3 className="fp-bilingual-title">
              <AnimatedText lang={lang}>{t.about.bilingualTitle}</AnimatedText>
            </h3>
            <p className="fp-bilingual-sub">
              <AnimatedText lang={lang}>{t.about.bilingualSub}</AnimatedText>
            </p>
            <p className="fp-bilingual-body">
              <AnimatedText lang={lang}>{t.about.bilingualBody}</AnimatedText>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact({ t, lang }) {
  const [copied, setCopied] = useState(false);
  const copy = () => {
    navigator.clipboard?.writeText(t.contact.email);
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  };

  return (
    <section id="contact" className="fp-section fp-contact" data-screen-label="Contact">
      <div className="fp-contact-motif" aria-hidden="true">
        <FPMark size={420} accent="var(--accent-bright)" ink="rgba(255,255,255,0.55)" style={{ opacity: 0.7 }} />
      </div>

      <div className="fp-contact-inner">
        <span className="fp-kicker fp-kicker-light">
          <span className="fp-kicker-line" />
          <AnimatedText lang={lang}>
            {lang === 'en' ? 'Contact' : 'Contacto'}
          </AnimatedText>
        </span>

        <h2 className="fp-contact-h2">
          <AnimatedText lang={lang} as="span">{t.contact.h2Pre}</AnimatedText>{' '}
          <AnimatedText lang={lang} as="em" className="fp-contact-em">{t.contact.h2Em}</AnimatedText>
        </h2>

        <p className="fp-contact-body">
          <AnimatedText lang={lang}>{t.contact.body}</AnimatedText>
        </p>

        <div className="fp-contact-actions">
          <a href={`mailto:${t.contact.email}`} className="fp-btn fp-btn-cream">
            <AnimatedText lang={lang}>{t.contact.cta}</AnimatedText>
            <ArrowRight size={18} />
          </a>
          <button type="button" className="fp-email-pill" onClick={copy}>
            <span className="fp-email-pill-label">{t.contact.email}</span>
            <span className="fp-email-pill-cta">
              {copied
                ? (lang === 'en' ? 'Copied' : 'Copiado')
                : (lang === 'en' ? 'Copy' : 'Copiar')}
            </span>
          </button>
        </div>
      </div>
    </section>
  );
}

function Footer({ t, lang }) {
  return (
    <footer className="fp-footer">
      <div className="fp-footer-top">
        <div className="fp-footer-brand">
          <FPMark size={32} mode="tight" accent="var(--accent-bright)" />
          <div>
            <div className="fp-footer-brand-name">Falta Palta</div>
            <div className="fp-footer-brand-tag">
              <AnimatedText lang={lang}>{t.footer.tag}</AnimatedText>
            </div>
          </div>
        </div>
        <div className="fp-footer-cols">
          <div className="fp-footer-col">
            <div className="fp-footer-col-h">
              <AnimatedText lang={lang}>{t.footer.colA}</AnimatedText>
            </div>
            <a href="#services">{t.footer.links.services}</a>
            <a href="#about">{t.footer.links.about}</a>
          </div>
          <div className="fp-footer-col">
            <div className="fp-footer-col-h">
              <AnimatedText lang={lang}>{t.footer.colB}</AnimatedText>
            </div>
            <a href="http://linkedin.com/in/florenciasheelo" target="_blank" rel="noopener noreferrer">{t.footer.links.linkedin}</a>
          </div>
          <div className="fp-footer-col">
            <div className="fp-footer-col-h">
              <AnimatedText lang={lang}>{t.footer.colC}</AnimatedText>
            </div>
            <a href={`mailto:${t.footer.links.email}`}>{t.footer.links.email}</a>
          </div>
        </div>
      </div>
      <div className="fp-footer-bottom">
        <span>{t.footer.copyright}</span>
      </div>
    </footer>
  );
}

Object.assign(window, {
  AnimatedText, Nav, Hero, Services, About, Contact, Footer,
});