// Home page sections — Hero variants, Stats, Process, Languages, Testimonial, CTA

function Hero({ layout = "split-left" }) {
  const eyebrow = "REGULATED IMMIGRATION CONSULTING — ONTARIO";
  const title = "Your path to Canada, handled with precision.";
  const sub = "JSR Immigration provides regulated immigration consulting and paralegal services for individuals, families, and employers across Ontario and Canada — from Express Entry to citizenship.";

  const ctas = (
    <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 32 }}>
      <a href="#contact" className="btn btn-primary">Get in Touch</a>
      <a href="#services" className="btn btn-secondary">Browse Services</a>
    </div>
  );

  const credentials = (
    <div style={{ display: "flex", gap: 24, marginTop: 40, flexWrap: "wrap" }}>
      <div>
        <div style={{ fontSize: 11, color: "var(--text-muted)", fontWeight: 600, letterSpacing: "0.1em", marginBottom: 4 }}>RCIC LICENSE</div>
        <div style={{ fontSize: 15, fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>R712841</div>
      </div>
      <div style={{ width: 1, background: "var(--border)" }} />
      <div>
        <div style={{ fontSize: 11, color: "var(--text-muted)", fontWeight: 600, letterSpacing: "0.1em", marginBottom: 4 }}>LSO PARALEGAL</div>
        <div style={{ fontSize: 15, fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>P21236</div>
      </div>
      <div style={{ width: 1, background: "var(--border)" }} />
      <div>
        <div style={{ fontSize: 11, color: "var(--text-muted)", fontWeight: 600, letterSpacing: "0.1em", marginBottom: 4 }}>BASED IN</div>
        <div style={{ fontSize: 15, fontWeight: 600 }}>Brampton, ON</div>
      </div>
    </div>
  );

  // Visual block — Jugraj's photo with credentials overlay
  const Visual = ({ ar = "5/6" }) => (
    <div style={{
      aspectRatio: ar,
      borderRadius: "var(--radius-lg)",
      background: "linear-gradient(135deg, var(--brand-800) 0%, var(--brand-900) 100%)",
      position: "relative",
      overflow: "hidden",
      boxShadow: "var(--shadow-lg)",
    }}>
      <img src="assets/jugraj-courtroom.png" alt="Jugraj Singh Randhawa" style={{
        position: "absolute",
        inset: 0,
        width: "100%", height: "100%",
        objectFit: "cover",
        objectPosition: "center top",
      }} />
      {/* gradient overlay for legibility */}
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, rgba(8,12,20,0) 40%, rgba(8,12,20,0.65) 100%)",
      }} />
      {/* Credential card top-right */}
      <div style={{
        position: "absolute",
        right: 20, top: 20,
        background: "rgba(255,255,255,0.95)",
        backdropFilter: "blur(8px)",
        borderRadius: 8,
        padding: "10px 14px",
        boxShadow: "0 8px 24px rgba(0,0,0,0.2)",
      }}>
        <div style={{ fontSize: 9, fontWeight: 700, color: "var(--text-muted)", letterSpacing: "0.12em", marginBottom: 4 }}>DUAL LICENSED</div>
        <div style={{ display: "flex", gap: 6 }}>
          <span style={{ fontSize: 10, padding: "3px 7px", background: "var(--brand-900)", color: "white", borderRadius: 3, fontWeight: 700, letterSpacing: "0.06em" }}>RCIC R712841</span>
          <span style={{ fontSize: 10, padding: "3px 7px", background: "var(--accent)", color: "var(--brand-900)", borderRadius: 3, fontWeight: 700, letterSpacing: "0.06em" }}>LSO P21236</span>
        </div>
      </div>
      {/* Bottom name plate */}
      <div style={{
        position: "absolute",
        left: 20, right: 20, bottom: 20,
        color: "white",
      }}>
        <div style={{ fontSize: 11, opacity: 0.75, letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 600, marginBottom: 6 }}>Founder & Principal</div>
        <div style={{ fontSize: 24, fontWeight: 600, letterSpacing: "-0.01em" }}>Jugraj Singh Randhawa</div>
        <div style={{ fontSize: 14, opacity: 0.8, marginTop: 4 }}>Paralegal · RCIC · Notary Public</div>
      </div>
    </div>
  );

  if (layout === "centered") {
    return (
      <section style={{ paddingTop: "var(--space-9)", paddingBottom: "var(--space-9)", textAlign: "center" }}>
        <div className="container-narrow">
          <div className="eyebrow eyebrow-line" style={{ justifyContent: "center", marginBottom: 24 }}>{eyebrow}</div>
          <h1 style={{ marginBottom: 24 }}>{title}</h1>
          <p style={{ fontSize: 19, color: "var(--text-soft)", maxWidth: 640, margin: "0 auto" }}>{sub}</p>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap", marginTop: 32 }}>
            <a href="#contact" className="btn btn-primary">Get in Touch</a>
            <a href="#services" className="btn btn-secondary">Browse Services</a>
          </div>
        </div>
        <div className="container" style={{ marginTop: 56 }}>
          <Visual ar="16/7" />
        </div>
      </section>
    );
  }

  if (layout === "full-bleed") {
    return (
      <section style={{
        padding: 0,
        position: "relative",
        minHeight: "78vh",
        display: "grid",
        alignItems: "center",
        background: "linear-gradient(135deg, var(--brand-800) 0%, var(--brand-900) 100%)",
        color: "white",
        overflow: "hidden",
      }}>
        <svg viewBox="0 0 200 200" style={{ position: "absolute", top: "-10%", right: "-5%", width: "55%", opacity: 0.06 }}>
          <path fill="white" d="M100 20 L110 60 L140 50 L125 80 L160 90 L130 110 L155 140 L115 130 L120 170 L100 150 L80 170 L85 130 L45 140 L70 110 L40 90 L75 80 L60 50 L90 60 Z" />
        </svg>
        <div className="container" style={{ position: "relative", zIndex: 2, padding: "var(--space-9) var(--space-5)" }}>
          <div style={{ maxWidth: 760 }}>
            <div className="eyebrow eyebrow-line" style={{ color: "var(--accent)", marginBottom: 24 }}>{eyebrow}</div>
            <h1 style={{ color: "white", marginBottom: 24 }}>{title}</h1>
            <p style={{ fontSize: 19, color: "rgba(255,255,255,0.78)", maxWidth: 580 }}>{sub}</p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 32 }}>
              <a href="#contact" className="btn" style={{ background: "var(--accent)", color: "var(--brand-900)", fontWeight: 600 }}>Get in Touch</a>
              <a href="#services" className="btn" style={{ background: "transparent", border: "1px solid rgba(255,255,255,0.3)", color: "white" }}>Browse Services</a>
            </div>
            <div style={{ display: "flex", gap: 24, marginTop: 48, flexWrap: "wrap", color: "rgba(255,255,255,0.85)" }}>
              <div>
                <div style={{ fontSize: 11, opacity: 0.65, fontWeight: 600, letterSpacing: "0.1em", marginBottom: 4 }}>RCIC LICENSE</div>
                <div style={{ fontSize: 15, fontWeight: 600 }}>R712841</div>
              </div>
              <div style={{ width: 1, background: "rgba(255,255,255,0.2)" }} />
              <div>
                <div style={{ fontSize: 11, opacity: 0.65, fontWeight: 600, letterSpacing: "0.1em", marginBottom: 4 }}>LSO PARALEGAL</div>
                <div style={{ fontSize: 15, fontWeight: 600 }}>P21236</div>
              </div>
              <div style={{ width: 1, background: "rgba(255,255,255,0.2)" }} />
              <div>
                <div style={{ fontSize: 11, opacity: 0.65, fontWeight: 600, letterSpacing: "0.1em", marginBottom: 4 }}>BASED IN</div>
                <div style={{ fontSize: 15, fontWeight: 600 }}>Brampton, ON</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // split-left (default) or split-right
  const reverse = layout === "split-right";
  return (
    <section style={{ paddingTop: "var(--space-8)", paddingBottom: "var(--space-9)" }}>
      <div className="container">
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.05fr 1fr",
          gap: "var(--space-7)",
          alignItems: "center",
          direction: reverse ? "rtl" : "ltr",
        }}>
          <div style={{ direction: "ltr" }}>
            <div className="eyebrow eyebrow-line" style={{ marginBottom: 24 }}>{eyebrow}</div>
            <h1 style={{ marginBottom: 24 }}>{title}</h1>
            <p style={{ fontSize: 18, color: "var(--text-soft)", maxWidth: 540 }}>{sub}</p>
            {ctas}
            {credentials}
          </div>
          <div style={{ direction: "ltr" }}>
            <Visual />
          </div>
        </div>
      </div>
    </section>
  );
}

