// Aerixlab.com — marketing site
// Periwinkle pastel · light mode · 4 sections (Hero, Features, Pricing, CTA+Footer)

const SITE = {
  ink: '#1A1F3D',
  inkSoft: '#3F4566',
  paper: '#FFFFFF',
  surface: '#F7F8FE',
  tint: '#E8EBFC',
  brand: '#7986F0',
  brandHover: '#6470DE',
  brandSoft: '#B7BFF6',
  brandPale: '#DDE2FA',
  mute: '#6B6F8E',
  line: '#E5E7F4',
  success: '#16A572',
  successSoft: '#D7F2E5',
};

const APP_URL = 'https://app.aerixlab.com';

// ---------- RESPONSIVE ----------
// Two breakpoints: <= 640px (mobile), <= 1024px (tablet)
function useViewport() {
  const get = () => {
    const w = typeof window === 'undefined' ? 1200 : window.innerWidth;
    return { w, isMobile: w <= 640, isTablet: w <= 1024 };
  };
  const [vp, setVp] = React.useState(get);
  React.useEffect(() => {
    const onR = () => setVp(get());
    window.addEventListener('resize', onR);
    return () => window.removeEventListener('resize', onR);
  }, []);
  return vp;
}

// ---------- TWEAK CONTEXT ----------

const TweakCtx = React.createContext({});
function useT() { return React.useContext(TweakCtx); }

// Resolves the announcement copy template, replacing {days} with the actual value.
function resolveCopy(template, days) {
  return (template || '').replace(/\{days\}/g, days);
}

// CTA text — uses trial language when trialDays > 0
function primaryCtaLabel(days, baseFree = 'Start free') {
  return days > 0 ? `Start ${days}-day free trial` : baseFree;
}

// ---------- LOGO MARK ----------

function Cyclone({ size = 36, color = SITE.brand, ink = SITE.ink, strokeW = 6, swirlW = 7 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 120 120" fill="none">
      <path d="M60 14 L102 38 L102 86 L60 110 L18 86 L18 38 Z" stroke={ink} strokeWidth={strokeW} strokeLinejoin="miter" />
      <g transform="translate(60 62)">
        <path d="M -28 0 A 28 28 0 0 1 0 -28" stroke={color} strokeWidth={swirlW} strokeLinecap="round" fill="none" />
        <path d="M -28 0 A 28 28 0 0 1 0 -28" stroke={color} strokeWidth={swirlW} strokeLinecap="round" fill="none" transform="rotate(120)" opacity="0.7" />
        <path d="M -28 0 A 28 28 0 0 1 0 -28" stroke={color} strokeWidth={swirlW} strokeLinecap="round" fill="none" transform="rotate(240)" opacity="0.45" />
        <circle r="4.5" fill={ink} />
        <circle r="2" fill={color} />
      </g>
    </svg>
  );
}

function Logo({ size = 28 }) {
  return (
    <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
      <Cyclone size={size} />
      <span style={{ fontSize: size * 0.65, fontWeight: 600, letterSpacing: '-0.02em', color: SITE.ink }}>
        aerix<span style={{ color: SITE.brand }}>lab</span>
      </span>
    </a>
  );
}

// ---------- ANNOUNCEMENT BAR ----------

function AnnouncementBar() {
  const t = useT();
  const { isMobile } = useViewport();
  if (!t.showAnnouncement || !t.trialDays) return null;
  return (
    <div style={{
      background: SITE.ink, color: '#fff',
      padding: isMobile ? '10px 16px' : '12px 32px',
      fontSize: isMobile ? 12 : 13.5, textAlign: 'center',
      letterSpacing: '-0.005em', fontWeight: 500,
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: isMobile ? 8 : 14, flexWrap: 'wrap',
    }}>
      <span>{resolveCopy(t.announcementCopy, t.trialDays)}</span>
      <a href={APP_URL} style={{
        color: SITE.brandSoft, fontWeight: 600, textDecoration: 'none',
        display: 'inline-flex', alignItems: 'center', gap: 4,
      }}>Start now →</a>
    </div>
  );
}

// ---------- NAV ----------

