// CV section + Press kit + Newsletter + Footer

function CVSection({ tweaks }) {
  const skills = {
    "Languages": [
      ["Python", "ADV"],
      ["C++", "INT"],
      ["TypeScript", "INT"],
      ["C#", "INT"],
      ["SQL", "ADV"],
    ],
    "Infrastructure": [
      ["Microservices", "ADV"],
      ["Docker / Kubernetes (GKE)", "ADV"],
      ["Google Cloud Platform", "ADV"],
      ["CI/CD (Jenkins, GH Actions)", "ADV"],
      ["Redis / PostgreSQL", "INT"],
    ],
    "Game Dev": [
      ["Unreal Engine 5", "INT"],
      ["Event-Driven Architecture", "ADV"],
      ["Real-Time Systems", "INT"],
    ],
  };

  const skillBars = [
    ["Python", 95, "adv"], ["C++", 80, "int"], ["TypeScript", 70, "int"], ["SQL", 90, "adv"],
    ["Microservices", 90, "adv"], ["Kubernetes / GKE", 85, "adv"], ["GCP", 85, "adv"],
    ["CI/CD", 80, "adv"], ["Unreal Engine 5", 70, "int"], ["React", 60, "int"],
  ];

  const experience = [
    {
      date: "Feb 2023 — Present",
      role: "Senior Software Engineer",
      company: "Aper · Remote, Vancouver, BC",
      current: true,
      bullets: [
        ["Microservices Architecture:", "Decomposed a monolithic application into 7 independent containerized Python microservices. Achieved a 34% improvement in p95 latency and tripled throughput with zero downtime."],
        ["Performance Engineering:", "Architected an e-commerce benchmarking platform on GKE; sustained 3× seasonal traffic spikes while reducing p95 latency to 205ms."],
        ["Reliability & CI/CD:", "Modernized the release pipeline with Jenkins + Docker, parallel test sharding cut build times 54% (24m → 11m) and doubled deploy frequency."],
        ["System Integration:", "Built robust Python connectors for 3rd-party platforms, capturing 15+ real-time events per session for analytics."],
        ["Cost Optimization:", "Reduced infrastructure cost per 1,000 requests by 18% via auto-scaling and resource tuning."],
      ],
    },
    {
      date: "Jan 2021 — Jan 2023",
      role: "Software Engineer (Data Infrastructure)",
      company: "Aper · Remote, Mexico City",
      bullets: [
        ["Pipeline Engineering:", "Migrated legacy batch processes to Airflow, dropped failure rates 82% and runtime from 4h 45m to <1h."],
        ["Backend Optimization:", "Streaming ingestion services cut data availability latency from T+24h to T+30m, enabling near real-time fraud detection."],
        ["Code Quality:", "Refactored legacy SQL/Python into modular, testable components — measurable reduction in technical debt."],
      ],
    },
    {
      date: "2019 — 2020",
      role: "Jr. Software Developer / Analyst",
      company: "Nielsen · Mexico City",
      bullets: [
        ["Automation:", "Python + Scikit-learn scripts to automate manual statistical modeling — preparation time 3 days → 2 hours."],
      ],
    },
  ];

  return (
    <section className="section" id="cv" data-screen-label="04 CV">
      <div className="container">
        <div className="section-label"><span>04 / SYSTEM SPECS</span></div>
        <h2 className="section-title">The <em>engineer.</em></h2>
        <p className="section-sub">
          Five-plus years shipping production systems. Senior engineer at Aper by day, building Maple Marten by night.
        </p>

        <div className="cv-layout">
          <aside className="cv-aside">
            <p className="summary">
              Software engineer specialized in <em>highly reliable architectures</em>, low-latency systems, and the unglamorous plumbing that lets teams ship. Fluent in Python and C++, comfortable across the stack from kernel-adjacent to cloud-native.
            </p>

            <h3>Stack</h3>
            {tweaks && tweaks.skillStyle === "bars" ? (
              <div style={{ marginBottom: 32 }}>
                {skillBars.map(([name, pct, level]) => (
                  <div key={name} className="skill-bar-row">
                    <div className="skill-bar-row-top">
                      <span className="name">{name}</span>
                      <span className="pct">{pct}%</span>
                    </div>
                    <div className="skill-bar-track">
                      <div className="skill-bar-fill" style={{ transform: `scaleX(${pct/100})`, animationDuration: `${0.6 + pct/100 * 0.8}s` }} />
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              Object.entries(skills).map(([group, items]) => (
                <div key={group} className="skills-group">
                  <div className="skills-group-name">{group}</div>
                  <div className="skills-tags">
                    {items.map(([name, level]) => (
                      <span key={name} className={`skill-pill ${level === "ADV" ? "adv" : "int"}`}>
                        {name}
                        <span className="level">{level}</span>
                      </span>
                    ))}
                  </div>
                </div>
              ))
            )}

            <h3 style={{ marginTop: 32 }}>Education</h3>
            <div style={{ marginBottom: 16 }}>
              <div style={{ fontSize: 16, fontWeight: 600 }}>Computer Science Certificate</div>
              <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 12, color: "var(--fg-faint)", marginTop: 4 }}>Douglas College · 2025</div>
            </div>
            <div>
              <div style={{ fontSize: 16, fontWeight: 600 }}>B.S., Actuarial Science</div>
              <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 12, color: "var(--fg-faint)", marginTop: 4 }}>Universidad Anáhuac · 2022</div>
            </div>

            <a
              href="#"
              className="btn btn-amber"
              style={{ marginTop: 32 }}
              onClick={(e) => { e.preventDefault(); alert("Resume download — wire to /resume.pdf"); }}
            >
              ↓ Download Resume
            </a>
          </aside>

          <div>
            <h3 style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--fg-faint)", margin: "0 0 32px" }}>Experience</h3>
            <div className="timeline">
              {experience.map((exp, i) => (
                <div key={i} className={`tl-item ${exp.current ? "current" : ""}`}>
                  <div className="tl-date">{exp.date}</div>
                  <h4 className="tl-role">{exp.role}</h4>
                  <div className="tl-company">{exp.company}</div>
                  <ul className="tl-bullets">
                    {exp.bullets.map(([head, body], j) => (
                      <li key={j}><strong>{head}</strong> {body}</li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PressKitSection() {
  const [emailVal, setEmailVal] = React.useState("");
  const [subbed, setSubbed] = React.useState(false);

  return (
    <section className="section" id="press" data-screen-label="05 Press" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div className="section-label"><span>05 / FOR THE PRESS</span></div>
        <h2 className="section-title">Press &amp; <em>devlog.</em></h2>
        <p className="section-sub">Following along, writing about us, or just curious — start here.</p>

        <div className="press-kit">
          <div className="press-card">
            <h3>Studio fact sheet</h3>
            <ul className="press-card-list">
              <li><span className="key">FOUNDED</span><span className="val">2024</span></li>
              <li><span className="key">LOCATION</span><span className="val">Vancouver, BC</span></li>
              <li><span className="key">FOUNDER</span><span className="val">Martin Martin del Campo</span></li>
              <li><span className="key">TEAM</span><span className="val">Solo (for now)</span></li>
              <li><span className="key">ENGINE</span><span className="val">Unreal Engine 5</span></li>
              <li><span className="key">FIRST TITLE</span><span className="val">Loonie Trouble</span></li>
              <li><span className="key">PRESS</span><span className="val">press@martin2c51.com</span></li>
            </ul>
            <a href="#" className="btn btn-ghost" style={{ alignSelf: "flex-start", marginTop: 4 }}>
              Download press kit <span className="arrow">↓</span>
            </a>
          </div>
          <div className="press-card">
            <h3>What we make</h3>
            <p>
              Maple Marten is a one-engineer studio shipping handcrafted games with stubborn attention to systems. We care about how things feel under your hands — fair physics, honest difficulty, surprising humor.
            </p>
            <p>
              Inspirations on the wall: <em>Hyper Light Drifter, FTL, Slay the Spire, Don't Starve, Untitled Goose Game</em>.
            </p>
            <a href="contact.html" className="btn btn-ghost" style={{ alignSelf: "flex-start" }}>
              Get in touch <span className="arrow">→</span>
            </a>
          </div>
        </div>

        <div className="newsletter">
          <div>
            <h3>Subscribe to the <em>devlog.</em></h3>
            <p>Roughly monthly. Build notes, screenshots, the occasional rant about C++ build times. No spam, no AI summaries.</p>
          </div>
          <form
            className="newsletter-form"
            onSubmit={(e) => {
              e.preventDefault();
              if (!emailVal.includes("@")) return;
              setSubbed(true);
            }}
          >
            {subbed ? (
              <div style={{ flex: 1, padding: "14px 16px", background: "var(--moss)", color: "#fff", fontWeight: 600, fontSize: 14, borderRadius: 2 }}>
                ✓ You're in. See you in the inbox.
              </div>
            ) : (
              <>
                <input
                  className="newsletter-input"
                  type="email"
                  placeholder="you@studio.com"
                  value={emailVal}
                  onChange={(e) => setEmailVal(e.target.value)}
                  required
                />
                <button type="submit" className="btn btn-primary">Subscribe →</button>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" id="contact" data-screen-label="06 Contact">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand-block">
            <div className="ft-mark"><window.MartenMark size={64} animate={false} /></div>
            <h4>Maple Marten Studios</h4>
            <p>Vancouver, BC · A one-engineer studio building seriously fun things, slowly.</p>
            <div style={{ display: "flex", gap: 8, marginTop: 16 }}>
              <a href="mailto:martin2c51@gmail.com" className="btn btn-primary">Say hello →</a>
            </div>
          </div>
          <div className="footer-col">
            <h5>Studio</h5>
            <ul>
              <li><a href="games.html">Games</a></li>
              <li><a href="press.html">Press kit</a></li>
              <li><a href="press.html">Devlog</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Engineering</h5>
            <ul>
              <li><a href="cv.html#demos">Technical demos</a></li>
              <li><a href="cv.html">CV / Experience</a></li>
              <li><a href="#">Resume (PDF)</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Elsewhere</h5>
            <ul>
              <li><a href="mailto:martin2c51@gmail.com">Email</a></li>
              <li><a href="#">GitHub</a></li>
              <li><a href="#">LinkedIn</a></li>
              <li><a href="#">Bluesky</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 MAPLE MARTEN STUDIOS · ALL RIGHTS RESERVED</span>
          <span>BUILT WITH STUBBORN ATTENTION · 50.4452°N 123.7314°W</span>
        </div>
      </div>
    </footer>
  );
}

window.CVSection = CVSection;
window.PressKitSection = PressKitSection;
window.Footer = Footer;