function StatsBar() {
  const stats = [
    { v: "16+", l: "Practice areas" },
    { v: "4", l: "Languages spoken" },
    { v: "100%", l: "Regulated & licensed" },
    { v: "Ontario", l: "& Canada-wide" },
  ];
  return (
    <section style={{ padding: "var(--space-6) 0", background: "var(--bg-soft)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: "var(--space-5)" }}>
          {stats.map(s => (
            <div key={s.l}>
              <div style={{ fontSize: 32, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 4 }}>{s.v}</div>
              <div style={{ fontSize: 13, color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 500 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    { n: "01", t: "Initial Assessment", d: "We review your case, history, and goals — then identify the right immigration pathway and timelines." },
    { n: "02", t: "Strategy & Documentation", d: "We build a complete file: forms, supporting evidence, translations, and submission-ready packages." },
    { n: "03", t: "Submission & Representation", d: "We submit to IRCC or the relevant tribunal and represent you on every communication, request, and update." },
    { n: "04", t: "Outcome & Next Steps", d: "From PR confirmation to landing, citizenship, or onward sponsorship — we support what comes next." },
  ];
  return (
    <section data-section="process">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: "var(--space-7)" }}>
          <div className="eyebrow eyebrow-line" style={{ marginBottom: 16 }}>HOW WE WORK</div>
          <h2 style={{ marginBottom: 16 }}>A clear, regulated process — at every step.</h2>
          <p style={{ fontSize: 17, color: "var(--text-soft)" }}>
            Every JSR matter is handled directly by Jugraj Singh Randhawa, RCIC and licensed paralegal. No handoffs, no junior reviewers, no surprise fees.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "var(--space-5)" }}>
          {steps.map(s => (
            <div key={s.n} style={{ borderTop: "2px solid var(--brand-800)", paddingTop: 20 }}>
              <div style={{ fontSize: 13, color: "var(--accent)", fontWeight: 700, letterSpacing: "0.1em", marginBottom: 12 }}>{s.n}</div>
              <h3 style={{ fontSize: 19, marginBottom: 10 }}>{s.t}</h3>
              <p style={{ fontSize: 14, color: "var(--text-soft)", lineHeight: 1.6 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Languages() {
  const langs = [
    { name: "English", note: "Primary working language" },
    { name: "ਪੰਜਾਬੀ Punjabi", note: "Native fluency" },
    { name: "हिन्दी Hindi", note: "Native fluency" },
    { name: "اردو Urdu", note: "Conversational" },
  ];
  return (
    <section style={{ background: "var(--bg-soft)" }} data-section="languages">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: "var(--space-7)", alignItems: "center" }}>
          <div>
            <div className="eyebrow eyebrow-line" style={{ marginBottom: 16 }}>LANGUAGES</div>
            <h2 style={{ marginBottom: 16 }}>Service in your language.</h2>
            <p style={{ fontSize: 16, color: "var(--text-soft)" }}>
              Immigration is personal. We handle every consultation, document, and tribunal communication in the language you're most comfortable with.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            {langs.map(l => (
              <div key={l.name} style={{ padding: "20px 22px", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: "var(--radius)" }}>
                <div style={{ fontSize: 17, fontWeight: 600, marginBottom: 4 }}>{l.name}</div>
                <div style={{ fontSize: 13, color: "var(--text-muted)" }}>{l.note}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonial() {
  return (
    <section data-section="testimonial">
      <div className="container-narrow" style={{ textAlign: "center" }}>
        <svg width="40" height="32" viewBox="0 0 40 32" fill="var(--accent)" style={{ marginBottom: 24 }}>
          <path d="M0 32V18C0 8 6 2 16 0L18 4C12 6 8 10 8 16H16V32H0ZM22 32V18C22 8 28 2 38 0L40 4C34 6 30 10 30 16H38V32H22Z" />
        </svg>
        <p style={{ fontSize: 22, lineHeight: 1.5, color: "var(--text)", letterSpacing: "-0.01em", marginBottom: 32, fontWeight: 400 }}>
          Jugraj walked us through the full Express Entry process from CRS optimization to landing. Every form, every deadline, every IRCC update — handled. Our PR was approved in our first round.
        </p>
        <div style={{ fontSize: 14, fontWeight: 600 }}>Harpreet & Simran K.</div>
        <div style={{ fontSize: 13, color: "var(--text-muted)" }}>Express Entry · CEC · Approved 2025</div>
      </div>
    </section>
  );
}

function CTASection() {
  return (
    <section style={{ background: "var(--brand-900)", color: "white", padding: "var(--space-8) 0" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: "var(--space-6)", alignItems: "center" }}>
          <div>
            <h2 style={{ color: "white", marginBottom: 16 }}>Ready to start your case?</h2>
            <p style={{ fontSize: 17, color: "rgba(255,255,255,0.75)", maxWidth: 540 }}>
              Tell us about your situation. We'll review and respond within one business day with the next steps.
            </p>
          </div>
          <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", flexWrap: "wrap" }}>
            <a href="#contact" className="btn" style={{ background: "var(--accent)", color: "var(--brand-900)", fontWeight: 600 }}>Get in Touch</a>
            <a href="tel:6472864266" className="btn" style={{ background: "transparent", border: "1px solid rgba(255,255,255,0.3)", color: "white" }}>647-286-4266</a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, StatsBar, Process, Languages, Testimonial, CTASection });