// Work grid, Team band, Pricing toggle

function Work() {
  const projects = [
    { tags: ['F&B', 'Automation'], t: 'WhatsApp ordering for 14 outlets', kpi: '↓ 94% admin time', tone: '#d8542a' },
    { tags: ['E-commerce', 'Dashboards'], t: 'Unified margin dashboard, 4 channels', kpi: '+ RM 320k recovered', tone: '#3a5d4f' },
    { tags: ['Logistics', 'AI Agent'], t: 'Customer support agent, 78% solo', kpi: '↑ 4.7 / 5 CSAT', tone: '#3a4763' },
    { tags: ['Manufacturing', 'Internal'], t: 'Approvals & vendor checks tool', kpi: '38 hrs / mo / staff', tone: '#7a5b3a' },
  ];
  return (
    <section className="sec" id="work" style={{ background: 'var(--bg-2)' }}>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64, flexWrap: 'wrap', gap: 24 }} className="reveal">
          <div>
            <SlashTag>SELECTED WORK</SlashTag>
            <h2 className="h-section serif" style={{ marginTop: 28, maxWidth: '15ch' }}>
              Things we've shipped, <span className="italic">in production.</span>
            </h2>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }} className="work-grid">
          {projects.map((p, i) => <WorkCard key={i} {...p} idx={i} />)}
        </div>
        <div className="mono reveal" style={{ marginTop: 32, color: 'var(--mute)', fontSize: 13, letterSpacing: '0.04em', textTransform: 'uppercase' }}>
          More exciting case studies coming soon.
        </div>
        <style>{`@media (max-width: 880px) { .work-grid { grid-template-columns: 1fr !important; } }`}</style>
      </div>
    </section>
  );
}

function WorkCard({ tags, t, kpi, tone, idx }) {
  return (
    <a href="#" className="reveal" style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
      <div style={{
        position: 'relative',
        aspectRatio: '4 / 3',
        background: tone,
        borderRadius: 18,
        overflow: 'hidden',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        padding: 28,
        color: 'rgba(255,255,255,0.92)',
      }}>
        <WorkArt idx={idx} />
        <div style={{ display: 'flex', gap: 8, position: 'relative', zIndex: 2, flexWrap: 'wrap' }}>
          {tags.map(tag => (
            <span key={tag} className="mono" style={{ fontSize: 11, padding: '6px 12px', borderRadius: 999, background: 'rgba(0,0,0,0.25)', backdropFilter: 'blur(8px)', border: '1px solid rgba(255,255,255,0.15)' }}>{tag}</span>
          ))}
        </div>
        <div style={{ position: 'relative', zIndex: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 20 }}>
          <div className="serif" style={{ fontSize: 'clamp(22px, 2.4vw, 32px)', lineHeight: 1.1, letterSpacing: '-0.02em', maxWidth: '14ch' }}>{t}</div>
          <div className="mono" style={{ fontSize: 12, opacity: 0.85, whiteSpace: 'nowrap' }}>{kpi}</div>
        </div>
      </div>
    </a>
  );
}

function WorkArt({ idx }) {
  // simple decorative svg backgrounds — abstract, not slop
  return (
    <div style={{ position: 'absolute', inset: 0, opacity: 0.32, pointerEvents: 'none' }}>
      <svg width="100%" height="100%" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
        {idx === 0 && <>
          {[...Array(8)].map((_, i) => <circle key={i} cx={50 + i*45} cy={150 + Math.sin(i)*60} r={3 + i*1.5} fill="white" opacity={0.6 - i*0.05} />)}
          <path d="M 50 150 Q 200 60 350 200" stroke="white" strokeWidth="1" fill="none" opacity="0.5" />
        </>}
        {idx === 1 && <>
          {[...Array(6)].map((_, i) => <rect key={i} x={50 + i*55} y={250 - i*18} width="32" height={i*18 + 10} fill="white" opacity={0.4 + i*0.08} />)}
        </>}
        {idx === 2 && <>
          <circle cx="200" cy="150" r="60" stroke="white" strokeWidth="1" fill="none" />
          <circle cx="200" cy="150" r="100" stroke="white" strokeWidth="1" fill="none" opacity="0.6" />
          <circle cx="200" cy="150" r="140" stroke="white" strokeWidth="1" fill="none" opacity="0.3" />
          <circle cx="200" cy="150" r="6" fill="white" />
        </>}
        {idx === 3 && <>
          {[...Array(12)].map((_, i) => <line key={i} x1={50 + i*28} y1="50" x2={50 + i*28} y2="250" stroke="white" strokeWidth="1" opacity={0.3 + (i%4)*0.15} />)}
        </>}
      </svg>
    </div>
  );
}

