/* Nexgen Solutions Chitral — reusable content sections shared across pages.
   Reads window.NEXGEN_* data + shared chrome helpers. Exported to window. */
const { AccentLine: SAccentLine, Button: SButton, Badge: SBadge, CourseCard, FeatureCard, StatBlock, TextLink: STextLink } = window.NexgenSolutionsChitralDesignSystem_3ef89c;

/* ---- 01 · Intro / 6+ years ---- */
function IntroExperience() {
  return (
    <section className="nx-section">
      <div style={{ ...nxWrap }}>
        <div className="nx-intro-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
              <SAccentLine width={32} /><span className="nx-eyebrow">Who we are</span>
            </div>
            <h2 style={{ margin: 0, fontSize: "clamp(28px,3.6vw,40px)", lineHeight: 1.12, fontWeight: 800, letterSpacing: "-0.02em", textWrap: "balance" }}>
              A young, energetic, and professional team turning ideas into digital reality.
            </h2>
          </div>
          <div>
            <p style={{ margin: 0, fontSize: 18, lineHeight: 1.65, color: "var(--text-secondary)", textWrap: "pretty" }}>
              With more than six years of experience, Nexgen Solutions Chitral brings together technology, creativity, AI, and practical digital expertise to solve real problems for people and businesses.
            </p>
            <p style={{ margin: "18px 0 0", fontSize: 18, lineHeight: 1.65, color: "var(--text-secondary)", textWrap: "pretty" }}>
              We're a modern digital solutions company, a creative studio, and a technology academy — not limited to one service.
            </p>
            <div className="nx-mini-stats">
              {[["6+","Years experience"],["13+","Services"],["6+","Courses"],["1","Team, many skills"]].map(([v,l],i)=>(
                <div key={l} className="nx-mini-stat" style={{ borderLeft: i===0? "none" : "1px solid var(--border-default)" }}>
                  <b>{v}</b><span>{l}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- Services grid (icon tiles). limit=n to preview ---- */
function ServicesSection({ limit, eyebrow = "What we do", title = "Services built to solve real problems.", sub = "From your first website to AI-powered applications — technology, creative, and growth under one roof.", cta = true }) {
  const items = limit ? window.NEXGEN_SERVICES.slice(0, limit) : window.NEXGEN_SERVICES;
  useLucide();
  return (
    <section className="nx-section" id="services">
      <div style={{ ...nxWrap }}>
        <SectionHead eyebrow={eyebrow} title={title} sub={sub} />
        <div className="nx-svc-grid">
          {items.map((s) => (
            <a key={s.id} href={"services.html#" + s.id} className="nx-svc">
              <span className="nx-svc-cat">{s.category}</span>
              <div className="nx-svc-icon"><Icon name={s.icon} size={22} /></div>
              <h3>{s.title}</h3>
              <p>{s.short}</p>
            </a>
          ))}
        </div>
        {cta && (
          <div style={{ marginTop: 34 }}>
            <STextLink href="services.html">View all services</STextLink>
          </div>
        )}
      </div>
    </section>
  );
}

/* ---- AI signature section (brief §31) ---- */
function AISection() {
  return (
    <section className="nx-ai">
      <img className="nx-ai-bg" src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=1600&q=70" alt="" aria-hidden="true" />
      <div className="nx-ai-scrim" aria-hidden="true"></div>
      <div style={{ ...nxWrap, position: "relative" }}>
        <div style={{ maxWidth: 620 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}>
            <SAccentLine width={40} /><span className="nx-eyebrow">AI at Nexgen</span>
          </div>
          <h2 style={{ margin: 0, fontSize: "clamp(30px,4.5vw,50px)", lineHeight: 1.06, fontWeight: 800, letterSpacing: "-0.02em" }}>
            AI isn't the future.<br />It's already here.
          </h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.65, color: "var(--text-secondary)", maxWidth: 520 }}>
            We integrate modern AI tools into development, creative work, automation, productivity, and digital solutions — and we teach the same workflows in our academy.
          </p>
          <div className="nx-ai-tags">
            {["AI-assisted development","Automation","AI content workflows","AI-powered apps","AI training"].map((t) => (
              <span key={t} className="nx-ai-tag">{t}</span>
            ))}
          </div>
          <div style={{ marginTop: 30 }}>
            <SButton as="a" href="services.html#ai-solutions" variant="accent" size="lg">Explore AI solutions →</SButton>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- Projects showcase (brief §26, §07) ---- */
function ProjectsShowcase({ full = false }) {
  const items = window.NEXGEN_PROJECTS;
  return (
    <section className="nx-section nx-surface" id="projects">
      <div style={{ ...nxWrap }}>
        <SectionHead eyebrow="Project showcase" title="See what we can build." sub="A snapshot of the kind of work Nexgen delivers. Demo pieces shown where client work is private." />
        <div className="nx-proj-grid2">
          {items.map((p, i) => (
            <div key={p.title + i} className={"nx-proj" + (p.size === "wide" ? " is-wide" : p.size === "tall" ? " is-tall" : "")}>
              <img src={p.img} alt={p.title} loading="lazy" />
              <div className="nx-proj-ov"></div>
              <div className="nx-proj-cap">
                <span className="nx-eyebrow">{p.cat}</span>
                <b>{p.title}</b>
              </div>
              <span className="nx-proj-tag">{p.tag}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- Academy / courses preview ---- */
function AcademySection({ limit = 3 }) {
  const items = window.NEXGEN_COURSES.slice(0, limit);
  return (
    <section className="nx-section" id="academy">
      <div style={{ ...nxWrap }}>
        <SectionHead eyebrow="Academy" title="Learn the skills. Build the future." sub="From beginner to advanced, learn practical digital skills from professionals working with modern technology and AI." />
        <div className="nx-course-grid">
          {items.map((c) => (
            <CourseCard key={c.id} category={c.category} title={c.title} description={c.desc}
              duration={c.duration} level={c.level} image={c.img} href={"courses.html#" + c.id} />
          ))}
        </div>
        <div style={{ marginTop: 34 }}>
          <STextLink href="courses.html">Explore all courses</STextLink>
        </div>
      </div>
    </section>
  );
}

/* ---- Why Nexgen (brief §28) ---- */
function WhyNexgen() {
  useLucide();
  return (
    <section className="nx-section nx-surface">
      <div style={{ ...nxWrap }}>
        <SectionHead eyebrow="Why Nexgen" title="Serious technology. Human approach." />
        <div className="nx-feat-grid">
          {window.NEXGEN_FEATURES.map((f) => (
            <FeatureCard key={f.title} icon={<Icon name={f.icon} size={22} />} title={f.title}>{f.desc}</FeatureCard>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- Business growth (brief §30) ---- */
function BusinessGrowth() {
  const items = ["Website","Web application","Branding & identity","Graphic design","Social media","Digital marketing","Video & audio","AI & automation"];
  return (
    <section className="nx-section">
      <div style={{ ...nxWrap }}>
        <div className="nx-biz-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
              <SAccentLine width={32} /><span className="nx-eyebrow">For business</span>
            </div>
            <h2 style={{ margin: 0, fontSize: "clamp(30px,4vw,44px)", lineHeight: 1.08, fontWeight: 800, letterSpacing: "-0.02em" }}>
              Grow your business digitally.
            </h2>
            <p style={{ marginTop: 18, fontSize: 18, lineHeight: 1.65, color: "var(--text-secondary)", maxWidth: 460 }}>
              Don't just build a business — build its digital presence. We help you show up online, look professional, and reach the right people.
            </p>
            <div style={{ marginTop: 30 }}>
              <SButton as="a" href="contact.html" variant="primary" size="lg">Let's work together →</SButton>
            </div>
          </div>
          <ul className="nx-biz-list">
            {items.map((it) => (
              <li key={it}><Icon name="check" size={16} /> <span>{it}</span></li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

/* ---- Learning journey ---- */
function JourneySection() {
  return (
    <section className="nx-section">
      <div style={{ ...nxWrap }}>
        <SectionHead eyebrow="How it works" title="From learning to opportunity." />
        <div className="nx-journey">
          {window.NEXGEN_JOURNEY.map((s, i) => (
            <div key={s.n} className="nx-journey-step" style={{ borderLeft: i === 0 ? "none" : "1px solid var(--border-default)" }}>
              <div className="nx-journey-n">{s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- FAQ (accordion) ---- */
function FAQSection() {
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section className="nx-section">
      <div style={{ ...nxWrap, maxWidth: 860 }}>
        <SectionHead eyebrow="FAQ" title="Questions, answered." align="center" max={720} />
        <div className="nx-faq">
          {window.NEXGEN_FAQ.map((f, i) => (
            <div key={i} className={"nx-faq-item" + (openIdx === i ? " is-open" : "")}>
              <button className="nx-faq-q" onClick={() => setOpenIdx(openIdx === i ? -1 : i)} aria-expanded={openIdx === i}>
                <span>{f.q}</span>
                <span className="nx-faq-ico" aria-hidden="true">{openIdx === i ? "–" : "+"}</span>
              </button>
              <div className="nx-faq-a" style={{ maxHeight: openIdx === i ? 240 : 0 }}>
                <p>{f.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { IntroExperience, ServicesSection, AISection, ProjectsShowcase, AcademySection, WhyNexgen, BusinessGrowth, JourneySection, FAQSection });