/* eslint-disable */
// Build / Apply / Tools / Learn sections. Redesigned 2026-09: no fake tracker
// with named companies, no invented "340+ guides" — plain content, real
// numbers, and MiniResume (from landing-hero.jsx) for the one place a
// picture earns its place: showing the range of templates.

// ───────────────────────────────────────────────────────────────────────────────
// BUILD — the templates, shown as themselves.
function BuildSection() {
  const templates = [
    { name: "Modern",    accent: "#5E5CE6", header: "band" },
    { name: "Executive", accent: "#1F2933", header: "rule" },
    { name: "Classic",   accent: "#0F1216", header: "centered", serif: true },
    { name: "Creative",  accent: "#C2620F", header: "band" },
    { name: "Compact",   accent: "#334155", header: "plain" },
    { name: "Standard",  accent: "#0B1220", header: "centered" },
  ];
  const points = [
    "19 templates — pick one that fits the role, switch any time without retyping a word.",
    "Upload a résumé you already have and it keeps its own format — typeface, colors, layout — not a generic reset.",
    "Every bullet gets an AI rewrite: tighter, quantified, in your own voice, not a buzzword swap.",
    "Colors, section order, and page length are yours to adjust — export to PDF or a real Word file either way.",
  ];
  return (
    <section id="build" style={{ padding: "100px 0", background: "var(--paper)" }}>
      <div className="container">
        <div className="build-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
          <div className="reveal">
            <div className="eye" style={{ marginBottom: 14, color: "var(--indigo)" }}>01 · BUILD</div>
            <h2 style={{ margin: "0 0 18px", fontSize: "clamp(30px, 3.6vw, 44px)", lineHeight: 1.08, letterSpacing: "-0.026em", fontWeight: 700 }}>
              Nineteen templates.<br /><span className="ed" style={{ fontWeight: 500, color: "var(--indigo)" }}>All ATS-readable.</span>
            </h2>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
              {points.map((p, i) => (
                <li key={i} style={{ display: "flex", gap: 12, fontSize: 15.5, lineHeight: 1.55, color: "var(--ink-2)" }}>
                  <span style={{ width: 20, height: 20, borderRadius: 999, background: "var(--indigo-soft)", color: "var(--indigo)", display: "grid", placeItems: "center", flexShrink: 0, marginTop: 2 }}>
                    {LI.check}
                  </span>
                  {p}
                </li>
              ))}
            </ul>
          </div>
          <div className="reveal template-strip" style={{ position: "relative", height: 380 }}>
            {templates.map((t, i) => (
              <div key={t.name} className="template-card" style={{
                position: "absolute",
                left: `${(i % 3) * 34}%`,
                top: `${Math.floor(i / 3) * 52}%`,
                transform: `rotate(${[-4, 3, -2, 4, -3, 2][i]}deg)`,
                zIndex: i,
                transitionDelay: `${i * 60}ms`,
              }}>
                <MiniResume name="Priya Raman" headline="Senior Backend Engineer" accent={t.accent} header={t.header} serif={t.serif} width={190} scale={0.62} />
                <div style={{ textAlign: "center", marginTop: 8, fontSize: 12, fontWeight: 600, color: "var(--fg-3)" }}>{t.name}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        .template-card { transition: transform 300ms cubic-bezier(0.2,0,0,1), z-index 0s; }
        .template-card:hover { transform: rotate(0deg) scale(1.06) !important; z-index: 10 !important; }
        @media (max-width: 900px) {
          .build-grid { grid-template-columns: 1fr !important; }
          .template-strip { height: 280px !important; }
        }
        @media (prefers-reduced-motion: reduce) { .template-card { transition: none; } }
      `}</style>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────────────────────
// APPLY — the real job sources, listed plainly, plus the tracker in one line.
function ApplySection() {
  const sources = [
    ["Adzuna", "var(--indigo)"], ["USAJOBS", "var(--sky)"], ["RemoteOK", "var(--rose)"], ["Remotive", "var(--mint)"],
    ["Arbeitnow", "var(--amber)"], ["Jobicy", "var(--violet)"], ["Greenhouse", "var(--forest)"], ["Lever", "var(--indigo)"],
    ["Ashby", "var(--rose)"], ["SmartRecruiters", "var(--sky)"],
  ];
  return (
    <section id="apply" style={{ padding: "100px 0", background: "var(--paper-2)" }}>
      <div className="container">
        <div className="reveal" style={{ maxWidth: 680, marginBottom: 44 }}>
          <div className="eye" style={{ marginBottom: 14, color: "var(--rose)" }}>02 · APPLY</div>
          <h2 style={{ margin: "0 0 18px", fontSize: "clamp(30px, 3.6vw, 44px)", lineHeight: 1.08, letterSpacing: "-0.026em", fontWeight: 700 }}>
            Ten job boards.<br /><span className="ed" style={{ fontWeight: 500, color: "var(--rose)" }}>One search.</span>
          </h2>
          <p style={{ fontSize: 16.5, lineHeight: 1.6, color: "var(--ink-2)" }}>
            Search by keyword, company, or a pasted job description. Every result is scored against your résumé, so
            you see fit before you spend time tailoring. Save a role and it lands in the tracker — apply, interview,
            offer — with a nudge if something's gone quiet.
          </p>
        </div>
        <div className="reveal source-grid" style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
          {sources.map(([name, c]) => (
            <div key={name} style={{
              display: "flex", alignItems: "center", gap: 10,
              padding: "14px 16px", borderRadius: 12,
              background: "#fff", border: "1px solid var(--line)",
            }}>
              <span style={{ width: 26, height: 26, borderRadius: 8, background: c, color: "#fff", fontSize: 12, fontWeight: 800, display: "grid", placeItems: "center", flexShrink: 0 }}>{name[0]}</span>
              <span style={{ fontSize: 14, fontWeight: 600, color: "var(--ink)" }}>{name}</span>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 860px) { .source-grid { grid-template-columns: repeat(3, 1fr) !important; } }
        @media (max-width: 560px) { .source-grid { grid-template-columns: repeat(2, 1fr) !important; } }
      `}</style>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────────────────────
// TOOLS — the 15 tools, as a plain labelled grid. No screenshots needed.
function ToolsSection() {
  const tools = [
    [LI.doc, "New résumé", "From scratch or a template."],
    [LI.download, "Import existing", "PDF, DOCX, or a photo — keeps its format."],
    [LI.trendUp, "ATS scanner", "Score against any job posting."],
    [LI.message, "Cover letter", "Drafted in your voice, one click."],
    [LI.pen, "AI rewriter", "Re-phrase a section in plain English."],
    [LI.layers, "Compare résumés", "Side-by-side diff with highlights."],
    [LI.mic, "Interview prep", "~50 likely questions with model answers."],
    [LI.sparkle, "Interview Coach", "A live mock interview — text or voice."],
    [LI.linkedin, "LinkedIn Optimizer", "Headline, About, and experience, reformatted."],
    [LI.target, "AI Résumé Review", "Section-by-section critique, fixes in one click."],
    [LI.graduation, "Certifications & Training", "Ranked certs and courses for the gap."],
    [LI.chart, "Salary Insights", "Comp bands and a negotiation script."],
    [LI.send, "Outreach & Networking", "Warm-intro sequences, tracked."],
    [LI.briefcase, "Application tracker", "Every résumé you sent, in one board."],
    [LI.bookOpen, "Career library", "Guides and courses, growing every week."],
  ];
  return (
    <section id="tools" style={{ padding: "100px 0", background: "var(--paper)" }}>
      <div className="container">
        <div className="reveal" style={{ textAlign: "center", maxWidth: 640, marginInline: "auto", marginBottom: 48 }}>
          <div className="eye" style={{ marginBottom: 14, color: "var(--amber)" }}>03 · TOOLS</div>
          <h2 style={{ margin: "0 0 14px", fontSize: "clamp(30px, 3.6vw, 44px)", lineHeight: 1.08, letterSpacing: "-0.026em", fontWeight: 700 }}>
            Fifteen tools, <span className="ed" style={{ fontWeight: 500, color: "var(--amber)" }}>one résumé brain.</span>
          </h2>
          <p style={{ fontSize: 16.5, lineHeight: 1.6, color: "var(--ink-2)" }}>
            Everything reads the same résumé, so a change in one place shows up everywhere else.
          </p>
        </div>
        <div className="reveal tools-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
          {tools.map(([icon, name, desc], i) => (
            <div key={name} style={{
              display: "flex", gap: 14, padding: "18px 20px", borderRadius: 14,
              background: "var(--paper-2)", border: "1px solid var(--line)",
            }}>
              <span style={{ width: 36, height: 36, borderRadius: 10, background: "#fff", color: "var(--indigo)", display: "grid", placeItems: "center", flexShrink: 0 }}>{icon}</span>
              <div>
                <div style={{ fontSize: 14.5, fontWeight: 700, marginBottom: 3 }}>{name}</div>
                <div style={{ fontSize: 13, color: "var(--fg-3)", lineHeight: 1.45 }}>{desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .tools-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 560px) { .tools-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────────────────────
// LEARN — kept short and honest: no invented library size.
function LearnSection() {
  return (
    <section id="learn" style={{ padding: "80px 0", background: "var(--paper-2)" }}>
      <div className="container" style={{ display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap", justifyContent: "space-between" }}>
        <div className="reveal" style={{ maxWidth: 560 }}>
          <div className="eye" style={{ marginBottom: 10, color: "var(--mint)" }}>04 · LEARN</div>
          <h3 style={{ margin: "0 0 8px", fontSize: 26, fontWeight: 700, letterSpacing: "-0.02em" }}>A career library, built in.</h3>
          <p style={{ margin: 0, fontSize: 15.5, color: "var(--ink-2)", lineHeight: 1.55 }}>
            Guides, cheat sheets, and short courses on résumés, interviews, negotiation, and switching tracks — free with any plan, growing every week.
          </p>
        </div>
        <a href="/login" className="btn-ghost" style={{ border: "1.5px solid var(--ink)", flexShrink: 0 }}>
          Browse the library {LI.arrowRight}
        </a>
      </div>
    </section>
  );
}

Object.assign(window, { BuildSection, ApplySection, ToolsSection, LearnSection });