// ============================================================
// DEMIURGE — PACKAGES PAGE
// The direct destination from "Deploy operators". Shows every
// package; each offers Purchase (Stripe) AND Book a strategy call.
// ============================================================

const BOOKING_EMAIL = 'ops@demiurge.systems';
// Book-a-call routes to the dedicated Strategy Call page, carrying package context.
const bookingHref = (tierKey) =>
  `/contact?package=${encodeURIComponent(tierKey)}&intent=strategy-call&source=packages`;

const TIERS = [
  {
    key: 'starter', name: 'Starter', tag: 'For solo operators & founders',
    setup: '£2,000 setup', price: '£500', per: '/ month',
    blurb: 'A single operator deployed and tuned. Start with the work that hurts most.',
    feats: [
      ['1 operator', 'pick from Atlas, Vesta, or Iris'],
      ['Up to 1,000 conversations / mo', null],
      ['Email + chat channels', null],
      ['Demiurge CRM included', null],
      ['Standard integrations', '40+ tools'],
      ['Community support', null]
    ],
    excluded: ['AI phone agent (Hermes)', 'Multi-operator orchestration'],
    featured: false, badge: null
  },
  {
    key: 'growth', name: 'Growth', tag: 'Most chosen · the dominant configuration',
    setup: '£4,000 setup', price: '£850', per: '/ month',
    blurb: 'Four operators in concert. The point at which the OS pays for itself within the first quarter.',
    feats: [
      ['4 operators', 'Atlas + Hermes + Vesta + Iris'],
      ['Unlimited conversations', null],
      ['Email, chat, SMS, voice', null],
      ['AI phone agent included', 'Hermes · 14k calls/mo'],
      ['Demiurge CRM + pipeline', null],
      ['Industry stack pre-tuned', null],
      ['Priority deployment · 7 days', null],
      ['Dedicated deployment lead', null]
    ],
    excluded: [],
    featured: true, badge: 'Most deployed'
  },
  {
    key: 'autonomous', name: 'Autonomous', tag: 'The full workforce',
    setup: '£8,500 setup', price: '£1,500', per: '/ month',
    blurb: 'All six operators, end-to-end. Your business runs as an autonomous loop. You hold the wheel.',
    feats: [
      ['All 6 operators live', 'Atlas · Hermes · Calliope · Vesta · Orion · Iris'],
      ['Unlimited everything', null],
      ['All channels · all languages', null],
      ['AI phone agent · unlimited minutes', null],
      ['Custom orchestration playbooks', null],
      ['Dedicated operations engineer', null],
      ['SLA · 99.97% with credits', null]
    ],
    excluded: [],
    featured: false, badge: null
  },
  {
    key: 'enterprise', name: 'Enterprise', tag: 'Multi-location · multi-brand · regulated',
    setup: 'From £20,000 setup', price: 'From £3,000', per: '/ month',
    blurb: 'Custom operators. Private deployment. Regulated industries. Onboarded by our principals.',
    feats: [
      ['Custom operator development', null],
      ['Private cloud or on-prem', null],
      ['SAML · SCIM · audit logs', null],
      ['White-label & multi-tenant', null],
      ['Dedicated success principal', null],
      ['Custom SLA · uptime credits', null]
    ],
    excluded: [],
    featured: false, badge: null
  }
];

const Brand = () => (
  <a href="/" className="lp-brand">
    <div className="lp-brand-mark">
      <svg viewBox="0 0 32 32" width="32" height="32" aria-hidden="true">
        <defs>
          <radialGradient id="pk-orb" cx="35%" cy="35%">
            <stop offset="0%" stopColor="#fff"/><stop offset="40%" stopColor="#c8a8ff"/><stop offset="100%" stopColor="#1e1455"/>
          </radialGradient>
          <linearGradient id="pk-ring" x1="0%" x2="100%">
            <stop offset="0%" stopColor="#4be8ff"/><stop offset="100%" stopColor="#8b6bff"/>
          </linearGradient>
        </defs>
        <circle cx="16" cy="16" r="11" fill="url(#pk-orb)"/>
        <ellipse cx="16" cy="16" rx="15" ry="4" fill="none" stroke="url(#pk-ring)" strokeWidth="1" transform="rotate(-22 16 16)"/>
      </svg>
    </div>
    <span className="lp-brand-name">Demiurge</span>
    <span className="lp-brand-sys">/ Systems</span>
  </a>
);