function Nav() {
  const { isMobile, isTablet } = useViewport();
  const [open, setOpen] = React.useState(false);
  // close on resize back to desktop
  React.useEffect(() => { if (!isMobile) setOpen(false); }, [isMobile]);
  // lock body scroll while open
  React.useEffect(() => {
    if (open) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      return () => { document.body.style.overflow = prev; };
    }
  }, [open]);
  const links = [
    ['Product', '#product'],
    ['Why Aerixlab', '#features'],
    ['Pricing', '#pricing'],
    ['Sign in', APP_URL],
  ];
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(255,255,255,0.85)',
      backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
      borderBottom: `1px solid ${SITE.line}`,
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        padding: isMobile ? '14px 16px' : '18px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
      }}>
        <Logo size={isMobile ? 26 : 28} />
        {!isMobile && (
          <div style={{ display: 'flex', gap: isTablet ? 20 : 32 }}>
            {links.map(([l, h]) => (<a key={l} href={h} style={navLinkStyle}>{l}</a>))}
          </div>
        )}
        {!isMobile && (
          <a href={APP_URL} style={{
            background: SITE.ink, color: '#fff', textDecoration: 'none',
            padding: '10px 18px', borderRadius: 999, fontSize: 13, fontWeight: 600,
            letterSpacing: '-0.005em',
          }}>Get started →</a>
        )}
        {isMobile && (
          <button aria-label={open ? 'Close menu' : 'Open menu'} onClick={() => setOpen(o => !o)} style={{
            background: 'transparent', border: `1px solid ${SITE.line}`,
            width: 44, height: 44, borderRadius: 12, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: 0,
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={SITE.ink} strokeWidth="2" strokeLinecap="round">
              {open ? (<><path d="M6 6 L18 18" /><path d="M18 6 L6 18" /></>)
                    : (<><path d="M4 7h16" /><path d="M4 12h16" /><path d="M4 17h16" /></>)}
            </svg>
          </button>
        )}
      </div>
      {isMobile && open && (
        <div style={{
          position: 'fixed', top: 68, left: 0, right: 0, bottom: 0, zIndex: 49,
          background: SITE.paper,
          padding: 20,
          display: 'flex', flexDirection: 'column', gap: 4,
          overflowY: 'auto',
        }}>
          {links.map(([l, h]) => (
            <a key={l} href={h} onClick={() => setOpen(false)} style={{
              padding: '16px 8px', fontSize: 18, fontWeight: 500,
              color: SITE.ink, textDecoration: 'none',
              borderBottom: `1px solid ${SITE.line}`,
            }}>{l}</a>
          ))}
          <a href={APP_URL} onClick={() => setOpen(false)} style={{
            marginTop: 20,
            background: SITE.ink, color: '#fff', textDecoration: 'none',
            padding: '16px 22px', borderRadius: 999, fontSize: 15, fontWeight: 600,
            textAlign: 'center',
          }}>Get started →</a>
        </div>
      )}
    </nav>
  );
}

const navLinkStyle = {
  color: SITE.inkSoft, fontSize: 14, fontWeight: 500,
  textDecoration: 'none', letterSpacing: '-0.005em',
};

// ---------- 1) HERO ----------

function Hero() {
  const t = useT();
  const { isMobile, isTablet } = useViewport();
  const days = t.trialDays;
  const ctaLabel = primaryCtaLabel(days);
  return (
    <section id="product" style={{
      position: 'relative', overflow: 'hidden',
      background: `linear-gradient(180deg, ${SITE.tint} 0%, ${SITE.surface} 65%, ${SITE.paper} 100%)`,
    }}>
      {/* dotted pastel grid */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.55,
        backgroundImage: `radial-gradient(${SITE.brandSoft} 1px, transparent 1px)`,
        backgroundSize: '22px 22px',
        maskImage: 'radial-gradient(ellipse 80% 60% at 70% 40%, #000 30%, transparent 80%)',
        WebkitMaskImage: 'radial-gradient(ellipse 80% 60% at 70% 40%, #000 30%, transparent 80%)',
        pointerEvents: 'none',
      }} />

      <div style={{
        maxWidth: 1240, margin: '0 auto',
        padding: isMobile ? '48px 20px 56px' : isTablet ? '72px 28px 80px' : '88px 32px 96px',
        display: 'grid',
        gridTemplateColumns: isTablet ? '1fr' : '1.05fr 1fr',
        gap: isMobile ? 40 : 64, alignItems: 'center',
        position: 'relative',
      }}>
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '7px 14px', borderRadius: 999,
            background: SITE.paper, border: `1px solid ${SITE.brandPale}`,
            fontSize: 12, color: SITE.brand, fontWeight: 500,
            letterSpacing: '0.01em', marginBottom: isMobile ? 20 : 28,
            boxShadow: `0 2px 10px rgba(121, 134, 240, 0.10)`,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: SITE.brand }} />
            ARX E-Invoice · for Malaysian SMEs
          </div>

          <h1 style={{
            margin: 0, fontSize: isMobile ? 40 : isTablet ? 56 : 68, lineHeight: 1.02,
            letterSpacing: '-0.038em', fontWeight: 600, color: SITE.ink,
          }}>
            {renderHeadline(t.heroHeadline)}
          </h1>

          <p style={{
            marginTop: isMobile ? 18 : 24, maxWidth: 520, color: SITE.inkSoft,
            fontSize: isMobile ? 16 : 18, lineHeight: 1.5, letterSpacing: '-0.005em',
          }}>
            {t.heroSub}
          </p>

          <div style={{
            display: 'flex', gap: 12,
            marginTop: isMobile ? 28 : 36,
            flexDirection: isMobile ? 'column' : 'row',
            alignItems: isMobile ? 'stretch' : 'center',
          }}>
            <a href={APP_URL} style={{
              background: SITE.ink, color: '#fff', textDecoration: 'none',
              padding: isMobile ? '16px 22px' : '15px 24px', borderRadius: 999,
              fontSize: 15, fontWeight: 600, textAlign: 'center',
              boxShadow: `0 12px 28px rgba(26, 31, 61, 0.20)`,
            }}>{ctaLabel} →</a>
            <a href="#pricing" style={{
              background: SITE.paper, color: SITE.ink, textDecoration: 'none',
              padding: isMobile ? '16px 22px' : '15px 24px', borderRadius: 999,
              fontSize: 15, fontWeight: 500, textAlign: 'center',
              border: `1px solid ${SITE.line}`,
            }}>See pricing</a>
          </div>

          <div style={{ marginTop: isMobile ? 28 : 40, display: 'flex', gap: isMobile ? 14 : 24, alignItems: 'center', flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: SITE.mute }}>
              <Check small /> {days > 0 ? `${days}-day free trial` : 'Free to start'}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: SITE.mute }}>
              <Check small /> No credit card
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: SITE.mute }}>
              <Check small /> Cancel anytime
            </div>
          </div>
        </div>

        {/* product mockup */}
        <HeroProductMock />
      </div>
    </section>
  );
}

