// All site sections

const renderRich = (parts) => {
  if (typeof parts === "string") return parts;
  if (!Array.isArray(parts)) return parts;
  return parts.map((p, i) => {
    if (typeof p === "string") return <React.Fragment key={i}>{p}</React.Fragment>;
    if (p && p.em) return <em key={i}>{p.em}</em>;
    return null;
  });
};

// ---------- Nav ----------
function Nav({ c, lang, setLang }) {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#" className="nav-brand">
          <span className="nav-brand-mark">PX</span>
          <span>pxadv<span style={{ color: "var(--fg-mute)" }}>.advocacia</span></span>
        </a>
        <div className="nav-links">
          {c.nav.links.map(l => (
            <a key={l.label} href={l.href} data-n={l.n}>{l.label}</a>
          ))}
        </div>
        <div className="nav-cta">
          <button
            className="lang-toggle"
            onClick={() => setLang(lang === "pt" ? "en" : "pt")}
          >
            <span className={lang === "pt" ? "active" : ""}>PT</span>
            <span style={{ color: "var(--fg-mute)" }}>/</span>
            <span className={lang === "en" ? "active" : ""}>EN</span>
          </button>
          <a href="#contato" className="btn btn-ghost" style={{ padding: "8px 14px", fontSize: 11 }}>
            {c.nav.cta} <span className="btn-arrow">→</span>
          </a>
        </div>
      </div>
    </nav>
  );
}

