// Why + Stats + Process + Projects
const Why = () => {
  const t = CONTENT.why;
  return (
    <section id="why" className="tight">
      <div className="container">
        <div className="section-head">
          <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>
        <div className="why-row">
          {t.items.map((it, i) => (
            <div key={it.t} className="why-item">
              <div className="why-num">0{i+1}</div>
              <h3>{it.t}</h3>
              <p>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Why = Why;

const Stats = () => (
  <div className="stats-wrap">
    <div className="container">
      <div className="stats-strip">
        {CONTENT.stats.map((s, i) => (
          <div key={i}>
            <div className={`stat-v ${s.accent ? 'accent' : ''}`}>{s.v}</div>
            <div className="stat-k">{s.k}</div>
          </div>
        ))}
      </div>
    </div>
  </div>
);
window.Stats = Stats;

const Process = () => {
  const t = CONTENT.process;
  return (
    <section id="process" className="tight" style={{ background: 'var(--bg-2)' }}>
      <div className="container">
        <div className="section-head">
          <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>
        <div className="proc-row">
          {t.steps.map((s, i) => (
            <div key={s.t} className="proc-step">
              <div className="proc-step-num">STEP 0{i+1}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Process = Process;

const Projects = () => {
  const t = CONTENT.projects;
  return (
    <section id="projects">
      <div className="container">
        <div className="section-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24, flexWrap: 'wrap' }}>
          <div>
            <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', margin: '8px 0 0' }}>{t.h}</h2>
          </div>
          <a href="#contact" className="btn btn-ghost btn-sm">{t.viewAll} →</a>
        </div>
        <div className="proj-grid">
          {t.items.map(p => (
            <a key={p.t} href="#contact" className="proj-card">
              <div className="proj-photo"><Photo label={p.label} /></div>
              <div className="proj-meta">
                <div className="proj-name">{p.t}</div>
                <div className="proj-cat">
                  {p.loc}<br/>
                  <span className="c-acc">{p.cat}</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Projects = Projects;

const Faq = () => {
  const t = CONTENT.faq;
  const [open, setOpen] = React.useState(null);
  return (
    <section id="faq" itemScope itemType="https://schema.org/FAQPage">
      <div className="container">
        <div className="section-head">
          <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', margin: '8px 0 0' }}>{t.h}</h2>
        </div>
        <div className="faq-list">
          {t.items.map((item, i) => (
            <div
              key={i}
              className={`faq-item${open === i ? ' faq-open' : ''}`}
              itemScope itemProp="mainEntity" itemType="https://schema.org/Question"
            >
              <button
                className="faq-q"
                aria-expanded={open === i}
                onClick={() => setOpen(open === i ? null : i)}
              >
                <span itemProp="name">{item.q}</span>
                <span className="faq-icon" aria-hidden="true">{open === i ? '−' : '+'}</span>
              </button>
              <div
                className="faq-a"
                itemScope itemProp="acceptedAnswer" itemType="https://schema.org/Answer"
                style={{ display: open === i ? 'block' : 'none' }}
              >
                <p itemProp="text">{item.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Faq = Faq;