// Homepage nav + hero. Adapted from hero/hero-bold.jsx.

const NavBold = () => {
  const mono = { fontFamily: "'JetBrains Mono', ui-monospace, monospace" };
  const FoldMarkHP = window.FoldMarkHP;
  return (
    <nav style={{
      position: 'relative', padding: '20px 48px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      borderBottom: '1px solid rgba(30,41,59,0.5)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <FoldMarkHP size={30} />
        <span style={{ fontSize: 18, fontWeight: 800, letterSpacing: -0.3, color: '#fff' }}>CTRL</span>
        <span style={{ ...mono, fontSize: 10, color: '#475569', letterSpacing: 2, marginLeft: 4 }}>
          SECURITY + COMPLIANCE
        </span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 28, fontSize: 13 }}>
        {[
          { l: 'Features', href: '#features' },
          { l: 'CTRL Assist', href: '#features', accent: true },
          { l: 'Pricing', href: 'Pricing.html' },
          { l: 'About', href: 'About.html' },
          { l: 'Contact', href: 'Contact.html' },
        ].map(x => (
          <a key={x.l} href={x.href} style={{
            color: x.accent ? '#7dd3fc' : '#94a3b8',
            textDecoration: 'none', fontWeight: 500,
            ...(x.accent ? mono : {}),
          }}>{x.l}</a>
        ))}
        <a href="Contact.html" style={{
          ...mono, background: 'transparent', color: '#fff',
          border: '1px solid #334155', padding: '7px 14px',
          borderRadius: 4, fontSize: 12, fontWeight: 600, cursor: 'pointer',
          letterSpacing: 1, textDecoration: 'none',
        }}>BOOK DEMO →</a>
      </div>
    </nav>
  );
};

