// Free Tools — a hub for BlueMoso's free lead-magnet tools and resources.
// Today it holds one live tool (the Delegation Playbook). It's built to scale:
// add an entry to TOOLS and a new card slots into the grid. The dashed
// "more on the way" tile always sorts last so the section never looks empty.

const ftStyles = {
  // ===== Hero =====
  hero: { position: 'relative', padding: '80px 32px 56px', overflow: 'hidden' },
  heroBg: { position: 'absolute', inset: 0, pointerEvents: 'none', background: 'radial-gradient(55% 50% at 85% 10%, rgba(8,120,216,0.07) 0%, transparent 60%), radial-gradient(40% 45% at 0% 95%, rgba(214,230,245,0.5) 0%, transparent 70%)' },
  heroInner: { maxWidth: 1080, margin: '0 auto', position: 'relative' },
  eyebrow: { display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--blue)', fontWeight: 500, padding: '6px 12px', borderRadius: 999, background: 'var(--blue-soft)', border: '1px solid rgba(8,120,216,0.12)', marginBottom: 24, whiteSpace: 'nowrap' },
  eyebrowDot: { width: 6, height: 6, borderRadius: 3, background: 'var(--coral)' },
  h1: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 'clamp(44px, 6vw, 68px)', lineHeight: 1.0, letterSpacing: '-0.035em', fontWeight: 600, color: 'var(--ink)', marginBottom: 0, maxWidth: 820, textWrap: 'balance' },
  italic: { color: 'var(--blue)' },
  heroSub: { fontSize: 19, lineHeight: 1.55, color: 'var(--ink-muted)', maxWidth: 600, marginBottom: 26 },
  trustRow: { display: 'flex', flexWrap: 'wrap', gap: 10 },
  trustChip: { display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13, color: 'var(--ink-soft)', fontWeight: 500, padding: '7px 13px', borderRadius: 999, background: '#fff', border: '1px solid var(--line)' },
  trustDot: { width: 5, height: 5, borderRadius: 3, background: 'var(--blue)', flex: 'none' },

  // ===== Tools grid =====
  gridSection: { padding: '8px 32px 96px' },
  gridInner: { maxWidth: 1080, margin: '0 auto' },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(340px, 1fr))', gap: 20, alignItems: 'stretch' },

  // Tool card
  card: { background: '#fff', border: '1px solid var(--line-soft)', borderRadius: 20, padding: 32, boxShadow: 'var(--shadow-md)', display: 'flex', flexDirection: 'column', minHeight: 360, position: 'relative', overflow: 'hidden', transition: 'box-shadow .2s, transform .2s, border-color .2s' },
  cardTopRow: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 22 },
  cardIcon: { width: 48, height: 48, borderRadius: 13, background: 'var(--blue-soft)', color: 'var(--blue-deep)', display: 'grid', placeItems: 'center', flex: 'none' },
  cardTag: { fontSize: 11, fontFamily: "'Outfit', system-ui, sans-serif", letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-muted)', fontWeight: 500, padding: '6px 11px', borderRadius: 999, background: 'var(--paper-deep)', border: '1px solid var(--line-soft)' },
  cardTitle: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 27, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.1, color: 'var(--ink)', marginBottom: 12 },
  cardDesc: { fontSize: 15, lineHeight: 1.6, color: 'var(--ink-muted)', marginBottom: 22 },
  cardBullets: { display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 26 },
  cardBullet: { display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.45 },
  cardBulletDot: { width: 18, height: 18, borderRadius: 9, background: 'var(--blue-soft)', color: 'var(--blue-deep)', display: 'grid', placeItems: 'center', flex: 'none', marginTop: 1 },
  cardFoot: { marginTop: 'auto', paddingTop: 22, borderTop: '1px dashed var(--line)' },
  metaRow: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8, marginBottom: 20 },
  metaChip: { fontSize: 12, fontFamily: "'Outfit', system-ui, sans-serif", letterSpacing: '0.02em', color: 'var(--ink-muted)', display: 'inline-flex', alignItems: 'center', gap: 6 },
  metaSep: { width: 3, height: 3, borderRadius: 2, background: 'var(--line)' },
  cardBtn: { background: 'var(--ink)', color: '#fff', padding: '13px 22px', borderRadius: 12, fontSize: 14.5, fontWeight: 500, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, transition: 'background .2s', textDecoration: 'none', width: '100%' },

  // "More on the way" tile
  soonTile: { borderRadius: 20, padding: 32, border: '1.5px dashed var(--line)', background: 'transparent', display: 'flex', flexDirection: 'column', minHeight: 360 },
  soonIcon: { width: 48, height: 48, borderRadius: 13, background: 'var(--paper-deep)', color: 'var(--ink-muted)', display: 'grid', placeItems: 'center', marginBottom: 22 },
  soonTitle: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 22, fontWeight: 600, letterSpacing: '-0.015em', color: 'var(--ink-soft)', marginBottom: 12 },
  soonDesc: { fontSize: 14.5, lineHeight: 1.6, color: 'var(--ink-muted)', marginBottom: 22 },
  soonList: { display: 'flex', flexDirection: 'column', gap: 9, marginTop: 'auto' },
  soonItem: { display: 'flex', alignItems: 'center', gap: 10, fontSize: 13.5, color: 'var(--ink-muted)' },
  soonTick: { width: 16, height: 16, borderRadius: 8, border: '1px solid var(--line)', flex: 'none' },
};

