/* Sections: Product Overview, Solutions, Ecosystem, Work, Process */

const SectionHead = ({ eyebrow, title, lead, align = 'left' }) => (
  <div className={"section-head " + (align === 'center' ? 'center' : '')}>
    {eyebrow && <span className="eyebrow">{eyebrow}</span>}
    <h2 className="h-section">{title}</h2>
    {lead && <p>{lead}</p>}
  </div>
);

/* ---------- Product Overview ---------- */
const ProductOverview = () => (
  <section id="overview" className="sec-overview">
    <div className="container">
      <SectionHead
        eyebrow="PRODUCT OVERVIEW"
        title={<>The execution layer behind <em className="gradient-text">intelligent</em> digital products.</>}
        lead="Booster Block turns ambitious ideas into scalable software systems using AI-native planning, product design, Web4 development, blockchain engineering and cloud infrastructure."
      />
      <div className="overview-grid">
        <OverviewCard
          n="01"
          icon={<IconBrain size={20}/>}
          title="Strategy & Architecture"
          body="We define the vision, product roadmap, technical architecture and execution plan."
          features={["Discovery & vision", "System architecture", "Execution roadmap"]}
        />
        <OverviewCard
          n="02"
          icon={<IconChip size={20}/>}
          title="AI-Native Development"
          body="We build intelligent workflows, AI products, automations and modular software systems."
          features={["Agents & assistants", "AI-assisted delivery", "Modular SaaS"]}
          featured
        />
        <OverviewCard
          n="03"
          icon={<IconCloud size={20}/>}
          title="Infrastructure & Scale"
          body="We deploy secure, scalable and client-owned infrastructure built for long-term growth."
          features={["Cloud-native deploy", "DevOps pipelines", "Observability"]}
        />
      </div>
    </div>
  </section>
);

const OverviewCard = ({ n, icon, title, body, features, featured }) => (
  <article className={"ov-card panel" + (featured ? " featured" : "")}>
    <div className="ov-card-top">
      <div className="ov-icon">{icon}</div>
      <span className="ov-num">{n}</span>
    </div>
    <h3 className="ov-title">{title}</h3>
    <p className="ov-body">{body}</p>
    <ul className="ov-features">
      {features.map((f, i) => (
        <li key={i}><IconCheck size={12}/> {f}</li>
      ))}
    </ul>
    <div className="ov-card-foot">
      <a href="#" className="btn-link">Learn more <IconArrowRight size={12}/></a>
    </div>
  </article>
);

/* ---------- Solutions ---------- */
const solutionsList = [
  { icon: <IconBrain size={18}/>, title: "AI Solutions", body: "Custom AI models, assistants, agents, automation and intelligent workflows.", chips: ["LLMs", "Agents", "RAG"] },
  { icon: <IconNetwork size={18}/>, title: "Blockchain Systems", body: "Smart contracts, DeFi platforms, wallets, token ecosystems and Web4 apps.", chips: ["Solidity", "DeFi", "Wallets"] },
  { icon: <IconLayers size={18}/>, title: "Digital Products", body: "SaaS platforms, mobile apps, internal tools and client portals.", chips: ["SaaS", "Mobile", "Portals"] },
  { icon: <IconCloud size={18}/>, title: "Cloud Infrastructure", body: "Secure architecture, DevOps, deployment pipelines and scalable systems.", chips: ["AWS", "K8s", "CI/CD"] },
  { icon: <IconDatabase size={18}/>, title: "Data Intelligence", body: "Dashboards, analytics, decision systems and business intelligence.", chips: ["Analytics", "ETL", "BI"] },
];