// ─── Analysis card + Assist panel (matches real product) ──────────
const AssistBotHP = ({ size = 36 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="#38bdf8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <rect x="4" y="7" width="16" height="12" rx="2.5" />
    <circle cx="9" cy="13" r="1.3" fill="#38bdf8" stroke="none" />
    <circle cx="15" cy="13" r="1.3" fill="#38bdf8" stroke="none" />
    <path d="M12 4v3" />
    <circle cx="12" cy="3.2" r="0.9" fill="#38bdf8" stroke="none" />
    <path d="M4 12H2.5M21.5 12H20" />
  </svg>
);

const AnalysisCardHP = ({ icon, title, subtitle, tint, active, delay }) => (
  <div style={{
    background: active ? `linear-gradient(135deg, ${tint}22, ${tint}08)` : '#0b1424',
    border: `1px solid ${active ? tint + '88' : '#1e293b'}`,
    borderRadius: 10, padding: '14px 14px',
    cursor: 'pointer',
    transform: active ? 'translateY(-1px)' : 'none',
    boxShadow: active ? `0 8px 24px -12px ${tint}66` : 'none',
    transition: 'all 0.4s ease',
    animation: `fadeInUp 0.5s ease-out ${delay}ms both`,
  }}>
    <div style={{ color: tint, marginBottom: 8 }}>{icon}</div>
    <div style={{ fontSize: 13, fontWeight: 600, color: '#e2e8f0', marginBottom: 2 }}>{title}</div>
    <div style={{ fontSize: 11, color: '#64748b', lineHeight: 1.4 }}>{subtitle}</div>
  </div>
);

const AssistPanelHP = () => {
  const mono = { fontFamily: "'JetBrains Mono', ui-monospace, monospace" };
  const [activeCard, setActiveCard] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => setActiveCard(c => (c + 1) % 4), 2200);
    return () => clearInterval(id);
  }, []);

  const cards = [
    { title: 'Risk Analysis', sub: 'Likelihood, impact & HIPAA mapping', tint: '#f97316',
      icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 17 9 11 13 15 21 7" /><polyline points="14 7 21 7 21 14" /></svg> },
    { title: 'Treatment Options', sub: 'Mitigation, transfer & acceptance strategies', tint: '#a855f7',
      icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z" /></svg> },
    { title: 'Control Mapping', sub: 'Map to HIPAA controls & identify gaps', tint: '#38bdf8',
      icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /><path d="M9 12l2 2 4-4" /></svg> },
    { title: 'HIPAA Reference', sub: 'Applicable regulations & requirements', tint: '#eab308',
      icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" /><polyline points="14 2 14 8 20 8" /><line x1="8" y1="13" x2="16" y2="13" /><line x1="8" y1="17" x2="13" y2="17" /></svg> },
  ];

  return (
    <div style={{
      background: '#070c18', border: '1px solid #1e293b', borderRadius: 12,
      overflow: 'hidden',
      boxShadow: '0 40px 100px -30px rgba(0,0,0,0.9), 0 0 80px -30px rgba(56,189,248,0.25)',
      display: 'flex', flexDirection: 'column', height: 560,
    }}>
      <div style={{
        padding: '14px 16px', borderBottom: '1px solid #1e293b',
        display: 'flex', alignItems: 'center', gap: 12, background: '#0a1020',
      }}>
        <div style={{
          width: 40, height: 40, borderRadius: 10,
          background: 'rgba(56,189,248,0.12)', border: '1px solid rgba(56,189,248,0.3)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <AssistBotHP size={22} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: '#f1f5f9', marginBottom: 3 }}>CTRL Assist</div>
          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
            <span style={{
              ...mono, fontSize: 9.5, fontWeight: 600, letterSpacing: 0.5,
              color: '#94a3b8', background: '#1a2435', border: '1px solid #334155',
              padding: '2px 7px', borderRadius: 4,
            }}>Lack of Data Loss Prev</span>
            <span style={{
              ...mono, fontSize: 9.5, fontWeight: 700, letterSpacing: 0.5,
              color: '#fb923c', background: 'rgba(249,115,22,0.12)',
              border: '1px solid rgba(249,115,22,0.4)', padding: '2px 7px', borderRadius: 4,
              display: 'inline-flex', alignItems: 'center', gap: 4,
            }}>
              <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><circle cx="12" cy="12" r="9" /><path d="M12 8v4M12 16h.01" /></svg>
              RISK
            </span>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10, color: '#475569' }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="5" y1="12" x2="19" y2="12" /></svg>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" /></svg>
        </div>
      </div>

      <div style={{ flex: 1, padding: '28px 20px 18px', display: 'flex', flexDirection: 'column', alignItems: 'center', overflow: 'hidden' }}>
        <div style={{
          width: 56, height: 56, borderRadius: 14,
          background: 'rgba(56,189,248,0.1)', border: '1px solid rgba(56,189,248,0.25)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14,
        }}>
          <AssistBotHP size={30} />
        </div>
        <div style={{ fontSize: 17, fontWeight: 700, color: '#f1f5f9', marginBottom: 6 }}>
          AI-Powered Risk Analysis
        </div>
        <div style={{ fontSize: 12.5, color: '#94a3b8', textAlign: 'center', maxWidth: 340, marginBottom: 22, lineHeight: 1.5 }}>
          Select an analysis type or ask a question about this risk.
          <br />
          <span style={{ color: '#64748b', fontSize: 11.5 }}>All PHI is de-identified before processing.</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, width: '100%', maxWidth: 420 }}>
          {cards.map((c, i) => (
            <AnalysisCardHP key={c.title} icon={c.icon} title={c.title} subtitle={c.sub}
              tint={c.tint} active={activeCard === i} delay={120 * i} />
          ))}
        </div>
      </div>

      <div style={{ borderTop: '1px solid #1e293b', padding: '14px 16px 12px', background: '#0a1020' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          background: '#050a14', border: '1px solid #1e293b',
          borderRadius: 10, padding: '10px 12px',
        }}>
          <div style={{ flex: 1, fontSize: 12.5, color: '#475569' }}>Ask about your compliance data…</div>
          <div style={{
            width: 32, height: 32, borderRadius: 7,
            background: 'rgba(56,189,248,0.15)', border: '1px solid rgba(56,189,248,0.3)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#38bdf8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <line x1="22" y1="2" x2="11" y2="13" />
              <polygon points="22 2 15 22 11 13 2 9 22 2" />
            </svg>
          </div>
        </div>
        <div style={{ fontSize: 10, color: '#475569', textAlign: 'center', marginTop: 8, lineHeight: 1.4 }}>
          Responses are for guidance only — consult legal counsel for formal determinations.
        </div>
      </div>
    </div>
  );
};

const HeroBoldHP = () => {
  const mono = { fontFamily: "'JetBrains Mono', ui-monospace, monospace" };
  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      background: '#030712', color: '#fff',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(circle at 80% 0%, rgba(6,182,212,0.18), transparent 50%), radial-gradient(circle at 0% 100%, rgba(59,130,246,0.12), transparent 50%)',
      }} />
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.35,
        backgroundImage: 'linear-gradient(rgba(56,189,248,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(56,189,248,0.04) 1px, transparent 1px)',
        backgroundSize: '32px 32px',
      }} />
      <NavBold />
      <div style={{
        position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr',
        gap: 56, padding: '56px 48px 88px', maxWidth: 1280, margin: '0 auto', alignItems: 'start',
      }}>
        <div style={{ paddingTop: 24 }}>
          <div style={{
            ...mono, fontSize: 11, letterSpacing: 2, color: '#38bdf8',
            marginBottom: 28, display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <span style={{ display: 'inline-block', width: 24, height: 1, background: '#38bdf8' }} />
            CTRL_ASSIST // AI COMPLIANCE LAYER
          </div>
          <h1 style={{ fontSize: 64, lineHeight: 1.0, fontWeight: 800, letterSpacing: -2, margin: 0, marginBottom: 24 }}>
            Answers in <span style={{
              background: 'linear-gradient(135deg, #7dd3fc, #3b82f6)',
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            }}>seconds.</span><br/>
            Not <span style={{ textDecoration: 'line-through', textDecorationColor: '#ef4444', textDecorationThickness: 3, color: '#64748b' }}>$50,000</span> later.
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: '#94a3b8', margin: 0, marginBottom: 36, maxWidth: 500 }}>
            CTRL Assist is an AI compliance advisor embedded in every module. Analyze risks, map controls, draft treatments, and cite HIPAA regulations — without paying consultant rates for every question.
          </p>
          <div style={{ display: 'flex', gap: 10, marginBottom: 36, alignItems: 'center' }}>
            <button style={{
              ...mono, background: '#38bdf8', color: '#030712',
              border: 'none', padding: '14px 20px', borderRadius: 4,
              fontSize: 12, fontWeight: 700, cursor: 'pointer', letterSpacing: 1,
              display: 'inline-flex', alignItems: 'center', gap: 10,
              boxShadow: '0 0 40px rgba(56,189,248,0.3)',
            }}>TRY CTRL ASSIST →</button>
            <button style={{
              ...mono, background: 'transparent', color: '#cbd5e1',
              border: '1px solid #334155', padding: '14px 18px', borderRadius: 4,
              fontSize: 12, fontWeight: 600, cursor: 'pointer', letterSpacing: 1,
            }}>WATCH TOUR</button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, paddingTop: 24, borderTop: '1px solid #1e293b' }}>
            {[
              { n: '< 3s', l: 'avg response time' },
              { n: '45 CFR', l: 'cited directly' },
              { n: '4', l: 'analysis modes' },
            ].map(s => (
              <div key={s.l}>
                <div style={{ ...mono, fontSize: 22, fontWeight: 700, color: '#7dd3fc' }}>{s.n}</div>
                <div style={{ ...mono, fontSize: 10, color: '#64748b', letterSpacing: 1.5, textTransform: 'uppercase', marginTop: 4 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
        <div><AssistPanelHP /></div>
      </div>
    </section>
  );
};

Object.assign(window, { HeroBoldHP, NavBold });