/* Middle + lower sections of the Nubel landing page.
   Manifesto, How it works, Who it's for, For Employers, About, Final CTA, Footer */

// ---------- Manifesto strip (bold typographic moment) ----------
const Manifesto = ({ copy }) => (
  <section className="nb-section" style={{padding: "clamp(56px, 9vw, 128px) 0"}}>
    <div className="nb-wrap">
      <div style={{display:"flex", alignItems:"baseline", gap: 16, marginBottom: 32, color:"var(--fg-3)"}}>
        <span className="nb-mono" style={{fontSize:12, letterSpacing:"0.12em", textTransform:"uppercase"}}>/002 · what we believe</span>
        <span style={{flex:1, height:1, background:"var(--border-1)"}}/>
      </div>
      <h2 className="manifesto nb-balance" style={{margin: 0, maxWidth: 1180}}>
        Behind every resume,<br/>
        there's a <mark>person</mark>.<br/>
        Let's <mark>meet them</mark>.
      </h2>
      <p className="nb-body-lg nb-pretty" style={{color:"var(--fg-2)", maxWidth: 680, margin: "40px 0 0"}}>
        {copy.manifesto}
      </p>
    </div>
  </section>
);

// ---------- How it works ----------
const Step = ({ n, title, body, glyph }) => (
  <div style={{
    display:"grid", gridTemplateColumns:"auto 1fr auto", gap: 40,
    alignItems:"start", padding: "48px 0",
    borderTop:"1px solid var(--border-1)",
  }}>
    <div className="step-num">{n}</div>
    <div style={{paddingTop: 18}}>
      <h3 className="nb-h2 nb-balance" style={{margin:"0 0 12px", maxWidth: 540}}>{title}</h3>
      <p className="nb-body-lg" style={{color:"var(--fg-2)", margin: 0, maxWidth: 560}}>{body}</p>
    </div>
    <div className="step-glyph" style={{
      width: 88, height: 88, borderRadius: 20, background: "var(--bg-warm)",
      border:"1px solid var(--border-1)",
      display:"flex", alignItems:"center", justifyContent:"center",
      color: "var(--nubel-orange)", marginTop: 24,
    }}>
      <Icon name={glyph} size={32} stroke={1.9}/>
    </div>
  </div>
);

const HowItWorks = () => (
  <section className="nb-section" style={{background: "var(--bg-warm)"}}>
    <div className="nb-wrap">
      <div style={{display:"flex", alignItems:"baseline", gap: 16, marginBottom: 24, color:"var(--fg-3)"}}>
        <span className="nb-mono" style={{fontSize:12, letterSpacing:"0.12em", textTransform:"uppercase"}}>/003 · how it works</span>
        <span style={{flex:1, height:1, background:"var(--border-1)"}}/>
      </div>
      <h2 className="nb-display-md nb-balance" style={{margin:"0 0 24px", maxWidth: 820}}>
        Three steps. No resumes. No black holes.
      </h2>

      <div style={{borderBottom:"1px solid var(--border-1)"}}>
        <Step n="01" title="Answer a handful of short questions, on video."
          body="Pick a field, get a handful of interview-style prompts, record 2-minute answers. Re-record as many times as you like — we only send your best takes."
          glyph="video"/>
        <Step n="02" title="Land in a curated pool employers actually browse."
          body="Your profile sits alongside peers in Marketing, Design, Computer Science, and Data Analytics. Employers discover candidates by field, not keyword-matched resumes."
          glyph="users"/>
        <Step n="03" title="Get a Yes, Maybe, or pass — within days, not months."
          body="Real verdicts with real feedback loops. When an employer's interested, you go straight to a conversation — no application form, no black hole."
          glyph="check"/>
      </div>
    </div>
  </section>
);