const Solutions = () => (
  <section id="solutions" className="sec-solutions">
    <div className="container">
      <SectionHead
        eyebrow="WHAT WE BUILD"
        title={<>Intelligent systems for companies <br/>building the <em className="gradient-text">future.</em></>}
      />
      <div className="solutions-grid">
        {solutionsList.map((s, i) => (
          <article key={i} className={"sol-card panel" + (i === 0 ? " sol-card-wide" : "")}>
            <div className="sol-icon">{s.icon}</div>
            <h3 className="sol-title">{s.title}</h3>
            <p className="sol-body">{s.body}</p>
            <div className="sol-chips">
              {s.chips.map((c, j) => <span key={j} className="sol-chip">{c}</span>)}
            </div>
            <a href="#" className="sol-arrow" aria-label={`Explore ${s.title}`}><IconArrowUpRight size={16}/></a>
          </article>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- Ecosystem ---------- */
const ecosystem = [
  {
    name: "Brainfy",
    badge: "AI",
    domain: "brainfy.app",
    desc: "AI workspace for ideas, documents and intelligent productivity.",
    preview: "brainfy",
    accent: "#22d3ee"
  },
  {
    name: "Axinfy",
    badge: "WEB4",
    domain: "axinfy.com",
    desc: "Web4 business ecosystem and automation platform.",
    preview: "axinfy",
    accent: "#5eead4"
  },
  {
    name: "Asbel Rock",
    badge: "INVEST",
    domain: "asbelrock.io",
    desc: "Trading platform and financial education ecosystem.",
    preview: "ax",
    accent: "#7c5cff"
  },
];

const Ecosystem = () => (
  <section id="ecosystem" className="sec-ecosystem">
    <div className="container">
      <SectionHead
        eyebrow="BUILT BY BOOSTER BLOCK"
        title={<>Products and platforms powering the <em className="gradient-text">next digital era.</em></>}
      />
      <div className="eco-grid">
        {ecosystem.map((p, i) => (
          <article key={i} className="eco-card panel">
            <div className="eco-card-head">
              <div className="eco-name">
                <span className="eco-mark" style={{background: `radial-gradient(circle at 30% 30%, ${p.accent}, transparent 70%), #0b1119`}}>
                  {p.name[0]}
                </span>
                <div>
                  <div className="eco-title-row">
                    <span className="eco-title">{p.name}</span>
                    <span className="eco-badge" style={{ '--c': p.accent }}>{p.badge}</span>
                  </div>
                  <div className="eco-domain">{p.domain}</div>
                </div>
              </div>
              <button className="eco-more"><IconMore size={14}/></button>
            </div>
            <div className="eco-preview" data-preview={p.preview}>
              <EcoPreview kind={p.preview} accent={p.accent}/>
            </div>
            <p className="eco-desc">{p.desc}</p>
            <a href="#" className="eco-visit">
              Visit {p.name} <IconArrowUpRight size={13}/>
            </a>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const EcoPreview = ({ kind, accent }) => {
  if (kind === 'brainfy') return (
    <div className="prev prev-brainfy">
      <div className="prev-top">
        <span className="prev-dot" style={{background: accent}}/>
        <span>Brainfy · Workspace</span>
      </div>
      <div className="prev-rows">
        <div className="prev-row"><span className="prev-bullet"/><div className="prev-bar w-70"/></div>
        <div className="prev-row"><span className="prev-bullet"/><div className="prev-bar w-90"/></div>
        <div className="prev-row indent"><span className="prev-bullet ai"/><div className="prev-bar w-50 ai"/></div>
        <div className="prev-row"><span className="prev-bullet"/><div className="prev-bar w-80"/></div>
        <div className="prev-row indent"><span className="prev-bullet ai"/><div className="prev-bar w-60 ai"/></div>
      </div>
      <div className="prev-ai-card">
        <IconSparkle size={11}/>
        <div>
          <div className="prev-ai-l">AI assistant</div>
          <div className="prev-ai-s">Summarizing 12 docs…</div>
        </div>
      </div>
    </div>
  );
  if (kind === 'axinfy') return (
    <div className="prev prev-axinfy">
      <div className="prev-top">
        <span className="prev-dot" style={{background: accent}}/>
        <span>Axinfy · Network</span>
      </div>
      <div className="prev-network">
        <svg viewBox="0 0 240 110" width="100%" height="110">
          <defs>
            <radialGradient id="ax-glow" cx="0.5" cy="0.5" r="0.5">
              <stop offset="0" stopColor={accent} stopOpacity="0.4"/>
              <stop offset="1" stopColor={accent} stopOpacity="0"/>
            </radialGradient>
          </defs>
          <circle cx="120" cy="55" r="50" fill="url(#ax-glow)"/>
          {[
            [60, 30], [180, 30], [40, 80], [200, 80], [120, 12], [120, 98]
          ].map(([x, y], i) => (
            <g key={i}>
              <line x1="120" y1="55" x2={x} y2={y} stroke="rgba(255,255,255,0.12)" strokeWidth="0.8"/>
              <circle cx={x} cy={y} r="3" fill="#0b1119" stroke={accent} strokeWidth="1"/>
            </g>
          ))}
          <circle cx="120" cy="55" r="6" fill={accent}/>
          <circle cx="120" cy="55" r="11" fill="none" stroke={accent} strokeOpacity="0.4"/>
        </svg>
      </div>
      <div className="prev-axinfy-stats">
        <div><strong>248k</strong><span>tx / 24h</span></div>
        <div><strong>1,204</strong><span>active nodes</span></div>
      </div>
    </div>
  );
  // ax capital
  return (
    <div className="prev prev-ax">
      <div className="prev-top">
        <span className="prev-dot" style={{background: accent}}/>
        <span>Asbel Rock · Trading Desk</span>
      </div>
      <div className="prev-treasury">
        <div className="prev-tre-val">
          <span className="prev-tre-label">Portfolio Performance · 30d</span>
          <strong>+18.4%</strong>
          <span className="prev-tre-delta">live</span>
        </div>
        <svg viewBox="0 0 240 60" width="100%" height="60" className="prev-tre-chart">
          <defs>
            <linearGradient id="ax-fill" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor={accent} stopOpacity="0.5"/>
              <stop offset="1" stopColor={accent} stopOpacity="0"/>
            </linearGradient>
          </defs>
          <path d="M0,42 L30,38 L60,44 L90,30 L120,32 L150,18 L180,22 L210,8 L240,12 L240,60 L0,60 Z" fill="url(#ax-fill)"/>
          <path d="M0,42 L30,38 L60,44 L90,30 L120,32 L150,18 L180,22 L210,8 L240,12" stroke={accent} strokeWidth="1.5" fill="none"/>
        </svg>
      </div>
      <div className="prev-tre-row">
        <span>BTC</span><span className="bar"><i style={{width:'78%', background: accent}}/></span><span>+24%</span>
      </div>
      <div className="prev-tre-row">
        <span>FX</span><span className="bar"><i style={{width:'52%', background: accent}}/></span><span>+12%</span>
      </div>
      <div className="prev-tre-row">
        <span>EDU</span><span className="bar"><i style={{width:'92%', background: accent}}/></span><span>2,840</span>
      </div>
    </div>
  );
};

/* ---------- Work ---------- */
const workCases = [
  {
    title: "Brainfy",
    badge: "AI · SaaS",
    desc: "AI-native workspace and software execution platform.",
    tags: ["AI", "SaaS", "Productivity", "Execution"],
    preview: "brainfy"
  },
  {
    title: "Axinfy",
    badge: "WEB4",
    desc: "Web4 business ecosystem and automation platform.",
    tags: ["Web4", "Automation", "Blockchain"],
    preview: "axinfy"
  },
  {
    title: "XDX Blockchain",
    badge: "WEB3 · DEFI",
    desc: "Layer-1 blockchain, smart contracts and DeFi infrastructure.",
    tags: ["Layer-1", "Solidity", "DeFi", "Web3"],
    preview: "chain"
  },
];

const Work = () => (
  <section id="work" className="sec-work">
    <div className="container">
      <SectionHead
        eyebrow="SELECTED WORK"
        title={<>Systems we've built from <em className="gradient-text">idea to execution.</em></>}
      />
      <div className="work-grid">
        {workCases.map((c, i) => (
          <article key={i} className="work-card panel">
            <div className="work-preview">
              <WorkPreview kind={c.preview}/>
              <span className="work-badge">{c.badge}</span>
            </div>
            <div className="work-body">
              <h3 className="work-title">{c.title}</h3>
              <p className="work-desc">{c.desc}</p>
              <div className="work-tags">
                {c.tags.map((t, j) => <span key={j} className="work-tag">{t}</span>)}
              </div>
              <a href="#" className="btn-link">View Case Study <IconArrowRight size={12}/></a>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const WorkPreview = ({ kind }) => {
  if (kind === 'brainfy') return (
    <div className="wp wp-brainfy">
      <div className="wp-row"><i className="wp-sq"/><i className="wp-bar w-60"/></div>
      <div className="wp-row"><i className="wp-sq"/><i className="wp-bar w-80"/></div>
      <div className="wp-row indent"><i className="wp-bar w-45 ai"/></div>
      <div className="wp-row"><i className="wp-sq"/><i className="wp-bar w-70"/></div>
      <div className="wp-cmd">⌘ Ask Brainfy anything…</div>
    </div>
  );
  if (kind === 'axinfy') return (
    <div className="wp wp-axinfy">
      <div className="wp-axinfy-grid">
        {Array.from({length: 9}).map((_, i) => (
          <div key={i} className="wp-node" style={{opacity: 0.25 + (i%4)*0.2}}>
            <i/>
          </div>
        ))}
      </div>
      <div className="wp-pill">
        <span className="dot"/> 24 modules live
      </div>
    </div>
  );
  return (
    <div className="wp wp-chain">
      <svg viewBox="0 0 260 130" width="100%" height="130">
        <defs>
          <linearGradient id="ch-line" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor="#5eead4"/>
            <stop offset="1" stopColor="#22d3ee"/>
          </linearGradient>
        </defs>
        {[20, 60, 100, 140, 180, 220].map((x, i) => (
          <g key={i}>
            <rect x={x-10} y={i%2===0 ? 30 : 65} width="20" height="20" rx="3"
              fill="none" stroke="url(#ch-line)" strokeWidth="1.2" opacity={0.4 + (i*0.1)}/>
            {i < 5 && (
              <line x1={x+10} y1={(i%2===0 ? 40 : 75)}
                x2={x+30} y2={((i+1)%2===0 ? 40 : 75)}
                stroke="url(#ch-line)" strokeWidth="1" opacity="0.5"/>
            )}
          </g>
        ))}
        <text x="20" y="115" fill="rgba(255,255,255,0.4)" fontSize="8" fontFamily="JetBrains Mono">block #4,892,113</text>
        <text x="220" y="115" fill="#5eead4" fontSize="8" fontFamily="JetBrains Mono" textAnchor="end">finalized</text>
      </svg>
    </div>
  );
};

/* ---------- Process ---------- */
const steps = [
  { n: "01", title: "Think", body: "Define the vision, strategy and architecture.", icon: <IconBrain size={16}/> },
  { n: "02", title: "Design", body: "Create the UX, product experience and technical blueprint.", icon: <IconFlask size={16}/> },
  { n: "03", title: "Build", body: "Develop modules, platforms, automations and infrastructure.", icon: <IconCode size={16}/> },
  { n: "04", title: "Scale", body: "Deploy, optimize and evolve the system.", icon: <IconRocket size={16}/> },
];

const Process = () => (
  <section id="process" className="sec-process">
    <div className="container">
      <SectionHead
        eyebrow="HOW WE BUILD"
        title={<>From idea to <em className="gradient-text">intelligent system.</em></>}
      />
      <div className="process-timeline">
        <div className="process-line"/>
        {steps.map((s, i) => (
          <div key={i} className="process-step">
            <div className="process-node">
              <span className="process-node-inner">{s.icon}</span>
              <span className="process-node-pulse"/>
            </div>
            <div className="process-card panel-solid">
              <div className="process-num">{s.n}</div>
              <h3 className="process-title">{s.title}</h3>
              <p className="process-body">{s.body}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { ProductOverview, Solutions, Ecosystem, Work, Process, SectionHead });