// offers.jsx — "Built for where you are". Three engagement models as a ladder of
// commitment: Fixed Projects → Retainers → Products. Glass panels, Violet Blue
// accent, middle panel featured (anchor). Price fields are INDICATORS — swap in
// real "From $X" numbers when available. CTAs bridge to Contact.

const OF_MONO = 'ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace';

const OffIco = {
  project: (p) => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square" strokeLinejoin="miter" {...p}><path d="M4 5h16M4 12h16M4 19h10" /></svg>),
  retainer: (p) => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square" strokeLinejoin="miter" {...p}><path d="M12 3v18M5 7l14 10M19 7L5 17" /></svg>),
  product: (p) => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square" strokeLinejoin="miter" {...p}><path d="M3 8l9-5 9 5v8l-9 5-9-5z M3 8l9 5 9-5M12 13v8" /></svg>),
};

const PLANS = [
  {
    icon: 'project', n: '01', name: 'Fixed Projects',
    line: 'A defined build with a fixed scope and price. The lowest-risk way to start with us.',
    price: 'Scoped & quoted upfront',
    bullets: ['Fixed scope and timeline', 'Delivered in weeks, not quarters', 'You own everything we build'],
    cta: 'Start a project', featured: false,
  },
  {
    icon: 'retainer', n: '02', name: 'Retainers',
    line: 'A dedicated senior team by the month, for when the work does not stop at launch.',
    price: 'Monthly partnership',
    bullets: ['A dedicated senior team', 'Continuous improvement & support', 'Priority response, flexible scope'],
    cta: 'Talk retainers', featured: true, badge: 'Most common',
  },
  {
    icon: 'product', n: '03', name: 'Products',
    line: 'SaaS we are building from what we learn in client work. Be first in line.',
    price: 'Coming 2026',
    bullets: ['Productized from real engagements', 'Self-serve and scalable', 'Early access for the waitlist'],
    cta: 'Join the waitlist', featured: false,
  },
];

function PlanCard({ p, index, onContact }) {
  const Icon = OffIco[p.icon];
  return (
    <div className="glass-stage offer-card" style={{ height: '100%' }}>
    <Reveal delay={index * 90} className={`glass glass-pro eglass eglass-soft lift${p.featured ? ' offer-featured' : ''}`}
      style={{ borderRadius: 20, padding: 'clamp(16px, 2.2vh, 28px)', display: 'flex', flexDirection: 'column', position: 'relative', height: '100%' }}>
      {p.badge && (
        <span style={{
          position: 'absolute', top: 16, right: 16, fontSize: 10.5, fontWeight: 600, letterSpacing: '0.1em',
          textTransform: 'uppercase', color: 'var(--platinum)', background: 'var(--violet)',
          padding: '5px 11px', borderRadius: 999,
        }}>{p.badge}</span>
      )}

      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <span style={{ color: 'var(--accent)', display: 'inline-flex' }}><Icon /></span>
        <span className="mono" style={{ fontSize: 11.5, letterSpacing: '0.16em', color: 'var(--fg-faint)' }}>{p.n}</span>
      </div>

      <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(1.2rem, min(1.9vw, 2.5vh), 1.5rem)', color: 'var(--fg)', margin: 'clamp(10px, 1.6vh, 18px) 0 0', letterSpacing: '-0.01em' }}>{p.name}</h3>
      <p style={{ fontSize: 13.5, lineHeight: 1.55, color: 'var(--fg-muted)', margin: 'clamp(6px, 1vh, 10px) 0 0' }}>{p.line}</p>

      <p style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '1.05rem', color: 'var(--accent)', margin: 'clamp(10px, 1.6vh, 18px) 0 0' }}>{p.price}</p>

      <div style={{ height: 1, background: 'var(--hairline)', margin: 'clamp(12px, 1.8vh, 20px) 0' }} />

      <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 'clamp(7px, 1.2vh, 11px)' }}>
        {p.bullets.map((b) => (
          <li key={b} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 13.5, color: 'var(--fg-muted)', lineHeight: 1.45 }}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.2" strokeLinecap="square" style={{ flexShrink: 0, marginTop: 1 }}><path d="M5 12l5 5L20 6" /></svg>
            <span>{b}</span>
          </li>
        ))}
      </ul>

      <button onClick={onContact} className="gcta" style={{
        all: 'unset', cursor: 'pointer', boxSizing: 'border-box', textAlign: 'center',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, width: '100%',
        padding: 'clamp(9px, 1.3vh, 13px) 20px', borderRadius: 12, fontWeight: 600, fontSize: 14, marginTop: 'clamp(14px, 2.4vh, 26px)', position: 'relative', overflow: 'hidden', zIndex: 2,
        background: p.featured ? 'var(--violet)' : 'transparent',
        color: p.featured ? 'var(--platinum)' : 'var(--accent)',
        boxShadow: p.featured ? 'none' : 'inset 0 0 0 1px var(--eyebrow-bd)',
        transition: 'transform 220ms ease, box-shadow 220ms ease',
      }}
        onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = p.featured ? '0 12px 28px -10px color-mix(in srgb, var(--violet) 55%, transparent)' : 'inset 0 0 0 1px rgba(90,107,201,0.55)'; }}
        onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = p.featured ? 'none' : 'inset 0 0 0 1px var(--eyebrow-bd)'; }}
      >{p.cta}
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="square"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
      </button>
    </Reveal>
    </div>
  );
}

function Offers() {
  const goContact = (e) => {
    e.preventDefault();
    const el = document.getElementById('contact');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <section id="plans" data-screen-label="Engage" className="sec" aria-labelledby="plans-h"
      style={{ minHeight: 'calc(100svh - 72px)', display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingBlock: 'clamp(24px, 3.5vh, 56px)' }}>
      <div className="sec-wrap">
        <SectionHead eyebrow="Ways to work" align="center" max={680} style={{ marginBottom: 'clamp(16px, 2.4vh, 32px)' }}
          sub="Start with a project, grow into a partnership, adopt the products we build. There is an entry point for wherever you are.">
          <span id="plans-h">Built for <span className="accent">where you are</span></span>
        </SectionHead>

        <div className="offers-grid">
          {PLANS.map((p, i) => (
            <PlanCard key={p.name} p={p} index={i} onContact={goContact} />
          ))}
        </div>
      </div>
    </section>
  );
}

window.Offers = Offers;