const PackagesApp = () => (
  <React.Fragment>
    <a href="#packages" className="lp-skip">Skip to packages</a>
    <div className="lp-starfield" aria-hidden="true"></div>
    <div className="lp-vignette" aria-hidden="true"></div>
    <div className="lp-scan" aria-hidden="true"></div>

    <nav className="lp-nav">
      <div className="lp-nav-inner">
        <Brand/>
        <div className="lp-nav-spacer"></div>
        <div className="lp-nav-links">
          <a href="/full">Full system</a>
        </div>
        <a href="/" style={{color:'#8388a8',fontFamily:'Geist Mono',fontSize:11,letterSpacing:'0.1em',textTransform:'uppercase',textDecoration:'none'}}>← Home</a>
      </div>
    </nav>

    <main>
      <section className="lp-section" id="packages" style={{paddingTop: 132}}>
        <div className="lp">
          <div className="lp-eyebrow">/ Choose your package</div>
          <h1 className="lp-h2" style={{marginTop: 16, marginBottom: 14}}>
            Deploy your <em className="lp-brass">digital workforce</em>.
          </h1>
          <p className="lp-lede" style={{maxWidth: 620, marginBottom: 8}}>
            Every package includes setup, tuning, integration, and the managed Demiurge Console.
            Purchase now, or book a strategy call if you'd like to talk it through first — for any tier.
          </p>
          <p style={{fontFamily:'Geist Mono',fontSize:11,letterSpacing:'0.12em',color:'#4A4F6B',textTransform:'uppercase',marginBottom:36}}>
            Cancel inside 30 days · Live in ~7 days · Secure checkout by Stripe
          </p>

          <div className="lp-pricing-grid lp-pricing-grid-4">
            {TIERS.map(t => (
              <div className={`lp-price-card ${t.featured ? 'featured' : ''}`} key={t.key}>
                {t.badge ? <div className="lp-price-badge">{t.badge}</div> : null}
                <div>
                  <div className="lp-price-name">{t.name}</div>
                  <div className="lp-price-tag">{t.tag}</div>
                </div>
                <div className="lp-price-blurb">{t.blurb}</div>
                <div>
                  <div className="lp-price-setup">{t.setup}</div>
                  <div className="lp-price-amount">
                    {t.price.startsWith('£') ? <span className="cur">£</span> : null}
                    {t.price.replace('£', '')}
                    {t.per ? <span className="per">{t.per}</span> : null}
                  </div>
                </div>
                <div className="lp-price-feat">
                  {t.feats.map(([f, sub], i) => (
                    <div className="ln" key={i}>
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M5 12l5 5L20 7"/></svg>
                      <span style={{flex: 1}}>
                        <div>{f}</div>
                        {sub ? <div style={{fontFamily:'Geist Mono',fontSize:10.5,color:'var(--text-faint)',letterSpacing:0.4,marginTop:2,textTransform:'uppercase'}}>{sub}</div> : null}
                      </span>
                    </div>
                  ))}
                  {t.excluded.map((f, i) => (
                    <div className="ln mute" key={`x-${i}`}>
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 6l12 12M18 6L6 18"/></svg>
                      <span>{f}</span>
                    </div>
                  ))}
                </div>

                <div style={{display: 'flex', flexDirection: 'column', gap: 8, width: '100%'}}>
                  {t.key !== 'enterprise' && (
                    <a href={`/signup?tier=${t.key}`} className={`lp-btn ${t.featured ? 'primary' : ''}`} style={{justifyContent: 'center', width: '100%'}}>
                      Purchase {t.name}
                      <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                    </a>
                  )}
                  <a href={bookingHref(t.key)} className={`lp-btn ${t.key === 'enterprise' ? 'primary' : ''}`} style={{justifyContent: 'center', width: '100%'}}>
                    Book a strategy call
                    <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                  </a>
                </div>
              </div>
            ))}
          </div>

          <div className="lp-pricing-note" style={{marginTop: 32}}>
            <span className="dot"></span>
            <span>Every plan includes a 30-day cancellation window, white-glove deployment, and the Demiurge Console with unlimited seats. Prefer to talk first? Book a strategy call on any tier — no obligation.</span>
          </div>
        </div>
      </section>

      <footer className="lp-foot">
        <div className="lp">
          <div className="lp-foot-base" style={{display:'flex',justifyContent:'space-between',alignItems:'center',flexWrap:'wrap',gap:14,paddingTop:24,borderTop:'1px solid rgba(255,255,255,0.08)'}}>
            <div className="l">
              <span>© 2026 Demiurge Systems Ltd</span>
              <span style={{margin:'0 10px',opacity:0.3}}>·</span>
              <span>Registered in England · 17109558</span>
              <span style={{margin:'0 10px',opacity:0.3}}>·</span>
              <a href={`mailto:${BOOKING_EMAIL}`} style={{color:'inherit'}}>{BOOKING_EMAIL}</a>
            </div>
            <div className="r" style={{display:'flex',gap:18,flexWrap:'wrap'}}>
              <a href="/" style={{color:'inherit'}}>Home</a>
              <a href="/full" style={{color:'inherit'}}>Full system</a>
              <a href="/legal/privacy" style={{color:'inherit'}}>Privacy</a>
              <a href="/legal/terms" style={{color:'inherit'}}>Terms</a>
              <a href="/legal" style={{color:'inherit'}}>Legal</a>
            </div>
          </div>
        </div>
      </footer>
    </main>
  </React.Fragment>
);

ReactDOM.createRoot(document.getElementById('root')).render(<PackagesApp/>);