function Check({ small }) {
  const s = small ? 14 : 18;
  return (
    <svg width={s} height={s} viewBox="0 0 20 20" fill="none">
      <circle cx="10" cy="10" r="10" fill={SITE.brandPale} />
      <path d="M6 10.5 L9 13 L14 7.5" stroke={SITE.brand} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// Renders headline copy with *segments wrapped in asterisks* styled as italic-serif accent.
// e.g. "Send invoices. *Track money.* Done in minutes."
function renderHeadline(text) {
  if (!text) return null;
  const parts = text.split(/(\*[^*]+\*)/g);
  return parts.map((p, i) => {
    if (p.startsWith('*') && p.endsWith('*') && p.length > 2) {
      return (
        <span key={i} style={{
          fontFamily: "'Instrument Serif', serif", fontStyle: 'italic',
          fontWeight: 400, color: SITE.brand,
        }}>{p.slice(1, -1)}</span>
      );
    }
    // preserve newlines as <br />
    const lines = p.split('\n');
    return lines.map((ln, j) => (
      <React.Fragment key={`${i}-${j}`}>
        {ln}
        {j < lines.length - 1 && <br />}
      </React.Fragment>
    ));
  });
}

function HeroProductMock() {
  const { isMobile } = useViewport();
  const invoices = [
    { id: 'INV-0234', name: 'Acme Trading Sdn Bhd', amount: 'RM 4,280.00', status: 'Paid', tone: 'success' },
    { id: 'INV-0233', name: 'Bumi Hijau Enterprise', amount: 'RM 1,950.00', status: 'Sent', tone: 'brand' },
    { id: 'INV-0232', name: 'Kedai Kopi Aman', amount: 'RM 620.00', status: 'Overdue', tone: 'warn' },
    { id: 'INV-0231', name: 'Lestari Logistics', amount: 'RM 12,400.00', status: 'Paid', tone: 'success' },
    { id: 'INV-0230', name: 'Saga Print Sdn Bhd', amount: 'RM 880.00', status: 'Draft', tone: 'mute' },
  ];
  const toneMap = {
    success: { bg: SITE.successSoft, fg: SITE.success },
    brand: { bg: SITE.brandPale, fg: SITE.brand },
    warn: { bg: '#FBE3DC', fg: '#C84A2B' },
    mute: { bg: SITE.surface, fg: SITE.mute },
  };
  return (
    <div style={{
      borderRadius: 16, background: SITE.paper, overflow: 'hidden',
      boxShadow: '0 30px 80px rgba(26, 31, 61, 0.18), 0 2px 6px rgba(26, 31, 61, 0.06)',
      border: `1px solid ${SITE.line}`,
      transform: isMobile ? 'none' : 'rotate(0.4deg)',
      maxWidth: '100%', minWidth: 0,
    }}>
      {/* browser bar */}
      <div style={{
        display: 'flex', alignItems: 'center', padding: '12px 16px',
        background: SITE.surface, borderBottom: `1px solid ${SITE.line}`, gap: 12,
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          {['#FF6058', '#FFBD2E', '#28C840'].map(c => <div key={c} style={{ width: 11, height: 11, borderRadius: 999, background: c }} />)}
        </div>
        <div style={{
          flex: 1, background: SITE.paper, borderRadius: 6, padding: '5px 12px',
          fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: SITE.mute,
          border: `1px solid ${SITE.line}`,
        }}>app.aerixlab.com/invoices</div>
      </div>

      {/* app body */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '180px 1fr',
        minHeight: isMobile ? 'auto' : 460,
      }}>
        {/* sidebar — hidden on mobile to keep mock readable */}
        {!isMobile && (
        <aside style={{
          background: SITE.surface, padding: '20px 14px',
          borderRight: `1px solid ${SITE.line}`,
          display: 'flex', flexDirection: 'column', gap: 4,
          fontSize: 13,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 10px 16px' }}>
            <Cyclone size={20} strokeW={8} swirlW={9} />
            <span style={{ fontWeight: 600, fontSize: 14, color: SITE.ink }}>
              aerix<span style={{ color: SITE.brand }}>lab</span>
            </span>
          </div>
          {[
            ['Dashboard', false],
            ['Invoices', true],
            ['Customers', false],
            ['Accounting', false],
            ['Reports', false],
            ['Settings', false],
          ].map(([label, active]) => (
            <div key={label} style={{
              padding: '8px 10px', borderRadius: 8,
              background: active ? SITE.brandPale : 'transparent',
              color: active ? SITE.brand : SITE.inkSoft,
              fontWeight: active ? 600 : 500,
            }}>
              {label}
            </div>
          ))}
        </aside>
        )}

        {/* main */}
        <main style={{ padding: isMobile ? 14 : 20 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
            <div>
              <div style={{ fontSize: 18, fontWeight: 600, color: SITE.ink, letterSpacing: '-0.015em' }}>Invoices</div>
              <div style={{ fontSize: 11, color: SITE.mute, marginTop: 2 }}>32 this month · RM 48,290 outstanding</div>
            </div>
            <button style={{
              background: SITE.brand, color: '#fff', border: 'none',
              padding: '8px 14px', borderRadius: 999, fontSize: 12, fontWeight: 600,
              cursor: 'pointer',
            }}>+ New invoice</button>
          </div>

          {/* mini stats */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 14 }}>
            {[
              { label: 'Paid', value: 'RM 22,140', tone: SITE.success },
              { label: 'Pending', value: 'RM 18,950', tone: SITE.brand },
              { label: 'Overdue', value: 'RM 7,200', tone: '#C84A2B' },
            ].map(s => (
              <div key={s.label} style={{
                padding: 12, borderRadius: 10, background: SITE.surface, border: `1px solid ${SITE.line}`,
              }}>
                <div style={{ fontSize: 10, color: SITE.mute, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{s.label}</div>
                <div style={{ fontSize: 15, fontWeight: 600, color: s.tone, marginTop: 4 }}>{s.value}</div>
              </div>
            ))}
          </div>

          {/* list */}
          <div style={{ border: `1px solid ${SITE.line}`, borderRadius: 10, overflow: 'hidden' }}>
            <div style={{
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr 70px' : '70px 1fr 80px 70px',
              padding: '8px 14px', background: SITE.surface,
              fontSize: 10, color: SITE.mute, textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600,
            }}>
              {!isMobile && <span>No.</span>}
              <span>Customer</span>
              {!isMobile && <span style={{ textAlign: 'right' }}>Amount</span>}
              <span style={{ textAlign: 'right' }}>Status</span>
            </div>
            {invoices.map((inv, i) => (
              <div key={inv.id} style={{
                display: 'grid',
                gridTemplateColumns: isMobile ? '1fr 70px' : '70px 1fr 80px 70px',
                padding: '10px 14px', alignItems: 'center',
                borderTop: i ? `1px solid ${SITE.line}` : 'none',
                fontSize: 12, gap: isMobile ? 8 : 0,
              }}>
                {!isMobile && <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: SITE.mute }}>{inv.id}</span>}
                <span style={{
                  color: SITE.ink, fontWeight: 500, minWidth: 0,
                  ...(isMobile ? { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } : {}),
                }}>
                  {inv.name}
                  {isMobile && <span style={{ display: 'block', color: SITE.ink, fontWeight: 600, fontSize: 11, fontVariantNumeric: 'tabular-nums', marginTop: 2 }}>{inv.amount}</span>}
                </span>
                {!isMobile && <span style={{ textAlign: 'right', color: SITE.ink, fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>{inv.amount}</span>}
                <span style={{ textAlign: 'right' }}>
                  <span style={{
                    background: toneMap[inv.tone].bg, color: toneMap[inv.tone].fg,
                    padding: '3px 8px', borderRadius: 999, fontSize: 10, fontWeight: 600,
                  }}>{inv.status}</span>
                </span>
              </div>
            ))}
          </div>
        </main>
      </div>
    </div>
  );
}

// ---------- 2) FEATURES ----------

function Features() {
  const features = [
    {
      title: '30-second invoices',
      body: 'Create and send professional invoices faster than your kettle boils. Save customer details, line items, and send via email or WhatsApp.',
      icon: 'send',
    },
    {
      title: 'Money in, money out',
      body: 'Simple accounting built in. Track every ringgit, reconcile payments automatically, and see your cash position at a glance.',
      icon: 'wallet',
    },
    {
      title: 'Made for Malaysia',
      body: 'RM-first pricing, SST-ready, designed around how Malaysian SMEs actually run. From mamak shops to consultancies.',
      icon: 'flag',
    },
    {
      title: 'Cloud, any device',
      body: 'Your data syncs across laptop, phone, and tablet. Send a quote from the kopitiam, mark it paid back at the office.',
      icon: 'cloud',
    },
  ];

  return (
    <section id="features" style={{ background: SITE.paper, padding: 'clamp(72px, 12vw, 120px) clamp(20px, 4vw, 32px)' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ maxWidth: 720, marginBottom: 'clamp(40px, 7vw, 64px)' }}>
          <div style={{ fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: SITE.brand, fontWeight: 600, marginBottom: 16 }}>
            Why Aerixlab
          </div>
          <h2 style={{
            margin: 0, fontSize: 'clamp(34px, 5.5vw, 52px)', lineHeight: 1.05, letterSpacing: '-0.03em', fontWeight: 600, color: SITE.ink,
          }}>
            Built around how Malaysian
            <br />SMEs <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontWeight: 400, color: SITE.brand }}>actually work.</span>
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 'clamp(16px, 2.5vw, 24px)' }}>
          {features.map(f => (
            <article key={f.title} style={{
              background: SITE.surface,
              borderRadius: 18, padding: 'clamp(24px, 4vw, 36px)',
              border: `1px solid ${SITE.line}`,
              display: 'flex', flexDirection: 'column', gap: 18,
            }}>
              <FeatureIcon kind={f.icon} />
              <h3 style={{
                margin: 0, fontSize: 'clamp(20px, 2.4vw, 24px)', fontWeight: 600, letterSpacing: '-0.02em', color: SITE.ink,
              }}>{f.title}</h3>
              <p style={{
                margin: 0, fontSize: 'clamp(15px, 1.6vw, 16px)', lineHeight: 1.55, color: SITE.inkSoft, letterSpacing: '-0.005em',
              }}>{f.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeatureIcon({ kind }) {
  const wrap = {
    width: 52, height: 52, borderRadius: 14,
    background: SITE.brandPale, color: SITE.brand,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
  };
  const ICONS = {
    send: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M22 2 11 13" /><path d="M22 2 15 22 11 13 2 9 22 2z" />
      </svg>
    ),
    wallet: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 7h18v12H3z" /><path d="M3 7l3-4h12l3 4" /><circle cx="17" cy="13" r="1.5" fill="currentColor" />
      </svg>
    ),
    flag: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M5 21V4l8 3 7-3v11l-7 3-8-3" /><path d="M5 14l8 3" />
      </svg>
    ),
    cloud: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M17.5 19H6a4 4 0 0 1-.7-7.9 6 6 0 0 1 11.7-1A4.5 4.5 0 0 1 17.5 19z" />
      </svg>
    ),
  };
  return <div style={wrap}>{ICONS[kind]}</div>;
}

// ---------- 3) PRICING ----------

function Pricing() {
  const t = useT();
  const [yearly, setYearly] = React.useState(false);
  const showPromo = t.yearlyPromo;
  const days = t.trialDays;
  return (
    <section id="pricing" style={{
      background: `linear-gradient(180deg, ${SITE.paper} 0%, ${SITE.tint} 100%)`,
      padding: 'clamp(72px, 12vw, 120px) clamp(20px, 4vw, 32px)',
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 'clamp(32px, 5vw, 48px)' }}>
          <div style={{ fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: SITE.brand, fontWeight: 600, marginBottom: 16 }}>
            Pricing
          </div>
          <h2 style={{
            margin: 0, fontSize: 'clamp(34px, 5.5vw, 52px)', lineHeight: 1.05, letterSpacing: '-0.03em', fontWeight: 600, color: SITE.ink,
          }}>
            Simple plans. <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontWeight: 400, color: SITE.brand }}>{showPromo ? 'Promo prices.' : 'Fair prices.'}</span>
          </h2>
          <p style={{
            maxWidth: 540, margin: '18px auto 0', color: SITE.inkSoft,
            fontSize: 'clamp(15px, 1.7vw, 17px)', lineHeight: 1.5,
          }}>
            {days > 0 ? `Every plan starts with a ${days}-day free trial. No credit card. Cancel anytime.` : `Start free, upgrade when you're ready. All plans include the full e-invoice engine and accounting basics.`}
          </p>
        </div>

        {/* toggle */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 40 }}>
          <div style={{
            display: 'inline-flex', padding: 4, background: SITE.paper,
            borderRadius: 999, border: `1px solid ${SITE.line}`, gap: 4,
          }}>
            {[
              { label: 'Monthly', value: false },
              { label: 'Yearly · save up to 50%', value: true },
            ].map(opt => (
              <button key={opt.label} onClick={() => setYearly(opt.value)} style={{
                background: yearly === opt.value ? SITE.ink : 'transparent',
                color: yearly === opt.value ? '#fff' : SITE.inkSoft,
                border: 'none', padding: '10px 22px', borderRadius: 999,
                fontSize: 13, fontWeight: 600, cursor: 'pointer',
                fontFamily: 'inherit', letterSpacing: '-0.005em',
                transition: 'background 0.15s ease',
              }}>{opt.label}</button>
            ))}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 'clamp(16px, 2.5vw, 24px)', alignItems: 'stretch' }}>
          <PriceCard
            tier="Basic"
            tagline="Starter"
            yearly={yearly}
            monthly={19}
            yearlyOriginal={150}
            yearlyPromo={99}
            showPromo={showPromo}
            trialDays={days}
            features={[
              'Up to 100 invoices / month',
              'Up to 500 accounting entries / month',
              'All core features',
            ]}
            cta={days > 0 ? `Start ${days}-day trial` : 'Start with Basic'}
            highlighted={false}
          />
          <PriceCard
            tier="Pro"
            tagline="Unlimited"
            yearly={yearly}
            monthly={49}
            yearlyOriginal={350}
            yearlyPromo={250}
            showPromo={showPromo}
            trialDays={days}
            features={[
              'Unlimited invoices',
              'Unlimited accounting entries',
              'All core features',
              'Priority support',
            ]}
            cta={days > 0 ? `Start ${days}-day Pro trial` : 'Get Pro'}
            highlighted={true}
          />
        </div>

        <div style={{ textAlign: 'center', marginTop: 36, color: SITE.mute, fontSize: 14 }}>
          Need something custom for a larger team? <a href="mailto:hello@aerixlab.com" style={{ color: SITE.brand, fontWeight: 600 }}>Talk to us →</a>
        </div>
      </div>
    </section>
  );
}

function PriceCard({ tier, tagline, yearly, monthly, yearlyOriginal, yearlyPromo, showPromo = true, trialDays = 0, features, cta, highlighted }) {
  return (
    <div style={{
      background: highlighted ? SITE.ink : SITE.paper,
      color: highlighted ? '#fff' : SITE.ink,
      borderRadius: 22, padding: 'clamp(28px, 4vw, 40px)',
      border: highlighted ? 'none' : `1px solid ${SITE.line}`,
      boxShadow: highlighted
        ? '0 30px 60px rgba(26, 31, 61, 0.25)'
        : '0 6px 20px rgba(26, 31, 61, 0.05)',
      display: 'flex', flexDirection: 'column', gap: 24,
      position: 'relative',
    }}>
      {highlighted && (
        <div style={{
          position: 'absolute', top: -14, right: 32,
          background: SITE.brand, color: '#fff',
          fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase',
          padding: '6px 12px', borderRadius: 999,
        }}>Best Value</div>
      )}

      <div>
        <div style={{
          fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase',
          color: highlighted ? SITE.brandSoft : SITE.brand, marginBottom: 8,
        }}>{tier}</div>
        <div style={{
          fontSize: 26, fontWeight: 600, letterSpacing: '-0.02em',
          color: highlighted ? '#fff' : SITE.ink,
        }}>{tagline}</div>
      </div>

      <div>
        {yearly ? (
          <>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
              {showPromo && (
                <span style={{
                  fontSize: 16, color: highlighted ? SITE.brandSoft : SITE.mute,
                  textDecoration: 'line-through',
                }}>RM {yearlyOriginal}</span>
              )}
              <span style={{
                fontSize: 56, fontWeight: 600, letterSpacing: '-0.035em',
                color: highlighted ? '#fff' : SITE.ink, lineHeight: 1,
              }}>RM {showPromo ? yearlyPromo : yearlyOriginal}</span>
              <span style={{ fontSize: 15, color: highlighted ? SITE.brandSoft : SITE.mute }}>/year</span>
            </div>
            {showPromo && (
              <div style={{
                marginTop: 10, display: 'inline-block',
                background: highlighted ? 'rgba(183, 191, 246, 0.18)' : SITE.brandPale,
                color: highlighted ? SITE.brandSoft : SITE.brand,
                fontSize: 12, fontWeight: 600, padding: '4px 10px', borderRadius: 999,
                letterSpacing: '0.01em',
              }}>Promo — save RM {yearlyOriginal - yearlyPromo}</div>
            )}
          </>
        ) : (
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
            <span style={{
              fontSize: 56, fontWeight: 600, letterSpacing: '-0.035em',
              color: highlighted ? '#fff' : SITE.ink, lineHeight: 1,
            }}>RM {monthly}</span>
            <span style={{ fontSize: 15, color: highlighted ? SITE.brandSoft : SITE.mute }}>/month</span>
          </div>
        )}
        {trialDays > 0 && (
          <div style={{
            marginTop: 14, display: 'inline-flex', alignItems: 'center', gap: 6,
            background: highlighted ? 'rgba(255,255,255,0.10)' : SITE.tint,
            color: highlighted ? '#fff' : SITE.ink,
            fontSize: 12, fontWeight: 600, padding: '5px 11px', borderRadius: 999,
            letterSpacing: '0.01em',
          }}>
            <span style={{ fontSize: 11 }}>✨</span>
            {trialDays}-day free trial for new customers
          </div>
        )}
      </div>

      <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {features.map(f => (
          <li key={f} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 15, color: highlighted ? '#E5E7F4' : SITE.inkSoft }}>
            <CheckPlan inverted={highlighted} />
            <span>{f}</span>
          </li>
        ))}
      </ul>

      <a href={`${APP_URL}/signup?plan=${tier.toLowerCase()}`} style={{
        marginTop: 'auto',
        background: highlighted ? SITE.brand : SITE.ink,
        color: '#fff',
        textDecoration: 'none', textAlign: 'center',
        padding: '14px 22px', borderRadius: 999,
        fontSize: 15, fontWeight: 600,
        boxShadow: highlighted ? `0 12px 28px rgba(121, 134, 240, 0.45)` : 'none',
      }}>{cta} →</a>
    </div>
  );
}

