/* Mereka v2 — Hub / creator profile page — Figma rebuild (Biji-Biji) */

const HUB_PROFILES = {
  'biji-biji': {
    name: 'Biji-Biji', type: 'Social Enterprise', location: 'Kuala Lumpur, Malaysia',
    rating: 4.3, reviews: 21, coverSeed: 2,
    about: "Biji-Biji is a social enterprise on a mission to share ideas that are sustainable and impactful. We run programmes, build makerspaces, and help communities and organisations grow through creative, hands-on learning.",
    focus: ['Sustainability', 'Maker Education', 'AI Upskilling', 'Community Programmes'],
    programmes: [
      {
        slug: 'ai4u', title: 'AI4U Programme',
        desc: 'AI4U is a FREE program dedicated to equipping 10,000 Malaysians and Indonesians with practical, real-world AI skills to boost employability, entrepreneurship, and digital resilience.',
        details: [['Duration', '12 weeks'], ['Format', 'Hybrid'], ['Location', 'Lot 1C, Level G1 (A4 Entrance) Publika Shopping Gallery, KL'], ['This program is for', 'Undergraduates\nEarly Career'], ['Certificates included', '4']],
      },
      {
        slug: 'fluency', title: 'AI for My Future',
        desc: 'A FREE, beginner-friendly pathway helping young Malaysians and Indonesians build everyday AI fluency — from prompting basics to automating real tasks — so they can thrive in a digital economy.',
        details: [['Duration', '6 weeks'], ['Format', 'Online, self-paced'], ['Location', 'Fully remote'], ['This program is for', 'Students\nCareer switchers'], ['Certificates included', '2']],
      },
    ],
    explore: [
      { slug: 'ai4u', title: 'AI4U Programme', desc: 'Leverage generative AI to develop marketing strategies, attract clients, publish content and convert leads', price: 'RM49.90', unit: '/ month', featured: true, seed: 4 },
      { slug: 'dynamous', title: 'Dynamous AI Mastery', desc: 'Use AI to increase accuracy of financial projections. Automate data analysis, reporting and financial tracking', price: 'RM749.90', unit: '/ year', seed: 1 },
      { slug: 'fluency', title: 'AI Fluency for Beginners', desc: 'Learn to embed AI in project management workflows. Convert support tickets into tasks and generate weekly reports with AI.', price: 'FREE', seed: 3 },
      { slug: 'pm', title: 'Project Manager Mastery', desc: 'Learn to embed AI in project management workflows. Convert support tickets into tasks and generate clear reports.', price: 'RM1,680', seed: 0 },
    ],
  },
};