// Field-specific decorative graphic
const FieldArt = ({ kind }) => {
  if (kind === "marketing") {
    // Concentric campaign rings + arrow
    return (
      <svg viewBox="0 0 200 120" fill="none" style={{width:"100%", height:"100%"}}>
        <defs>
          <linearGradient id="mkt-g" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#F35B04" stopOpacity="0.3"/>
            <stop offset="1" stopColor="#F35B04" stopOpacity="0"/>
          </linearGradient>
        </defs>
        {[...Array(5)].map((_,i) => (
          <circle key={i} cx="48" cy="60" r={10 + i*14} stroke="#0F084C" strokeWidth="1" opacity={0.55 - i*0.08} fill={i===0 ? "url(#mkt-g)" : "none"}/>
        ))}
        <circle cx="48" cy="60" r="5" fill="#F35B04"/>
        <path d="M70 56 L185 32" stroke="#0F084C" strokeWidth="1.5" strokeDasharray="3 3"/>
        <path d="M180 28 L188 30 L184 38" stroke="#F35B04" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
        <circle cx="155" cy="78" r="3" fill="#0F084C"/>
        <circle cx="120" cy="92" r="2" fill="#F35B04"/>
        <circle cx="170" cy="62" r="2" fill="#0F084C" opacity="0.5"/>
      </svg>
    );
  }
  if (kind === "design") {
    // Stacked geometric shapes
    return (
      <svg viewBox="0 0 200 120" fill="none" style={{width:"100%", height:"100%"}}>
        <rect x="22" y="22" width="68" height="68" rx="8" fill="#0F084C" opacity="0.92"/>
        <circle cx="120" cy="56" r="34" fill="#F35B04"/>
        <path d="M150 78 L185 78 L167.5 108 Z" fill="#0F084C" opacity="0.18" stroke="#0F084C" strokeWidth="1.2"/>
        <rect x="62" y="62" width="40" height="40" rx="6" fill="#fff" stroke="#0F084C" strokeWidth="1.4"/>
        <circle cx="82" cy="82" r="6" fill="#F35B04"/>
      </svg>
    );
  }
  if (kind === "cs") {
    // Code/terminal lines + node
    return (
      <svg viewBox="0 0 200 120" fill="none" style={{width:"100%", height:"100%"}}>
        <rect x="14" y="18" width="172" height="84" rx="10" fill="#0F084C"/>
        <circle cx="26" cy="30" r="2.5" fill="#F35B04"/>
        <circle cx="34" cy="30" r="2.5" fill="#fff" opacity="0.4"/>
        <circle cx="42" cy="30" r="2.5" fill="#fff" opacity="0.4"/>
        <rect x="26" y="44" width="50" height="3" rx="1.5" fill="#fff" opacity="0.5"/>
        <rect x="80" y="44" width="34" height="3" rx="1.5" fill="#F35B04"/>
        <rect x="32" y="56" width="80" height="3" rx="1.5" fill="#fff" opacity="0.4"/>
        <rect x="32" y="68" width="60" height="3" rx="1.5" fill="#fff" opacity="0.4"/>
        <rect x="96" y="68" width="44" height="3" rx="1.5" fill="#F35B04" opacity="0.7"/>
        <rect x="32" y="80" width="40" height="3" rx="1.5" fill="#fff" opacity="0.4"/>
        <circle cx="76" cy="81.5" r="3" fill="#F35B04"/>
        <rect x="84" y="80" width="34" height="3" rx="1.5" fill="#fff" opacity="0.6"/>
      </svg>
    );
  }
  if (kind === "data") {
    // Bar chart + trend line
    return (
      <svg viewBox="0 0 200 120" fill="none" style={{width:"100%", height:"100%"}}>
        <line x1="20" y1="100" x2="184" y2="100" stroke="#0F084C" strokeWidth="1" opacity="0.3"/>
        {[
          {x:32, h:32},{x:54, h:54},{x:76, h:42},{x:98, h:68},{x:120, h:50},{x:142, h:78},{x:164, h:62},
        ].map((b,i) => (
          <rect key={i} x={b.x} y={100-b.h} width="14" height={b.h} rx="3"
            fill={i===5 ? "#F35B04" : "#0F084C"} opacity={i===5 ? 1 : 0.85 - i*0.05}/>
        ))}
        <path d="M39 76 Q 60 60 83 76 T 127 56 T 171 42" stroke="#F35B04" strokeWidth="2" fill="none" strokeLinecap="round"/>
        <circle cx="171" cy="42" r="4" fill="#F35B04" stroke="#fff" strokeWidth="2"/>
      </svg>
    );
  }
  return null;
};

// ---------- Who it's for (4 fields) ----------
const FieldCard = ({ idx, title, copy, kind }) => (
  <div className="field-card">
    <div style={{display:"flex", justifyContent:"space-between", alignItems:"flex-start"}}>
      <span className="idx">{idx}</span>
    </div>
    <div className="field-art">
      <FieldArt kind={kind}/>
    </div>
    <div style={{flex: 1}}>
      <h3 className="nb-h2" style={{margin:"0 0 10px", letterSpacing:"-0.02em"}}>{title}</h3>
      <p className="nb-body" style={{color:"var(--fg-2)", margin: 0}}>{copy}</p>
    </div>
    <div style={{
      display:"flex", alignItems:"center", gap: 8,
      color:"var(--fg-3)", fontFamily:"var(--font-mono)", fontSize: 11,
      letterSpacing:"0.08em", textTransform:"uppercase",
      paddingTop: 12, borderTop:"1px solid var(--border-1)",
    }}>
      <span style={{color: "var(--nubel-orange)"}}>●</span>
      Pilot open
    </div>
  </div>
);