// ---------- Ticker ----------
function Ticker({ items }) {
  // duplicate for seamless loop
  const all = [...items, ...items];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {all.map((it, i) => (
          <span key={i} className="ticker-item">
            {it.dot && <span className="dot"></span>}
            <span>{it.label}</span>
            <b>{it.val}</b>
            <span style={{ color: "var(--fg-mute)", opacity: 0.4 }}>·</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ---------- Hero ----------
function Hero({ c, lang }) {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-meta">
          {c.hero.meta.map((m, i) => (
            <div key={i}>
              <span>{m.k}</span>
              <b>{m.v}</b>
            </div>
          ))}
        </div>

        <div className="hero-grid">
          <div>
            <h1 className="hero-title">
              {c.hero.title[0]}<br />
              <em>{c.hero.title[1]}</em><br />
              {c.hero.title[2]}<br />
              {c.hero.title[3]}
              <span className="crosshair" aria-hidden="true"></span>
            </h1>
            <p className="hero-sub">{c.hero.sub}</p>
            <div className="hero-ctas">
              <a href="#contato" className="btn">{c.hero.ctaPrimary} <span className="btn-arrow">→</span></a>
              <a href="#areas" className="btn btn-ghost">{c.hero.ctaSecondary}</a>
            </div>
          </div>

          <Terminal script={c.terminal} lang={lang} />
        </div>

        <div className="hero-strip">
          {c.hero.strip.map((s, i) => (
            <span key={i}>{s.k} <b>{s.v}</b></span>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Section head ----------
function SectionHead({ label, title, sub }) {
  return (
    <div className="section-head">
      <div className="section-label">{label}</div>
      <div>
        <h2 className="section-title">{renderRich(title)}</h2>
        {sub && <p style={{ color: "var(--fg-dim)", marginTop: 18, fontSize: 15, maxWidth: "52ch" }}>{sub}</p>}
      </div>
    </div>
  );
}

// ---------- Areas ----------
function Areas({ c }) {
  return (
    <section className="section" id="areas">
      <div className="container">
        <SectionHead label={c.areas.label} title={c.areas.title} />
        <div className="areas">
          {c.areas.items.map((a, i) => (
            <article key={i} className="area">
              <div className="area-head">
                <span>{a.tag}</span>
                <span className="area-tag">{a.status}</span>
              </div>
              <h3 className="area-title">{renderRich(a.title)}</h3>
              <p className="area-desc">{a.desc}</p>
              <ul className="area-list">
                {a.list.map((it, j) => (
                  <li key={j} className="area-list-item" data-i={String(j + 1).padStart(2, "0")}>
                    {it}
                  </li>
                ))}
              </ul>
              <span className="area-arrow">→</span>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Cases ----------
function Cases({ c }) {
  return (
    <section className="section" id="cases">
      <div className="container">
        <SectionHead label={c.cases.label} title={c.cases.title} sub={c.cases.sub} />
        <div className="cases-wrap">
          <div className="case-table">
            {c.cases.rows.map((r, i) => (
              <div key={i} className="case-row">
                <span className="case-num">{r.n}</span>
                <h3 className="case-headline">{renderRich(r.headline)}</h3>
                <span className="case-tag">{r.tag}</span>
                <span className="case-metric">{r.metric}<small>{r.metricLabel}</small></span>
              </div>
            ))}
          </div>
          <aside className="cases-side">
            <div className="cases-side-title">{c.cases.side.title}</div>
            {c.cases.side.stats.map((s, i) => (
              <div key={i} className="cases-stat">
                <span style={{ textTransform: "uppercase", fontSize: 10, letterSpacing: "0.08em", color: "var(--fg-mute)" }}>{s.k}</span>
                <span className="cases-stat-val">{s.v}</span>
              </div>
            ))}
          </aside>
        </div>
      </div>
    </section>
  );
}

// ---------- Insights ----------
function Insights({ c }) {
  return (
    <section className="section" id="insights">
      <div className="container">
        <SectionHead label={c.insights.label} title={c.insights.title} sub={c.insights.sub} />
        <div className="insights">
          {c.insights.items.map((it, i) => (
            <article key={i} className="insight">
              <div className="insight-meta">
                <span className="insight-cat">// {it.cat}</span>
                <span>{it.date}</span>
              </div>
              <h3 className="insight-title">{renderRich(it.title)}</h3>
              <div className="insight-foot">
                <span>{it.tag}</span>
                <span>{it.read} →</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Contact ----------
function Contact({ c }) {
  const [submitted, setSubmitted] = useState(false);
  return (
    <section className="section" id="contato">
      <div className="container">
        <SectionHead label={c.contact.label} title={c.contact.title} sub={c.contact.sub} />
        <div className="contact">
          <div className="contact-info">
            {c.contact.blocks.map((b, i) => (
              <div key={i} className="contact-block">
                <div className="contact-block-label">{b.k}</div>
                <div className="contact-block-val" style={{ color: b.accent ? "var(--accent)" : undefined }}>
                  {b.href ? <a href={b.href}>{b.v}</a> : b.v}
                </div>
              </div>
            ))}
          </div>

          <form className="contact-form" onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
            <div className="contact-form-head">
              <span>{c.contact.form.head}</span>
              <span className="ok">{c.contact.form.ok}</span>
            </div>

            <div className="field-row">
              <div className="field">
                <label>{c.contact.form.fields.name}</label>
                <input type="text" placeholder="—" required />
              </div>
              <div className="field">
                <label>{c.contact.form.fields.email}</label>
                <input type="email" placeholder="—" required />
              </div>
            </div>

            <div className="field-row">
              <div className="field">
                <label>{c.contact.form.fields.company}</label>
                <input type="text" placeholder="—" />
              </div>
              <div className="field">
                <label>{c.contact.form.fields.area}</label>
                <select>
                  {c.contact.form.areas.map((a, i) => <option key={i}>{a}</option>)}
                </select>
              </div>
            </div>

            <div className="field">
              <label>{c.contact.form.fields.message}</label>
              <textarea placeholder="—" rows="3" />
            </div>

            <button type="submit" className="btn">
              <span>{submitted ? "✓ ok" : c.contact.form.cta}</span>
              <span className="btn-arrow">{c.contact.form.ctaArrow}</span>
            </button>
          </form>
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer({ c, lang }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col">
            <div className="footer-big">PX<em style={{ fontStyle: "italic", color: "var(--accent)" }}>·</em>adv</div>
            <div style={{ marginTop: 16, color: "var(--fg-dim)" }}>{c.footer.big}</div>
            <a href="#contato" className="btn" style={{ marginTop: 20 }}>
              {lang === "pt" ? "Agendar" : "Book"} <span className="btn-arrow">→</span>
            </a>
          </div>
          {c.footer.cols.map((col, i) => (
            <div key={i} className="footer-col">
              <h4>{col.title}</h4>
              {col.links.map((l, j) => (
                <a key={j} href={l.href}>{l.label}</a>
              ))}
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          {c.footer.bottom.map((b, i) => <span key={i}>{b}</span>)}
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Ticker, Hero, Areas, Cases, Insights, Contact, Footer });