function Team() {
  return (
    <section className="sec sec-dark" id="team">
      <div className="wrap">
        <div style={{ marginBottom: 56 }} className="reveal"><SlashTag dark>THE TEAM</SlashTag></div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 64, alignItems: 'flex-end' }} className="team-grid">
          <h2 className="h-section serif reveal r-d-1" style={{ color: 'var(--dark-text)' }}>
            <SplitWords>A small team</SplitWords>
            <SplitWords delay={300}><span className="italic"> of senior</span> operators.</SplitWords>
          </h2>
          <p className="lede on-dark reveal r-d-2" style={{ margin: 0 }}>
            Eight engineers, designers and ex-founders. No juniors. No layers. The person who scopes your project is the one who builds it.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, marginTop: 96, background: 'var(--dark-line)', border: '1px solid var(--dark-line)' }} className="team-band reveal r-d-3">
          {[
            { n: '8', l: 'Senior makers' },
            { n: '12yr', l: 'Avg experience' },
            { n: '120+', l: 'Workflows shipped' },
            { n: 'KL', l: 'Headquartered' },
          ].map((s, i) => (
            <div key={i} style={{ background: 'var(--dark-bg)', padding: '40px 28px' }}>
              <div className="serif" style={{ fontSize: 'clamp(48px, 5vw, 80px)', lineHeight: 1, letterSpacing: '-0.02em', color: 'var(--dark-text)' }}>{s.n}</div>
              <div className="mono" style={{ fontSize: 12, color: 'var(--dark-mute)', marginTop: 14 }}>{s.l}</div>
            </div>
          ))}
        </div>
        <style>{`@media (max-width: 880px) { .team-grid { grid-template-columns: 1fr !important; gap: 32px !important; } .team-band { grid-template-columns: repeat(2, 1fr) !important; } }`}</style>
      </div>
    </section>
  );
}