const Fields = () => (
  <section className="nb-section">
    <div className="nb-wrap">
      <div style={{display:"flex", alignItems:"baseline", gap: 16, marginBottom: 24, color:"var(--fg-3)"}}>
        <span className="nb-mono" style={{fontSize:12, letterSpacing:"0.12em", textTransform:"uppercase"}}>/004 · who it's for</span>
        <span style={{flex:1, height:1, background:"var(--border-1)"}}/>
      </div>
      <div style={{display:"grid", gridTemplateColumns:"1.1fr 1fr", gap: 48, marginBottom: 40, alignItems:"end"}}>
        <h2 className="nb-display-md nb-balance" style={{margin: 0}}>
          Four fields. Built with BC students, for BC companies.
        </h2>
        <p className="nb-body-lg nb-pretty" style={{color:"var(--fg-2)", margin: 0, maxWidth: 460}}>
          If you're studying or starting your career in one of these, Nubel helps you stand out beyond a resume.
        </p>
      </div>
      <div style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap: 16}} className="field-grid">
        <FieldCard idx="01" kind="marketing" title="Marketing"
          copy="Show how you think about campaigns, audiences, and growth."/>
        <FieldCard idx="02" kind="design"    title="Design"
          copy="Let employers see your creativity, taste, and communication skills."/>
        <FieldCard idx="03" kind="cs"        title="Computer Science"
          copy="Explain how you approach problems and build solutions."/>
        <FieldCard idx="04" kind="data"      title="Data Analytics"
          copy="Walk through how you turn messy data into decisions."/>
      </div>
    </div>
  </section>
);

