// Header (compact, sticky, English-only)
const Header = () => {
  return (
    <header className="topbar">
      <div className="container topbar-row">
        <a href="#" aria-label="Forgefix home" style={{ display: 'flex', alignItems: 'center' }}>
          <img src="assets/IMG_4834.svg" alt="Forgefix" style={{ height: 72, width: 'auto', display: 'block' }} />
        </a>

        <nav className="topbar-links" aria-label="Primary">
          {CONTENT.nav.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
        </nav>

        <div className="topbar-cta">
          <a href={`tel:${CONTENT.phoneTel}`} className="phone-link">
            <span className="label">Call</span>
            <strong>{CONTENT.phone}</strong>
          </a>
          <a href="#contact" className="btn btn-primary btn-sm">Get a Quote →</a>
        </div>
      </div>
    </header>
  );
};
window.Header = Header;

// Hero — compact, two-column, fits in ~one viewport
const Hero = () => {
  const t = CONTENT.hero;
  return (
    <section className="hero" id="top">
      <div className="hero-bg"><Photo label="hero villa luxury" eager style={{ width: '100%', height: '100%' }} /></div>
      <div className="container hero-inner">
        <div className="hero-copy">
          <div className="eyebrow"><span className="dot">●</span>{t.eyebrow}</div>
          <h1>{t.h1Pre} <em>{t.h1Em}</em></h1>
          <p className="lead">{t.sub}</p>
          <div className="hero-ctas">
            <a href="#contact" className="btn btn-primary btn-lg">{t.cta1} →</a>
            <a href={`tel:${CONTENT.phoneTel}`} className="btn btn-ghost btn-lg">{t.cta2}</a>
          </div>
          <div className="hero-trust">
            {t.trust.map((b, i) => (
              <div key={i}><strong>{b.v}</strong> · {b.k}</div>
            ))}
          </div>
        </div>
      </div>

      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div className="svc-strip">
          {CONTENT.services.items.map((s, i) => (
            <a key={s.name} href="#services">
              <span className="num">{String(i+1).padStart(2,'0')}</span>
              <span className="name">{s.name}</span>
              <span className="arrow">→</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Hero = Hero;

// Services
const Services = () => {
  const t = CONTENT.services;
  return (
    <section id="services" style={{ background: 'var(--bg-2)' }}>
      <div className="container">
        <div className="section-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 640 }}>
            <div className="eyebrow"><span className="dot">●</span>{t.eyebrow}</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3.5vw, 40px)', fontWeight: 600, lineHeight: 1.1, letterSpacing: '-0.01em' }}>{t.h}</h2>
          </div>
          <p style={{ maxWidth: 380, color: 'var(--ink-2)', margin: 0 }}>{t.sub}</p>
        </div>

        <div className="svc-grid">
          {t.items.map((s, i) => (
            <article key={s.name} className="svc-card">
              <div className="svc-card-head">
                <span className="svc-card-name">{s.name}</span>
                <span className="svc-card-num">0{i+1}</span>
              </div>
              <p>{s.desc}</p>
              <ul>
                {s.list.map(li => <li key={li}>{li}</li>)}
              </ul>
              <a href="#contact" className="req-link">Request this service →</a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Services = Services;