function Pricing() {
  const [selectedTier, setSelectedTier] = React.useState(null);
  const [pricingMode, setPricingMode] = React.useState('subscription');
  const tiers = [
    {
      id: 'starter',
      name: 'Starter',
      headline: "Start Your Digitalising Journey",
      positioning: "Digital improvement support for SMEs",
      bestFor: "Small SMEs starting digitalisation",
      typicalCustomer: ["Small business owner", "Clinic", "Training centre", "Service company", "Small distributor"],
      painPoint: "We need small fixes and automation, but cannot hire a developer.",
      minimumContract: "3 months",
      developmentScope: ["Minor changes", "Small feature enhancements", "Simple internal tools", "Basic automation"],
      mainDeliverables: ["Small fixes", "Simple automation", "Basic dashboard", "Minor system improvements", "Technical support"],
      systemIntegration: ["Light API integration", "Google Sheets integration", "Basic WhatsApp/email connection", "Simple third-party automation"],
      maintenance: ["Minor bug fixing", "Basic support", "Small improvement requests"],
      price: 3500,
      monthlyRange: "3k - 5k",
      annualRange: "32k - 50k",
      setup: "2k – 3k",
      capacity: "Monthly improvement capacity",
      capacityHours: "20 hrs",
      includes: ["Small fixes", "Simple automation", "Basic dashboard", "Website updates"],
      meetings: "Monthly",
      active_requests: 1,
      response: "2-3 business days",
      revisions: "1 round per task",
      support: "Standard",
      outcome: "Reduce manual work",
      cta: "Start Small"
    },
    {
      id: 'growth',
      name: 'Growth',
      headline: "Build Your Business System",
      positioning: "Software team-as-a-service",
      bestFor: "Growing SMEs needing regular system development",
      typicalCustomer: ["Manufacturer", "Distributor", "Multi-branch SME", "Professional service firm"],
      painPoint: "Our business is growing, but Excel, WhatsApp, and manual work are slowing us down.",
      minimumContract: "3-6 months",
      developmentScope: ["Regular feature development", "Internal business systems", "Workflow automation", "Dashboard and reporting systems", "Custom admin panels"],
      mainDeliverables: ["Internal system development", "Dashboard", "API integration", "Workflow automation", "AI productivity tools", "Monthly roadmap planning", "Ongoing maintenance"],
      systemIntegration: ["CRM integration", "Accounting software integration", "Payment gateway integration", "WhatsApp API integration", "Inventory system integration", "Email automation integration"],
      maintenance: ["Bug fixing", "Minor enhancements", "Release support", "System monitoring"],
      price: 9800,
      monthlyRange: "8k - 15k",
      annualRange: "85k - 150k",
      setup: "5k – 8k",
      capacity: "Monthly delivery sprint",
      capacityHours: "50-70 hrs",
      includes: ["Custom systems", "Integrations", "AI automation", "Dashboard", "Maintenance"],
      meetings: "Twice monthly",
      active_requests: 2,
      response: "1-2 business days",
      revisions: "2 rounds per task",
      support: "Priority",
      outcome: "Build and improve internal systems",
      cta: "Build With Us",
      featured: true
    },
    {
      id: 'scale',
      name: 'Scale',
      headline: "Scale Your Digital Product",
      positioning: "Dedicated digital product squad",
      bestFor: "Companies building advanced systems or SaaS",
      typicalCustomer: ["Multi-branch business", "Regional SME", "SaaS startup", "Enterprise supplier"],
      painPoint: "We need a serious software or AI system but do not want to build an internal tech team yet.",
      minimumContract: "6-12 months",
      developmentScope: ["Advanced system development", "SaaS product development", "Customer portals", "Multi-role enterprise systems", "AI-powered applications", "Cloud-native architecture"],
      mainDeliverables: ["Full system development", "SaaS MVP", "Customer portal", "Advanced AI solutions", "Cloud architecture", "Analytics dashboard", "Advanced integrations", "Priority support"],
      systemIntegration: ["Complex enterprise integrations", "Internal and external API orchestration", "Cloud service integration", "Multi-system workflow integration", "Advanced payment/accounting integration"],
      maintenance: ["Priority maintenance", "Continuous improvement", "Monitoring and uptime management", "Performance optimisation", "Deployment management"],
      price: 24000,
      monthlyRange: "20k - 40k+",
      annualRange: "220k - 450k+",
      setup: "10k – 20k",
      capacity: "Product squad capacity",
      capacityHours: "120-180 hrs",
      includes: ["Product roadmap", "Advanced systems", "AI solutions", "Cloud architecture", "Analytics"],
      meetings: "Weekly",
      active_requests: "3-4",
      response: "Same or next business day",
      revisions: "2-3 rounds",
      support: "Priority Plus",
      outcome: "Build scalable software and AI capability",
      cta: "Scale With a Squad"
    }
  ];
  const projectModels = [
    {
      id: 'custom-build',
      name: 'Custom System Build',
      headline: 'Ship a Defined Business System',
      positioning: 'Fixed-scope delivery for portals, dashboards, automations, integrations, and internal operating systems.',
      priceLabel: 'Fixed scope',
      timeline: '4-12 weeks',
      bestFor: 'Companies with a known problem, budget, and launch window.',
      includes: ['Discovery and specification', 'UX and system design', 'Development and testing', 'Launch handover'],
      cta: 'Request Proposal',
      featured: true
    }
  ];
  const isSubscription = pricingMode === 'subscription';

  return (
    <section className="sec" id="pricing">
      <div className="wrap">
        <div style={{ marginBottom: 46 }} className="reveal">
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) auto', gap: 32, alignItems: 'end' }} className="pricing-head">
            <div>
              <SlashTag>PRICING</SlashTag>
              <h2 className="h-section serif" style={{ marginTop: 28, maxWidth: '18ch' }}>
                Predictable costs, <span className="italic">scalable</span> velocity.
              </h2>
            </div>

            <div role="tablist" aria-label="Pricing models" style={{
              display: 'inline-grid',
              gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
              gap: 6,
              padding: 6,
              borderRadius: 999,
              border: '1px solid var(--line)',
              background: 'rgba(255,255,255,0.035)',
              minWidth: 360,
            }} className="pricing-tabs">
              {[
                ['subscription', 'Subscription'],
                ['project', 'Project-Based'],
              ].map(([mode, label]) => {
                const active = pricingMode === mode;
                return (
                  <button
                    key={mode}
                    type="button"
                    role="tab"
                    aria-selected={active}
                    onClick={() => setPricingMode(mode)}
                    style={{
                      appearance: 'none',
                      border: active ? '1px solid var(--line-2)' : '1px solid transparent',
                      background: active ? 'var(--ink)' : 'transparent',
                      color: active ? 'var(--bg)' : 'var(--mute)',
                      borderRadius: 999,
                      padding: '13px 18px',
                      font: '600 13px/1 Geist, system-ui, sans-serif',
                      letterSpacing: 0,
                      cursor: 'default',
                      transition: 'background 220ms ease, color 220ms ease, border-color 220ms ease',
                      whiteSpace: 'nowrap',
                    }}
                  >
                    {label}
                  </button>
                );
              })}
            </div>
          </div>
        </div>

        {isSubscription ? (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="price-grid">
            {tiers.map((t, i) => <PriceCard key={t.id} tier={t} idx={i} onDetails={() => setSelectedTier(t)} />)}
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr)', gap: 24, width: 'min(100%, 460px)', margin: '0 auto' }} className="price-grid">
            {projectModels.map((model, i) => <ProjectPriceCard key={model.id} model={model} idx={i} />)}
          </div>
        )}

        {isSubscription ? <ScopeManagement /> : <ProjectScope />}
        {selectedTier && <PricingDetailModal tier={selectedTier} onClose={() => setSelectedTier(null)} />}

        <div style={{ textAlign: 'center', marginTop: 64, fontSize: 13, color: 'var(--mute)' }} className="mono">
          {isSubscription
            ? 'All prices in MYR · 6% SST not included · Pause or cancel with 30 days notice'
            : 'All proposals quoted in MYR · 6% SST not included · Final scope confirmed after discovery'}
        </div>
        <style>{`
          @media (max-width: 980px) {
            .price-grid { grid-template-columns: 1fr !important; }
            .pricing-head { grid-template-columns: 1fr !important; align-items: start !important; }
            .pricing-tabs { width: 100% !important; min-width: 0 !important; }
          }
          @media (max-width: 520px) {
            .pricing-tabs { grid-template-columns: 1fr !important; border-radius: 18px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function PriceCard({ tier, idx, onDetails }) {
  const { name, headline, price, capacityHours, meetings, active_requests, outcome, cta, featured } = tier;
  const essentials = [
    { label: 'Capacity', value: `${capacityHours} equivalent` },
    { label: 'Active', value: `${active_requests} request${active_requests !== 1 ? 's' : ''}` },
    { label: 'Sync', value: meetings },
  ];

  return (
    <div className={`reveal in r-d-${idx + 1}`} style={{
      background: featured ? 'linear-gradient(180deg, rgba(6,182,212,0.14), rgba(255,255,255,0.035) 42%, rgba(255,255,255,0.02))' : 'transparent',
      color: 'var(--ink)',
      border: featured ? '1px solid var(--line-2)' : '1px solid var(--line)',
      borderRadius: 20, padding: 34,
      display: 'flex', flexDirection: 'column',
      position: 'relative',
      minHeight: 520,
      overflow: 'hidden',
      transition: 'transform 300ms ease',
    }}>
      {featured && <div style={{ position: 'absolute', top: 18, right: 18, fontSize: 10, padding: '4px 10px', borderRadius: 999, background: 'var(--accent)', color: '#000', fontWeight: 600, fontFamily: 'Geist, sans-serif' }}>MOST POPULAR</div>}
      
      <div className="mono" style={{ fontSize: 12, color: 'var(--mute)', marginBottom: 8, letterSpacing: '0.05em', textTransform: 'uppercase' }}>{name}</div>
      <h3 className="serif" style={{ fontSize: 34, margin: '0 0 12px 0', lineHeight: 1.04 }}>{headline}</h3>
      <p style={{ fontSize: 14, color: 'var(--mute)', margin: 0, lineHeight: 1.5, minHeight: '3.1em' }}>{outcome}</p>

      <div style={{ marginTop: 32, marginBottom: 8 }}>
        <span className="mono" style={{ fontSize: 11, color: 'var(--accent)', marginRight: 10 }}>FROM</span>
        <span className="serif" style={{ fontSize: 56, lineHeight: 1, letterSpacing: '-0.02em' }}>RM {(price / 1000).toFixed(price >= 10000 ? 0 : 1)}k</span>
        <span style={{ fontSize: 14, color: 'var(--mute)', marginLeft: 8 }}>/ month</span>
      </div>

      <div style={{ height: 1, background: 'var(--line)', margin: '32px 0' }} />

      <div style={{ display: 'grid', gap: 12, flex: 1 }}>
        {essentials.map(item => (
          <div key={item.label} style={{ display: 'flex', justifyContent: 'space-between', gap: 18, alignItems: 'center', padding: '14px 0', borderBottom: '1px solid var(--line)' }}>
            <span className="mono" style={{ fontSize: 11, color: 'var(--mute)', textTransform: 'uppercase' }}>{item.label}</span>
            <span style={{ fontSize: 14, color: 'var(--ink-2)', textAlign: 'right' }}>{item.value}</span>
          </div>
        ))}
      </div>

      <button type="button" onClick={onDetails} className="btn btn-ghost" style={{ marginTop: 30, justifyContent: 'center', width: '100%', borderColor: 'var(--line-2)', color: 'var(--ink)', background: 'rgba(255,255,255,0.03)' }}>
        View plan details
      </button>
      <a href="#contact" className={`btn ${featured ? 'btn-dark' : 'btn-light'}`} style={{ marginTop: 12, justifyContent: 'center', width: '100%' }}>
        {cta}<span className="arr"><svg width="11" height="11" viewBox="0 0 11 11" fill="none"><path d="M2 9 L9 2 M3.5 2 L9 2 L9 7.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg></span>
      </a>
    </div>
  );
}

function ProjectPriceCard({ model, idx }) {
  const { name, headline, positioning, priceLabel, timeline, bestFor, includes, cta, featured } = model;
  const essentials = [
    { label: 'Pricing', value: priceLabel },
    { label: 'Timeline', value: timeline },
    { label: 'Best for', value: bestFor },
  ];

  return (
    <div className={`reveal in r-d-${idx + 1}`} style={{
      background: featured ? 'linear-gradient(180deg, rgba(6,182,212,0.14), rgba(255,255,255,0.035) 42%, rgba(255,255,255,0.02))' : 'transparent',
      color: 'var(--ink)',
      border: featured ? '1px solid var(--line-2)' : '1px solid var(--line)',
      borderRadius: 20, padding: 34,
      display: 'flex', flexDirection: 'column',
      position: 'relative',
      minHeight: 520,
      overflow: 'hidden',
      transition: 'transform 300ms ease',
    }}>
      {featured && <div style={{ position: 'absolute', top: 18, right: 18, fontSize: 10, padding: '4px 10px', borderRadius: 999, background: 'var(--accent)', color: '#000', fontWeight: 600, fontFamily: 'Geist, sans-serif' }}>MOST REQUESTED</div>}

      <div className="mono" style={{ fontSize: 12, color: 'var(--mute)', marginBottom: 8, letterSpacing: '0.05em', textTransform: 'uppercase' }}>{name}</div>
      <h3 className="serif" style={{ fontSize: 34, margin: '0 0 12px 0', lineHeight: 1.04 }}>{headline}</h3>
      <p style={{ fontSize: 14, color: 'var(--mute)', margin: 0, lineHeight: 1.5, minHeight: '4.7em' }}>{positioning}</p>

      <div style={{ marginTop: 32, marginBottom: 8 }}>
        <span className="mono" style={{ fontSize: 11, color: 'var(--accent)', marginRight: 10 }}>MODEL</span>
        <span className="serif" style={{ fontSize: 48, lineHeight: 1, letterSpacing: '-0.02em' }}>{priceLabel}</span>
      </div>

      <div style={{ height: 1, background: 'var(--line)', margin: '32px 0' }} />

      <div style={{ display: 'grid', gap: 12, flex: 1 }}>
        {essentials.map(item => (
          <div key={item.label} style={{
            display: 'grid',
            gridTemplateColumns: item.label === 'Best for' ? '1fr' : 'auto 1fr',
            gap: item.label === 'Best for' ? 8 : 18,
            alignItems: 'center',
            padding: '14px 0',
            borderBottom: '1px solid var(--line)'
          }}>
            <span className="mono" style={{ fontSize: 11, color: 'var(--mute)', textTransform: 'uppercase' }}>{item.label}</span>
            <span style={{ fontSize: 14, color: 'var(--ink-2)', textAlign: item.label === 'Best for' ? 'left' : 'right', lineHeight: 1.45 }}>{item.value}</span>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 28, display: 'grid', gap: 10 }}>
        {includes.map(item => (
          <div key={item} style={{ display: 'flex', gap: 10, color: 'var(--ink-2)', fontSize: 13, lineHeight: 1.35 }}>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--accent)', flex: '0 0 5px', marginTop: 7 }} />
            <span>{item}</span>
          </div>
        ))}
      </div>

      <a href="#contact" className={`btn ${featured ? 'btn-dark' : 'btn-light'}`} style={{ marginTop: 30, justifyContent: 'center', width: '100%' }}>
        {cta}<span className="arr"><svg width="11" height="11" viewBox="0 0 11 11" fill="none"><path d="M2 9 L9 2 M3.5 2 L9 2 L9 7.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg></span>
      </a>
    </div>
  );
}

function PricingDetailModal({ tier, onClose }) {
  React.useEffect(() => {
    const onKey = (event) => {
      if (event.key === 'Escape') onClose();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  const specs = [
    { label: 'Best for', value: tier.bestFor },
    { label: 'Capacity', value: `${tier.capacityHours} equivalent · ${tier.capacity}` },
    { label: 'Response time', value: tier.response },
    { label: 'Revisions', value: tier.revisions },
    { label: 'Support', value: tier.support },
  ];
  const detailGroups = [
    { label: 'Software scope', items: tier.developmentScope },
    { label: 'Deliverables', items: tier.mainDeliverables },
    { label: 'Integration', items: tier.systemIntegration },
    { label: 'Maintenance', items: tier.maintenance },
  ];
  const scopeRules = [
    ['Delivery model', 'Priority-based roadmap with task approval and effort estimation before build.'],
    ['Progress visibility', 'Shared board, regular updates, and delivery report.'],
  ];

  return (
    <div role="dialog" aria-modal="true" aria-label={`${tier.name} pricing details`} style={{
      position: 'fixed', inset: 0, zIndex: 100,
      background: 'rgba(0,0,0,0.72)',
      backdropFilter: 'blur(18px)',
      WebkitBackdropFilter: 'blur(18px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 20,
    }}>
      <button type="button" aria-label="Close pricing details" onClick={onClose} style={{ position: 'absolute', inset: 0, appearance: 'none', border: 0, background: 'transparent', cursor: 'default' }} />
      <div style={{
        position: 'relative',
        width: 'min(1040px, 100%)',
        maxHeight: 'min(760px, calc(100vh - 40px))',
        overflow: 'auto',
        borderRadius: 22,
        border: '1px solid var(--line-2)',
        background: 'linear-gradient(145deg, #08080b 0%, #101018 52%, #050505 100%)',
        boxShadow: '0 28px 90px rgba(0,0,0,0.55)',
      }}>
        <button type="button" onClick={onClose} aria-label="Close pricing details" style={{
          position: 'absolute', top: 18, right: 18, zIndex: 2,
          width: 38, height: 38, borderRadius: '50%',
          border: '1px solid var(--line-2)',
          background: 'rgba(255,255,255,0.06)',
          color: 'var(--ink)', display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'default',
        }}>
          <svg width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M2 2 L11 11 M11 2 L2 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
        </button>

        <div className="price-modal-grid" style={{ display: 'grid', gridTemplateColumns: '0.92fr 1.3fr', minHeight: 560 }}>
          <div style={{ padding: 36, borderRight: '1px solid var(--line)', display: 'flex', flexDirection: 'column', gap: 28 }}>
            <div>
              <div className="mono" style={{ fontSize: 12, color: 'var(--accent)', marginBottom: 12 }}>{tier.name.toUpperCase()} PLAN</div>
              <h3 className="serif" style={{ fontSize: 'clamp(38px, 5vw, 64px)', lineHeight: 0.98, margin: 0, letterSpacing: '-0.025em' }}>{tier.headline}</h3>
              <p style={{ margin: '18px 0 0', color: 'var(--mute)', fontSize: 16, lineHeight: 1.55 }}>{tier.positioning}</p>
            </div>

            <div style={{ padding: 24, borderRadius: 18, background: 'rgba(255,255,255,0.05)', border: '1px solid var(--line)' }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--mute)', marginBottom: 10 }}>STARTS FROM</div>
              <div>
                <span className="serif" style={{ fontSize: 58, lineHeight: 1 }}>RM {(tier.price / 1000).toFixed(tier.price >= 10000 ? 0 : 1)}k</span>
                <span style={{ fontSize: 14, color: 'var(--mute)', marginLeft: 8 }}>/ month</span>
              </div>
              <div style={{ marginTop: 14, color: 'var(--mute)', fontSize: 13, lineHeight: 1.5 }}>
                Subscription requests are unlimited, delivery is prioritised within monthly capacity.
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 0.64fr', gap: 12 }} className="price-fit-grid">
              <div style={{ padding: 18, borderRadius: 16, border: '1px solid rgba(6,182,212,0.32)', background: 'linear-gradient(135deg, rgba(6,182,212,0.11), rgba(255,255,255,0.025))' }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', marginBottom: 10, textTransform: 'uppercase' }}>Pain point</div>
                <div style={{ color: 'var(--ink)', fontSize: 15, lineHeight: 1.45 }}>{tier.painPoint}</div>
              </div>
              <div style={{ padding: 18, borderRadius: 16, border: '1px solid var(--line)', background: 'rgba(255,255,255,0.025)' }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--mute)', marginBottom: 10, textTransform: 'uppercase' }}>Minimum contract</div>
                <div className="serif" style={{ color: 'var(--ink)', fontSize: 30, lineHeight: 1 }}>{tier.minimumContract}</div>
              </div>
            </div>

            <div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--mute)', marginBottom: 12, textTransform: 'uppercase' }}>Typical customer</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {tier.typicalCustomer.map(item => (
                  <span key={item} style={{ fontSize: 12, color: 'var(--ink-2)', padding: '8px 10px', borderRadius: 999, border: '1px solid var(--line)', background: 'rgba(255,255,255,0.03)' }}>{item}</span>
                ))}
              </div>
            </div>

            <div style={{ borderTop: '1px solid var(--line)', paddingTop: 22, display: 'grid', gap: 14 }}>
              {scopeRules.map(([label, value]) => (
                <div key={label}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--mute)', marginBottom: 6, textTransform: 'uppercase' }}>{label}</div>
                  <div style={{ color: 'var(--ink-2)', fontSize: 13, lineHeight: 1.5 }}>{value}</div>
                </div>
              ))}
            </div>

            <a href="#contact" onClick={onClose} className="btn btn-dark" style={{ justifyContent: 'center', width: '100%', marginTop: 'auto' }}>
              {tier.cta}<span className="arr"><ArrowSm /></span>
            </a>
          </div>

          <div style={{ padding: '36px 36px 32px' }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 14 }} className="price-spec-grid">
              {specs.map(item => (
                <div key={item.label} style={{ padding: 18, borderRadius: 16, border: '1px solid var(--line)', background: 'rgba(255,255,255,0.025)' }}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--mute)', marginBottom: 8, textTransform: 'uppercase' }}>{item.label}</div>
                  <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.45 }}>{item.value}</div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 14 }} className="price-detail-grid">
              {detailGroups.map(group => (
                <div key={group.label} style={{ padding: 18, borderRadius: 18, border: '1px solid var(--line)', background: 'rgba(255,255,255,0.02)' }}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', marginBottom: 12, textTransform: 'uppercase' }}>{group.label}</div>
                  <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gap: 9 }}>
                    {group.items.map(item => (
                      <li key={item} style={{ display: 'flex', gap: 9, color: 'var(--ink-2)', fontSize: 13, lineHeight: 1.42 }}>
                        <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--accent)', flex: '0 0 5px', marginTop: 7 }} />
                        <span>{item}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 880px) {
            .price-modal-grid { grid-template-columns: 1fr !important; }
            .price-modal-grid > div:first-child { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
            .price-spec-grid { grid-template-columns: 1fr !important; }
            .price-fit-grid { grid-template-columns: 1fr !important; }
            .price-detail-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </div>
  );
}

function ScopeManagement() {
  const details = [
    { label: 'Delivery Model', value: 'Priority-based within monthly capacity' },
    { label: 'Unused Capacity', value: '30% rollover (valid for 1 month)' },
    { label: 'Visibility', value: 'Shared board, weekly updates, delivery reports' },
  ];

  const exclusions = [
    "24/7 support", "Unlimited revisions", "Full ERP implementation", 
    "Large mobile apps", "Data migration", "Security audits", 
    "Hardware setup", "Subscription fees", "Data entry"
  ];

  const separate = [
    "New SaaS platforms", "Mobile app dev", "Large system rebuilds", 
    "Complex AI implementation", "Enterprise integrations"
  ];

  return (
    <div className="reveal in" style={{ marginTop: 120, borderTop: '1px solid var(--line)', paddingTop: 64 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64 }} className="scope-grid">
        <div>
          <h3 className="serif" style={{ fontSize: 32, marginBottom: 24 }}>How we manage <span className="italic">scope.</span></h3>
          <p className="lede" style={{ fontSize: 16 }}>We operate as an extension of your team. Clear roadmaps and priority-based delivery ensure you always get the most value from your capacity.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 40 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            {details.map(d => (
              <div key={d.label}>
                <div className="mono" style={{ fontSize: 11, color: 'var(--mute)', marginBottom: 4 }}>{d.label}</div>
                <div style={{ fontSize: 15 }}>{d.value}</div>
              </div>
            ))}
          </div>
          <div style={{ background: 'rgba(255,255,255,0.02)', borderRadius: 16, padding: 24, border: '1px solid var(--line)' }}>
             <div className="mono" style={{ fontSize: 11, color: 'var(--mute)', marginBottom: 16 }}>NOT INCLUDED IN SUBSCRIPTION</div>
             <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 16px' }}>
                {exclusions.map(e => <span key={e} style={{ fontSize: 12, color: 'var(--mute-2)' }}>• {e}</span>)}
             </div>
             <div style={{ height: 1, background: 'var(--line)', margin: '20px 0' }} />
             <div className="mono" style={{ fontSize: 11, color: 'var(--mute)', marginBottom: 8 }}>SEPARATE QUOTE REQUIRED</div>
             <div style={{ fontSize: 12, color: 'var(--mute-2)', lineHeight: 1.5 }}>
                {separate.join(', ')}
             </div>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 880px) { .scope-grid { grid-template-columns: 1fr !important; gap: 48px !important; } .scope-grid > div:last-child { grid-template-columns: 1fr !important; } }`}</style>
    </div>
  );
}