// ---------- For employers (dark block) ----------
const ForEmployers = () => (
  <section className="nb-section" style={{paddingTop: "clamp(48px, 7vw, 96px)"}}>
    <div className="nb-wrap">
      <div className="dark-block">
        <div style={{display:"flex", alignItems:"baseline", gap: 16, marginBottom: 24, color:"var(--fg-3)"}}>
          <span className="nb-mono" style={{fontSize:12, letterSpacing:"0.12em", textTransform:"uppercase"}}>/005 · for employers</span>
          <span style={{flex:1, height:1, background:"var(--border-1)"}}/>
        </div>
        <div style={{display:"grid", gridTemplateColumns:"1.2fr 1fr", gap: 64, alignItems:"center"}}>
          <div>
            <h2 className="nb-display-md nb-balance" style={{margin:"0 0 20px"}}>
              Browse real candidates. No job post required.
            </h2>
            <p className="nb-body-lg nb-pretty" style={{color:"var(--fg-2)", margin: "0 0 32px", maxWidth: 520}}>
              Get a feel for the talent in BC before you commit to anything. Watch short video answers, save the people who stand out, reach out only when you're ready. No job post, no commitments, no awkward Yes-or-No emails.
            </p>
            <a href="mailto:abel@nubel.ca?subject=Nubel%20%E2%80%94%20early%20access%20for%20employers" className="btn btn-primary btn-lg">
              Get early access <Icon name="arrow" size={14} stroke={2.2}/>
            </a>
          </div>
          {/* Proof stats */}
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap: 24}}>
            {[
              {k:"No post", v:"Skip the job-description ritual. Browse first, decide later."},
              {k:"No pressure", v:"Save candidates for later. Reach out only when you're ready."},
              {k:"2 min", v:"Per video answer — you see communication, not typos."},
              {k:"4 fields", v:"Marketing, Design, CS & Data — curated, not scraped."},
            ].map((s,i) => (
              <div key={i} style={{borderTop:"1px solid var(--border-1)", paddingTop: 20}}>
                <div style={{fontSize:"clamp(28px, 3.2vw, 40px)", fontWeight: 800, letterSpacing:"-0.02em", color:"var(--nubel-orange)", marginBottom: 8}}>
                  {s.k}
                </div>
                <div style={{color:"var(--fg-2)", fontSize: 14, lineHeight: 1.5}}>{s.v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ---------- About (founder note) ----------
const About = () => (
  <section className="nb-section" id="about">
    <div className="nb-wrap">
      <div style={{display:"flex", alignItems:"baseline", gap: 16, marginBottom: 24, color:"var(--fg-3)"}}>
        <span className="nb-mono" style={{fontSize:12, letterSpacing:"0.12em", textTransform:"uppercase"}}>/006 · about</span>
        <span style={{flex:1, height:1, background:"var(--border-1)"}}/>
      </div>
      <div style={{display:"grid", gridTemplateColumns:"1fr 1.4fr", gap: 64, alignItems:"start"}}>
        <div>
          <h2 className="nb-display-md nb-balance" style={{margin: "0 0 20px"}}>
            We're building the hiring platform we wished existed.
          </h2>
          <div style={{display:"flex", gap: 14, alignItems:"center", marginTop: 28}}>
            <Avatar size={48} name="Abel Osorio" hue={20}/>
            <div>
              <div style={{fontWeight: 700, fontSize: 15}}>Abel Osorio</div>
              <div style={{fontSize: 13, color:"var(--fg-3)"}}>Founder & CEO · Nubel Technologies</div>
            </div>
          </div>
        </div>
        <div style={{display:"flex", flexDirection:"column", gap: 20}}>
          <p className="nb-body-lg nb-pretty" style={{color:"var(--fg-1)", margin: 0, fontWeight: 500}}>
            Resumes are a lossy format. They flatten the people we most want to meet — students, early-career folks, career-switchers — into a list of bullet points that all look the same.
          </p>
          <p className="nb-body-lg nb-pretty" style={{color:"var(--fg-2)", margin: 0}}>
            Nubel is a video-first hiring platform. Candidates answer a few short, interview-style questions on video. Employers see personality, communication, and energy — the things you can't fit on a page.
          </p>
          <p className="nb-body-lg nb-pretty" style={{color:"var(--fg-2)", margin: 0}}>
            We're headquartered in Vancouver, piloting with students and recent grads from universities and colleges across BC. If you want to help us build something better than PDFs — come say hi.
          </p>
          <div style={{
            display:"flex", gap: 12, alignItems:"center", flexWrap:"wrap",
            fontFamily:"var(--font-mono)", fontSize: 12, textTransform:"uppercase", letterSpacing:"0.1em",
            color:"var(--fg-3)", paddingTop: 16, borderTop:"1px solid var(--border-1)",
          }}>
            <span>Vancouver, BC</span>
            <span>◆</span>
            <span>Innovative Employer '25</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ---------- Final CTA ----------
const FinalCTA = () => (
  <section className="nb-section" style={{paddingTop: "clamp(48px, 7vw, 96px)"}}>
    <div className="nb-wrap">
      <div style={{
        padding:"clamp(48px, 7vw, 96px) 0",
        borderTop:"1px solid var(--border-1)",
        borderBottom:"1px solid var(--border-1)",
        textAlign:"center",
      }}>
        <h2 style={{
          margin: "0 0 32px", fontWeight: 800,
          fontSize: "clamp(48px, 8vw, 120px)", lineHeight: 0.98,
          letterSpacing: "-0.035em",
        }} className="nb-balance">
          Your first job <br/>
          starts <span style={{color:"var(--nubel-orange)"}}>here.</span>
        </h2>
        <div style={{display:"flex", gap: 12, justifyContent:"center", flexWrap:"wrap"}}>
          <a href="https://app.nubel.ca/how-it-works" className="btn btn-primary btn-lg">
            Join the pilot <span style={{opacity:0.55}}>•</span> it's free
            <Icon name="arrow" size={14} stroke={2.2}/>
          </a>
          <a href="https://app.nubel.ca/onboarding/recruiter" className="btn btn-ghost btn-lg">
            I'm hiring
            <Icon name="arrow" size={14} stroke={2.2}/>
          </a>
        </div>
        <p className="nb-meta" style={{marginTop: 24, color:"var(--fg-3)"}}>
          Closed pilot · British Columbia · 2026
        </p>
      </div>
    </div>
  </section>
);

// ---------- Footer ----------
const Footer = () => (
  <footer style={{padding: "48px 0 32px"}}>
    <div className="nb-wrap">
      <div style={{
        display:"flex", justifyContent:"space-between", alignItems:"flex-start",
        flexWrap:"wrap", gap: 24,
      }}>
        <div style={{display:"flex", alignItems:"center", gap: 12}}>
          <img src="./assets/nubel-mark-orange.png" alt="" style={{width: 22, height: 26}}/>
          <span className="nb-meta" style={{color:"var(--fg-2)"}}>
            © 2026 Nubel Technologies Inc. · Vancouver, BC
          </span>
        </div>
        <div style={{display:"flex", gap: 20, alignItems:"center"}}>
          <a href="https://nubel.ca" className="nb-meta" style={{color:"var(--fg-2)"}}>nubel.ca</a>
          <a href="https://linkedin.com/company/nubel-app" target="_blank" rel="noopener" style={{
            width: 36, height: 36, borderRadius:"50%",
            border:"1px solid var(--border-1)",
            display:"flex", alignItems:"center", justifyContent:"center", color:"var(--fg-1)"
          }}>
            <Icon name="linkedin" size={15}/>
          </a>
        </div>
      </div>
    </div>
  </footer>
);

window.Manifesto = Manifesto;
window.HowItWorks = HowItWorks;
window.Fields = Fields;
window.ForEmployers = ForEmployers;
window.About = About;
window.FinalCTA = FinalCTA;
window.Footer = Footer;