function CheckPlan({ inverted }) {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" style={{ flexShrink: 0 }}>
      <circle cx="10" cy="10" r="10" fill={inverted ? 'rgba(183,191,246,0.22)' : SITE.brandPale} />
      <path d="M6 10.5 L9 13 L14 7.5" stroke={inverted ? SITE.brandSoft : SITE.brand} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// ---------- 4) CTA + FOOTER ----------

function CtaFooter() {
  const t = useT();
  const { isMobile, isTablet } = useViewport();
  const days = t.trialDays;
  return (
    <section style={{ background: SITE.paper }}>
      {/* big CTA */}
      <div style={{ padding: '0 clamp(16px, 4vw, 32px)' }}>
        <div style={{
          maxWidth: 1180, margin: '0 auto',
          background: SITE.ink, color: '#fff',
          borderRadius: isMobile ? 20 : 28, padding: 'clamp(40px, 7vw, 80px) clamp(22px, 5vw, 56px)',
          display: 'grid',
          gridTemplateColumns: isTablet ? '1fr' : '1.2fr 1fr',
          gap: 'clamp(24px, 4vw, 48px)', alignItems: 'center',
          position: 'relative', overflow: 'hidden',
        }}>
          {/* glow */}
          <div style={{
            position: 'absolute', inset: 0,
            background: 'radial-gradient(circle at 80% 50%, rgba(121, 134, 240, 0.45), transparent 55%)',
          }} />
          <div style={{ position: 'relative' }}>
            <h2 style={{
              margin: 0, fontSize: 'clamp(30px, 5.5vw, 48px)', lineHeight: 1.05, letterSpacing: '-0.03em', fontWeight: 600,
            }}>
              Start sending cleaner
              <br /><span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: 'italic', fontWeight: 400, color: SITE.brandSoft }}>invoices</span> today.
            </h2>
            <p style={{ marginTop: 18, color: '#B7BFF6', fontSize: 'clamp(15px, 1.7vw, 17px)', lineHeight: 1.5, maxWidth: 480 }}>
              {days > 0 ? `${days}-day free trial. No credit card. Cancel anytime. Your books will thank you.` : 'Free to start. No credit card. Cancel anytime. Your books will thank you.'}
            </p>
            <div style={{
              marginTop: isMobile ? 26 : 32,
              display: 'flex', gap: 12,
              flexDirection: isMobile ? 'column' : 'row',
              alignItems: isMobile ? 'stretch' : 'center',
            }}>
              <a href={APP_URL} style={{
                background: SITE.brand, color: '#fff', textDecoration: 'none',
                padding: isMobile ? '16px 22px' : '15px 24px', borderRadius: 999,
                fontSize: 15, fontWeight: 600, textAlign: 'center',
                boxShadow: `0 12px 28px rgba(121, 134, 240, 0.50)`,
              }}>{primaryCtaLabel(days, 'Create your account')} →</a>
              <a href="#pricing" style={{
                background: 'transparent', color: '#fff', textDecoration: 'none',
                padding: isMobile ? '16px 22px' : '15px 24px', borderRadius: 999,
                fontSize: 15, fontWeight: 500, textAlign: 'center',
                border: `1px solid rgba(255,255,255,0.18)`,
              }}>See pricing</a>
            </div>
          </div>
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
            <Cyclone size={isMobile ? 140 : isTablet ? 180 : 220} color={SITE.brand} ink="#fff" />
          </div>
        </div>
      </div>

      {/* footer */}
      <footer style={{
        maxWidth: 1240, margin: '0 auto',
        padding: isMobile ? '48px 20px 32px' : '64px 32px 40px',
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : isTablet ? '1fr 1fr' : '1.5fr 1fr 1fr 1fr',
          gap: isMobile ? 32 : 48,
          marginBottom: isMobile ? 32 : 48,
        }}>
          <div>
            <Logo size={28} />
            <p style={{ marginTop: 16, color: SITE.mute, fontSize: 14, lineHeight: 1.55, maxWidth: 320 }}>
              Aerixlab builds simple, cloud-based tools for Malaysian SMEs. Made in Malaysia, for Malaysian businesses.
            </p>
          </div>
          <FooterCol title="Product" links={[['ARX E-Invoice', '#product'], ['Pricing', '#pricing'], ['Sign in', APP_URL]]} />
          <FooterCol title="Company" links={[['About', '#'], ['Contact', 'mailto:hello@aerixlab.com'], ['Careers', '#']]} />
          <FooterCol title="Legal" links={[['Privacy', '/privacy.html'], ['Terms', '/terms.html']]} />
        </div>
        <div style={{
          display: 'flex',
          flexDirection: isMobile ? 'column' : 'row',
          gap: isMobile ? 10 : 0,
          justifyContent: 'space-between',
          alignItems: isMobile ? 'flex-start' : 'center',
          paddingTop: 28, borderTop: `1px solid ${SITE.line}`,
          fontSize: 13, color: SITE.mute,
        }}>
          <div>© 2025 Aerixlab Sdn Bhd. All rights reserved.</div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12 }}>Made in Malaysia 🇲🇾</div>
        </div>
      </footer>
    </section>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: SITE.ink, marginBottom: 18 }}>{title}</div>
      <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {links.map(([label, href]) => (
          <li key={label}><a href={href} style={{ color: SITE.inkSoft, fontSize: 14, textDecoration: 'none' }}>{label}</a></li>
        ))}
      </ul>
    </div>
  );
}

