// Sections: Services, About, Process, Stack, Marquee
const { useState: useS2, useEffect: useE2, useRef: useR2 } = React;

function Marquee({ items }) {
  const doubled = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {doubled.map((item, i) => (
          <React.Fragment key={i}>
            <div className="marquee-item">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M7 1L8.5 5.5L13 7L8.5 8.5L7 13L5.5 8.5L1 7L5.5 5.5L7 1Z" fill="currentColor"/>
              </svg>
              {item}
            </div>
            <div className="marquee-item"><span className="dot"></span></div>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function SectionHeader({ num, label, title, titleEm, subtitle }) {
  return (
    <div className="section-header">
      <div className="section-header-label">
        <span className="section-num">[ {num} ]</span>
        <span className="eyebrow">{label}</span>
      </div>
      <div>
        <h2 className="reveal">{title} <em className="serif">{titleEm}</em></h2>
        {subtitle && <p className="reveal" style={{ '--d': '100ms', maxWidth: '560px', marginTop: '20px', color: 'var(--fg-soft)', fontSize: '17px' }}>{subtitle}</p>}
      </div>
    </div>
  );
}

function Services({ t }) {
  return (
    <section id="services">
      <div className="container">
        <SectionHeader num={t.services.num} label={t.services.label} title={t.services.title} titleEm={t.services.titleEm} subtitle={t.services.subtitle} />
        <div className="services-grid reveal">
          {t.services.items.map((item, i) => (
            <div key={i} className="service">
              <div className="service-num">— {item.num}</div>
              <h3 className="service-title">{item.title} <em>{item.titleEm}</em></h3>
              <p className="service-desc">{item.desc}</p>
              <div className="service-tags">
                {item.tags.map((tag, j) => (
                  <span key={j} className="tag">{tag}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function About({ t }) {
  return (
    <section id="about">
      <div className="container">
        <div className="section-header">
          <div className="section-header-label">
            <span className="section-num">[ {t.about.num} ]</span>
            <span className="eyebrow">{t.about.label}</span>
          </div>
          <div></div>
        </div>

        <div className="about-grid">
          <div>
            <div className="about-text reveal">
              <p><em>{t.about.p1[0]}</em> {t.about.p1[1]}</p>
              <p>{t.about.p2[0]} <em>{t.about.p2[1]}</em>{t.about.p2[2]}</p>
            </div>

            <div className="about-stats reveal" style={{ '--d': '200ms' }}>
              {t.about.stats.map((s, i) => (
                <div key={i} className="stat">
                  <div className="stat-num">{s.num}<em>{s.suffix}</em></div>
                  <div className="stat-label">{s.label}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="about-portrait reveal" style={{ '--d': '300ms' }}>
            <div className="portrait-card">
              <img className="portrait-photo" src="assets/portrait.jpg" alt="Luís Mendes" />
              <div className="portrait-label">
                <span>{t.about.portrait_label}</span>
                <span>{t.about.portrait_id}</span>
              </div>
              <div className="portrait-caption">"{t.about.portrait_caption}"</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Process({ t }) {
  return (
    <section id="process">
      <div className="container">
        <SectionHeader num={t.process.num} label={t.process.label} title={t.process.title} titleEm={t.process.titleEm} subtitle={t.process.subtitle} />
        <div className="process-list">
          {t.process.items.map((item, i) => (
            <div key={i} className="process-item reveal" style={{ '--d': `${i * 80}ms` }}>
              <div className="process-num">{item.num}</div>
              <h3 className="process-title">{item.title}</h3>
              <p className="process-desc">{item.desc}</p>
              <div className="process-output">
                <span className="process-output-label">Entregáveis</span>
                <div className="process-output-items">
                  {item.outputs.map((o, j) => <span key={j} className="tag">{o}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StackIcon({ name }) {
  const icons = {
    'Figma': <svg viewBox="0 0 24 24" fill="none" width="24" height="24"><path d="M8 2h4v6H8a3 3 0 010-6z" fill="currentColor" opacity="0.9"/><path d="M12 2h4a3 3 0 010 6h-4V2z" fill="currentColor" opacity="0.7"/><path d="M12 8h4a3 3 0 010 6h-4V8z" fill="currentColor" opacity="0.5"/><path d="M8 8h4v6H8a3 3 0 010-6z" fill="currentColor" opacity="0.8"/><path d="M8 14h4v4a3 3 0 11-3-3" stroke="currentColor" strokeWidth="2" fill="none"/></svg>,
    'HTML / CSS': <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M4 3l1.5 17L12 22l6.5-2L20 3H4z"/><path d="M8 9h8M8 13h6"/></svg>,
    'JavaScript': <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M10 10v6a2 2 0 01-3 1M14 10v5a2 2 0 002 2h1"/></svg>,
    'React': <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="12" r="1.5" fill="currentColor"/><ellipse cx="12" cy="12" rx="10" ry="4"/><ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(60 12 12)"/><ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(120 12 12)"/></svg>,
    'WordPress': <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M9 3c-2 3-2 15 0 18M15 3c2 3 2 15 0 18"/></svg>,
    'Framer': <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M6 3h12v6H12l6 6H6v-6h6L6 3z"/></svg>,
    'Webflow': <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 7l3 10 3-10 3 10 3-10 3 10 3-10"/></svg>,
    'Notion': <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="4" y="3" width="16" height="18" rx="1"/><path d="M8 7v10M16 7l-8 10"/></svg>,
  };
  return icons[name] || <div style={{ width: 24, height: 24, background: 'var(--accent)', borderRadius: 6 }}></div>;
}

function Stack({ t }) {
  return (
    <section id="stack">
      <div className="container">
        <SectionHeader num={t.stack.num} label={t.stack.label} title={t.stack.title} titleEm={t.stack.titleEm} subtitle={t.stack.subtitle} />
        <div className="stack-wrapper reveal">
          <div className="stack-grid">
            {t.stack.items.map((item, i) => (
              <div key={i} className="stack-item">
                <div className="stack-icon"><StackIcon name={item.name} /></div>
                <div className="stack-name">{item.name}</div>
                <div className="stack-desc">{item.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services, About, Process, Stack, Marquee, SectionHeader });