// ---- Tool catalogue. Add an object here and a card appears. ----
const TOOLS = [
  {
    status: 'live',
    tag: 'Interactive workbook',
    icon: 'grid',
    title: 'The Delegation Playbook',
    desc: 'A four-phase workbook that turns "I should hire help" into a delegation plan you can hand a VA on day one. Figure out what your time is worth, audit your week, and pick the first three things to let go of.',
    bullets: [
      'Calculate your real effective hourly rate',
      'Sort your tasks into Keep, Delegate, or Find',
      'Walk away with a printable plan',
    ],
    meta: ['~30 min', 'Exports to PDF'],
    href: 'playbook.html',
    cta: 'Open the playbook',
  },
  {
    status: 'live',
    tag: 'Interactive worksheet',
    icon: 'users',
    title: 'Which conversations should be AI, and which should be human?',
    desc: 'Most companies automate everything or nothing. Both are mistakes. Sort every customer interaction into "let AI handle it" or "keep a human on it," then design the experience around it.',
    bullets: [
      'Map every interaction into two clean columns',
      'Catch the dead-end bot flows losing you customers',
      'Name the human moments worth charging for',
    ],
    meta: ['~10 min', 'Prints to PDF'],
    href: 'ai-or-human-worksheet.html',
    cta: 'Open the worksheet',
  },
];

function ToolCard({ tool }) {
  return (
    <div
      style={ftStyles.card}
      className="bm-ft-card"
      onMouseEnter={(e) => { e.currentTarget.style.boxShadow = 'var(--shadow-lg)'; e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.borderColor = 'var(--line)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.boxShadow = 'var(--shadow-md)'; e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.borderColor = 'var(--line-soft)'; }}
    >
      <div style={ftStyles.cardTopRow}>
        <div style={ftStyles.cardIcon}><Icon name={tool.icon} size={22} /></div>
        <span style={ftStyles.cardTag}>{tool.tag}</span>
      </div>

      <h2 style={ftStyles.cardTitle}>{tool.title}</h2>
      <p style={ftStyles.cardDesc}>{tool.desc}</p>

      <div style={ftStyles.cardBullets}>
        {tool.bullets.map((b) => (
          <div key={b} style={ftStyles.cardBullet}>
            <span style={ftStyles.cardBulletDot}><Icon name="check" size={11} /></span>
            {b}
          </div>
        ))}
      </div>

      <div style={ftStyles.cardFoot}>
        <div style={ftStyles.metaRow}>
          {tool.meta.map((m, i) => (
            <React.Fragment key={m}>
              {i > 0 && <span style={ftStyles.metaSep} />}
              <span style={ftStyles.metaChip}>{m}</span>
            </React.Fragment>
          ))}
        </div>
        <a
          href={tool.href}
          style={ftStyles.cardBtn}
          onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--blue)')}
          onMouseLeave={(e) => (e.currentTarget.style.background = 'var(--ink)')}
        >
          {tool.cta}
          <Icon name="arrow" size={16} />
        </a>
      </div>
    </div>
  );
}

function ComingSoonTile() {
  return (
    <div style={ftStyles.soonTile}>
      <div style={ftStyles.soonIcon}><Icon name="sparkle" size={22} /></div>
      <div style={ftStyles.soonTitle}>More tools on the way</div>
      <p style={ftStyles.soonDesc}>
        We're building a small kit of free calculators, templates, and guides to help you delegate, hire, and get your time back. New tools land here as they're ready.
      </p>
      <div style={ftStyles.soonList}>
        {['ROI & time-back calculator', 'VA onboarding template', 'SOP starter pack'].map((s) => (
          <div key={s} style={ftStyles.soonItem}>
            <span style={ftStyles.soonTick} />
            {s}
          </div>
        ))}
      </div>
    </div>
  );
}

function HeroSection() {
  return (
    <section style={ftStyles.hero}>
      <div style={ftStyles.heroBg} />
      <div style={ftStyles.heroInner}>
        <div style={ftStyles.eyebrow}>
          <span style={ftStyles.eyebrowDot} />
          Free tools
        </div>
        <h1 className="serif" style={ftStyles.h1}>
          Free tools to help you <span style={ftStyles.italic}>get your time back.</span>
        </h1>
      </div>
    </section>
  );
}

function ToolsGrid() {
  const live = TOOLS.filter((t) => t.status === 'live');
  return (
    <section style={ftStyles.gridSection}>
      <div style={ftStyles.gridInner}>
        <div style={ftStyles.grid} className="bm-ft-grid">
          {live.map((t) => <ToolCard key={t.title} tool={t} />)}
          <ComingSoonTile />
        </div>
      </div>
    </section>
  );
}

function FreeToolsApp() {
  return (
    <div>
      <Nav baseHref="index.html" />
      <main>
        <HeroSection />
        <ToolsGrid />
      </main>
      <Footer baseHref="index.html" />
      <style>{`
        @media (max-width: 760px) {
          .bm-ft-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

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