function ProjectScope() {
  const details = [
    { label: 'Engagement Model', value: 'Defined scope, milestones, acceptance criteria, and delivery timeline' },
    { label: 'Proposal Basis', value: 'Quoted after discovery, requirements review, and technical sizing' },
    { label: 'Handover', value: 'Source code, documentation, deployment notes, and launch support' },
  ];

  const included = [
    "Discovery", "Solution design", "Project plan", 
    "Development", "Testing", "Launch support", 
    "Documentation", "Team handover"
  ];

  const separate = [
    "Ongoing product support", "New feature phases", "Third-party subscription fees", 
    "Large data migration", "Hardware procurement"
  ];

  return (
    <div className="reveal in" style={{ marginTop: 120, borderTop: '1px solid var(--line)', paddingTop: 64 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64 }} className="scope-grid">
        <div>
          <h3 className="serif" style={{ fontSize: 32, marginBottom: 24 }}>How project scope <span className="italic">works.</span></h3>
          <p className="lede" style={{ fontSize: 16 }}>Project-based work is best when the goal is clear and the delivery can be shaped into a defined phase. We quote against outcomes, complexity, and implementation risk.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 40 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            {details.map(d => (
              <div key={d.label}>
                <div className="mono" style={{ fontSize: 11, color: 'var(--mute)', marginBottom: 4 }}>{d.label}</div>
                <div style={{ fontSize: 15 }}>{d.value}</div>
              </div>
            ))}
          </div>
          <div style={{ background: 'rgba(255,255,255,0.02)', borderRadius: 16, padding: 24, border: '1px solid var(--line)' }}>
             <div className="mono" style={{ fontSize: 11, color: 'var(--mute)', marginBottom: 16 }}>TYPICALLY INCLUDED</div>
             <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 16px' }}>
                {included.map(e => <span key={e} style={{ fontSize: 12, color: 'var(--mute-2)' }}>• {e}</span>)}
             </div>
             <div style={{ height: 1, background: 'var(--line)', margin: '20px 0' }} />
             <div className="mono" style={{ fontSize: 11, color: 'var(--mute)', marginBottom: 8 }}>SEPARATE COMMERCIAL SCOPE</div>
             <div style={{ fontSize: 12, color: 'var(--mute-2)', lineHeight: 1.5 }}>
                {separate.join(', ')}
             </div>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 880px) { .scope-grid { grid-template-columns: 1fr !important; gap: 48px !important; } .scope-grid > div:last-child { grid-template-columns: 1fr !important; } }`}</style>
    </div>
  );
}

Object.assign(window, { Work, Team, Pricing });