// ---------- ROOT ----------

function AerixSite() {
  const defaults = window.TWEAK_DEFAULTS || {
    trialDays: 14,
    showAnnouncement: true,
    announcementCopy: '\ud83c\udf89 New customers \u2014 get {days} days free. No credit card required.',
    heroHeadline: 'Send invoices. *Track money.* \nDone in minutes.',
    heroSub: 'ARX E-Invoice is the easiest way for Malaysian SMEs to bill customers, track payments, and keep simple accounting \u2014 all in one cloud system, without the spreadsheets.',
    yearlyPromo: true,
  };
  const [t, setTweak] = useTweaks(defaults);
  return (
    <TweakCtx.Provider value={t}>
      <div style={{ background: SITE.paper, color: SITE.ink, fontFamily: "'Space Grotesk', sans-serif", minHeight: '100vh' }}>
        <AnnouncementBar />
        <Nav />
        <Hero />
        <Features />
        <Pricing />
        <CtaFooter />

        <TweaksPanel title="Tweaks">
          <TweakSection label="Free trial" />
          <TweakSlider label="Trial length" value={t.trialDays} min={0} max={30} step={1} unit=" days"
            onChange={(v) => setTweak('trialDays', v)} />
          <TweakToggle label="Announcement bar" value={t.showAnnouncement}
            onChange={(v) => setTweak('showAnnouncement', v)} />
          <TweakText label="Banner copy" value={t.announcementCopy}
            placeholder="Use {days} as the trial-days placeholder"
            onChange={(v) => setTweak('announcementCopy', v)} />

          <TweakSection label="Hero" />
          <TweakText label="Headline" value={t.heroHeadline}
            placeholder="Wrap *text* for the italic accent"
            onChange={(v) => setTweak('heroHeadline', v)} />
          <TweakText label="Subhead" value={t.heroSub}
            onChange={(v) => setTweak('heroSub', v)} />

          <TweakSection label="Pricing" />
          <TweakToggle label="Show yearly promo prices" value={t.yearlyPromo}
            onChange={(v) => setTweak('yearlyPromo', v)} />
        </TweaksPanel>
      </div>
    </TweakCtx.Provider>
  );
}

window.AerixSite = AerixSite;