function HubProgrammeBlock({ pg }) {
  return (
    <div>
      <div className="flex items-start justify-between gap-4">
        <div className="flex items-center gap-3">
          <span className="w-9 h-9 rounded-lg flex-shrink-0" style={{ background: 'linear-gradient(135deg, oklch(0.55 0.14 255), oklch(0.35 0.1 270))' }} />
          <h3 className="text-2xl font-black text-[#2563eb]" style={{ fontFamily: _pp }}>{pg.title}</h3>
        </div>
        <Link to={'/web/learning-paths/' + pg.slug} className="flex-shrink-0 h-10 px-5 rounded-full border border-neutral-300 bg-white text-sm font-semibold text-neutral-900 hover:bg-neutral-50 transition-colors inline-flex items-center">Learn More</Link>
      </div>
      <p className="mt-3 max-w-3xl text-[15px] text-neutral-600 leading-relaxed">{pg.desc}</p>
      <div className="mt-5 space-y-2">
        {pg.details.map(([k, v], i) => (
          <div key={i} className="flex gap-4 bg-neutral-50 border border-neutral-100 rounded-xl px-5 py-4">
            <span className="w-44 flex-shrink-0 text-[13px] font-semibold uppercase tracking-wide text-neutral-500 self-center">{k}</span>
            <span className={`text-[15px] font-semibold whitespace-pre-line ${k === 'Certificates included' ? 'text-[#2563eb]' : 'text-neutral-900'}`}>{v}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function HubExploreCard({ c }) {
  return (
    <Link to={'/web/learning-paths/' + c.slug} className={`flex-shrink-0 w-[330px] rounded-2xl border bg-white overflow-hidden group ${c.featured ? 'border-[#fcd34d]' : 'border-neutral-100'}`}>
      <div className="relative">
        <ImageBlock aspect="16/10" seed={c.seed} className="!rounded-none w-full" />
        {c.featured && <span className="absolute top-3 left-3 px-2.5 py-1 rounded bg-[#fde047] text-[12px] font-bold tracking-wide text-neutral-900">FEATURED</span>}
        <span className="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/90 flex items-center justify-center text-neutral-700"><Icon name="heart" size={16} /></span>
      </div>
      <div className="p-5">
        <div className="flex items-center justify-between text-sm">
          <span className="text-neutral-500">Kuala Lumpur, Malaysia</span>
          <span className="inline-flex items-center gap-1 text-neutral-700"><Icon name="star" size={13} fill="currentColor" strokeWidth={0} /> 4.3</span>
        </div>
        <h3 className="mt-2 text-lg font-bold text-neutral-900 group-hover:text-[#2563eb] transition-colors" style={{ fontFamily: _pp }}>{c.title}</h3>
        <p className="mt-1.5 text-[14px] text-neutral-500 leading-snug min-h-[60px]">{c.desc}</p>
        <div className="mt-3 text-right">
          <span className="text-lg font-bold text-neutral-900">{c.price}</span>
          {c.unit && <span className="text-sm text-neutral-500"> {c.unit}</span>}
        </div>
      </div>
    </Link>
  );
}

function WebHubProfilePage({ id }) {
  const base = HUB_PROFILES[id] || HUB_PROFILES['biji-biji'];
  const meta = (typeof HUBS !== 'undefined') ? HUBS.find(x => x.id === id) : null;
  const H = (meta && !HUB_PROFILES[id]) ? {
    ...base,
    name: meta.name,
    type: meta.focus + ' Hub',
    location: meta.city + ', Malaysia',
    rating: meta.rating,
    reviews: meta.members,
    about: meta.name + ' is a ' + meta.city + '-based hub focused on ' + meta.focus.toLowerCase() + '. They run hands-on programmes, workshops and community sessions for makers, learners and organisations across the region.',
    focus: [meta.focus, 'Workshops', 'Community Programmes'],
  } : base;
  const [tab, setTab] = useState('Programmes');
  const railRef = useRef(null);
  const scroll = (d) => { const el = railRef.current; if (el) el.scrollBy({ left: d * 360, behavior: 'smooth' }); };
  const tabs = ['Profile', 'Programmes', 'Portfolio', 'Gallery'];

  return (
    <div className="min-h-screen flex flex-col bg-white" style={{ fontFamily: _la }} data-screen-label={'Hub profile · ' + H.name}>
      <HomeHeader />
      <main className="flex-1">
        {/* Cover */}
        <div className="relative h-[240px] lg:h-[320px]" style={{ background: 'linear-gradient(135deg, oklch(0.8 0.05 60), oklch(0.68 0.08 45))' }}>
          <div className="absolute inset-0 opacity-40" style={{ backgroundImage: 'repeating-linear-gradient(115deg, oklch(0.85 0.04 60) 0 22px, oklch(0.74 0.06 50) 22px 46px)' }} />
          <button className="absolute top-5 right-5 lg:right-8 h-10 px-5 rounded-full bg-white text-sm font-semibold text-neutral-900 shadow hover:bg-neutral-50 inline-flex items-center gap-2">
            <Icon name="send" size={15} /> Share
          </button>
        </div>

        {/* Profile card */}
        <div className="max-w-[min(2100px,92vw)] mx-auto px-5 lg:px-8">
          <div className="-mt-20 mx-auto lg:mx-0 w-full max-w-[440px] bg-white rounded-2xl shadow-xl border border-neutral-100 p-6 relative z-10">
            <div className="flex items-start justify-between">
              <div className="w-20 h-20 rounded-full bg-neutral-900 flex items-center justify-center overflow-hidden">
                <img src="/mereka-logo-white.svg" alt={H.name} style={{ width: 44 }} />
              </div>
              <div className="flex items-center gap-2">
                <button className="w-9 h-9 rounded-lg hover:bg-neutral-100 flex items-center justify-center text-neutral-700"><Icon name="heart" size={18} /></button>
                <button className="w-9 h-9 rounded-lg hover:bg-neutral-100 flex items-center justify-center text-neutral-700"><Icon name="message" size={18} /></button>
              </div>
            </div>
            <h1 className="mt-4 text-2xl font-black text-neutral-900" style={{ fontFamily: _pp }}>{H.name}</h1>
            <p className="mt-1 text-[15px] font-semibold text-neutral-700">{H.type}</p>
            <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-neutral-600">
              <span className="inline-flex items-center gap-1"><Icon name="pin" size={15} /> {H.location}</span>
              <span className="inline-flex items-center gap-1"><Icon name="star" size={14} fill="currentColor" strokeWidth={0} /> {H.rating} ({H.reviews})</span>
            </div>
            <div className="mt-4 flex items-center gap-2">
              {['globe', 'building', 'chat', 'message'].map((ic, i) => (
                <button key={i} className="w-9 h-9 rounded-lg border border-neutral-200 flex items-center justify-center text-neutral-600 hover:bg-neutral-50"><Icon name={ic} size={16} /></button>
              ))}
            </div>
          </div>
        </div>

        {/* Tabs */}
        <div className="border-b border-neutral-200 bg-white mt-8">
          <div className="max-w-[min(2100px,92vw)] mx-auto px-5 lg:px-8">
            <div className="flex items-center gap-2 overflow-x-auto scrollbar-thin">
              {tabs.map(t => (
                <button key={t} onClick={() => setTab(t)}
                  className={`px-5 py-3 rounded-t-lg text-[15px] font-medium whitespace-nowrap transition-colors ${tab === t ? 'text-neutral-900 bg-neutral-100' : 'text-neutral-500 hover:text-neutral-900'}`}>
                  {t}
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* Tab content */}
        <div className="bg-[#fafafa]">
          <div className="max-w-[min(2100px,92vw)] mx-auto px-5 lg:px-8 py-12">
            {tab === 'Programmes' && (
              <div className="space-y-12">
                {H.programmes.map((pg, i) => <HubProgrammeBlock key={i} pg={pg} />)}
              </div>
            )}
            {tab === 'Profile' && (
              <div className="max-w-3xl">
                <h2 className="text-2xl font-black text-neutral-900 mb-3" style={{ fontFamily: _pp }}>About {H.name}</h2>
                <p className="text-[15px] text-neutral-600 leading-relaxed">{H.about}</p>
                <h3 className="mt-8 text-lg font-bold text-neutral-900 mb-3" style={{ fontFamily: _pp }}>Focus areas</h3>
                <div className="flex flex-wrap gap-2">
                  {H.focus.map(f => <span key={f} className="px-4 py-2 rounded-full border border-neutral-200 bg-white text-sm font-medium text-neutral-700">{f}</span>)}
                </div>
              </div>
            )}
            {tab === 'Portfolio' && (
              <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
                {[0, 1, 2, 3, 4, 5].map(i => (
                  <div key={i}>
                    <ImageBlock aspect="4/3" seed={i} className="!rounded-2xl w-full" />
                    <h3 className="mt-2 font-bold text-neutral-900" style={{ fontFamily: _pp }}>Project {i + 1}</h3>
                    <p className="text-sm text-neutral-500">Community workshop &amp; build</p>
                  </div>
                ))}
              </div>
            )}
            {tab === 'Gallery' && (
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                {[0, 1, 2, 3, 4, 5, 6, 7].map(i => <ImageBlock key={i} aspect="1/1" seed={i} className="!rounded-2xl w-full" />)}
              </div>
            )}
          </div>
        </div>

        {/* Explore other programmes */}
        <section className="bg-white py-14">
          <div className="max-w-[min(2560px,95vw)] mx-auto px-5 lg:px-8">
            <h2 className="text-3xl lg:text-4xl font-black text-neutral-900 mb-7" style={{ fontFamily: _pp }}>Explore Other Programmes</h2>
            <div className="relative">
              <button onClick={() => scroll(1)} className="hidden lg:flex absolute -right-4 top-[120px] z-10 w-11 h-11 rounded-full bg-white border border-neutral-200 shadow items-center justify-center hover:bg-neutral-50"><Icon name="chevronRight" size={18} /></button>
              <div ref={railRef} className="flex gap-5 overflow-x-auto scrollbar-thin pb-2 -mx-1 px-1">
                {H.explore.map((c, i) => <HubExploreCard key={i} c={c} />)}
              </div>
            </div>
          </div>
        </section>
      </main>
      <HomeFooter />
    </div>
  );
}

Object.assign(window, { WebHubProfilePage, HUB_PROFILES });