export function ProfilePage({ content }) {
  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://robertseares.com";
  const pageUrl = new URL(content.locale === "pt" ? "/pt/" : "/", siteUrl).toString();
  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "Person",
        "@id": `${siteUrl}/#person`,
        name: "Robert Seares",
        url: siteUrl,
        jobTitle: [
          content.locale === "pt" ? "Engenheiro de software" : "Software Engineer",
          content.locale === "pt" ? "Lider de engenharia" : "Engineering Leader",
          "Founder",
          content.locale === "pt" ? "Builder de produto" : "Product Builder",
        ],
        homeLocation: {
          "@type": "Place",
          name: "Sao Paulo, Brazil",
        },
        worksFor: {
          "@type": "Organization",
          name: "Ark Biotech",
        },
        knowsAbout: [
          "Artificial Intelligence",
          "Biotechnology",
          "Cloud Infrastructure",
          "Distributed Systems",
          "Developer Platforms",
          "Product Engineering",
          "Automation",
          "Python",
          "TypeScript",
          "Kubernetes",
          "FastAPI",
          "React",
          "PostgreSQL",
        ],
        knowsLanguage: ["English", "Portuguese"],
        description: content.hero.intro,
      },
      {
        "@type": "WebSite",
        "@id": `${siteUrl}/#website`,
        name: "Robert Seares",
        url: siteUrl,
        inLanguage: ["en", "pt-BR"],
        publisher: {
          "@id": `${siteUrl}/#person`,
        },
      },
      {
        "@type": "ProfilePage",
        "@id": `${pageUrl}#webpage`,
        url: pageUrl,
        name: content.hero.title,
        headline: content.hero.lede,
        description: content.hero.intro,
        inLanguage: content.htmlLang,
        isPartOf: {
          "@id": `${siteUrl}/#website`,
        },
        about: {
          "@id": `${siteUrl}/#person`,
        },
      },
    ],
  };

  return (
    <main lang={content.htmlLang}>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />

      <section
        className="hero"
        id="top"
        style={{ "--hero-image": `url("${content.images.hero}")` }}
      >
        <div className="hero-panel">
          <p className="eyebrow">{content.hero.eyebrow}</p>
          <h1>{content.hero.title}</h1>
          <p className="lede">{content.hero.lede}</p>
          <p className="intro">{content.hero.intro}</p>
        </div>
      </section>

      <section className="stats-strip" aria-label={content.statsAria}>
        {content.stats.map(([value, label]) => (
          <div key={label}>
            <strong>{value}</strong>
            <span>{label}</span>
          </div>
        ))}
      </section>

      <section className="section intro-section" id="work">
        <div className="section-kicker">
          <p className="eyebrow">{content.work.eyebrow}</p>
          <h2>{content.work.title}</h2>
        </div>
        <div className="large-copy">
          {content.work.paragraphs.map((paragraph) => (
            <p key={paragraph}>{paragraph}</p>
          ))}
        </div>
      </section>

      <section className="timeline-section">
        <div className="timeline">
          {content.chapters.map((chapter) => (
            <article key={chapter.title}>
              <span>{chapter.label}</span>
              <div>
                <h3>{chapter.title}</h3>
                <p>{chapter.body}</p>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="question-band">
        <div>
          <p className="eyebrow">{content.question.eyebrow}</p>
          <h2>{content.question.title}</h2>
          <p>{content.question.body}</p>
        </div>
      </section>

      <section className="section focus-section">
        <div className="section-kicker">
          <p className="eyebrow">{content.focus.eyebrow}</p>
          <h2>{content.focus.title}</h2>
        </div>
        <div>
          <p className="large-copy compact">{content.focus.body}</p>
          <div className="pill-grid">
            {content.focus.areas.map((area) => (
              <span key={area}>{area}</span>
            ))}
          </div>
        </div>
      </section>

      <section className="beliefs" id="philosophy">
        <article className="belief-primary">
          <p className="eyebrow">{content.philosophy.eyebrow}</p>
          <h2>{content.philosophy.title}</h2>
          <p>{content.philosophy.body}</p>
        </article>
        <article className="belief-list">
          <p className="eyebrow">{content.philosophy.valuesEyebrow}</p>
          <ul>
            {content.philosophy.values.map((value) => (
              <li key={value}>{value}</li>
            ))}
          </ul>
        </article>
      </section>

      <section className="section building">
        <div className="build-copy">
          <p className="eyebrow">{content.building.eyebrow}</p>
          <h2>{content.building.title}</h2>
        </div>
        <div className="large-copy">
          {content.building.paragraphs.map((paragraph) => (
            <p key={paragraph}>{paragraph}</p>
          ))}
        </div>
      </section>

      <section
        className="life-band"
        style={{ "--life-image": `url("${content.images.life}")` }}
      >
        <div>
          <p className="eyebrow">{content.life.eyebrow}</p>
          <h2>{content.life.title}</h2>
        </div>
        <p>{content.life.body}</p>
      </section>

      <section className="section interests" id="interests">
        <div className="section-kicker">
          <p className="eyebrow">{content.interests.eyebrow}</p>
          <h2>{content.interests.title}</h2>
        </div>
        <div className="interest-grid">
          {content.interests.items.map((interest) => (
            <span key={interest}>{interest}</span>
          ))}
        </div>
      </section>

      <section className="connect" id="connect">
        <p className="eyebrow">{content.connect.eyebrow}</p>
        <h2>{content.connect.title}</h2>
        <p>{content.connect.body}</p>
      </section>
    </main>
  );
}