// FAQ + final CTA + footer — bold variant.

const FAQ_ITEMS = [
  { q: 'What is HIPAA compliance software?',
    a: 'HIPAA compliance software centralizes the work of the Security and Privacy Rules — risk assessment, policy management, workforce training, BAA tracking, incident response, and audit evidence — in one system instead of spreadsheets and shared drives.' },
  { q: 'Who needs HIPAA compliance?',
    a: 'Any organization handling Protected Health Information: covered entities (providers, health plans, clearinghouses) and business associates (IT vendors, billing companies, cloud services, and their subprocessors).' },
  { q: 'How fast can we be audit-ready?',
    a: 'Most teams reach baseline compliance in 30–60 days. Guided implementation prioritizes the highest-risk gaps first, and CTRL Assist accelerates policy drafting and control mapping.' },
  { q: 'Is there a free trial?',
    a: 'Yes — free compliance gap assessment plus a 30-day money-back guarantee on all plans. No credit card required to start.' },
  { q: 'How does CTRL Assist handle PHI?',
    a: 'All workspace data is de-identified before any AI processing. Assist responses cite 45 CFR sections and OCR guidance directly; it will not fabricate references. Responses are for guidance only — consult legal counsel for formal determinations.' },
];

const FAQItem = ({ item, i }) => {
  const mono = { fontFamily: "'JetBrains Mono', ui-monospace, monospace" };
  const [open, setOpen] = React.useState(i === 0);
  return (
    <div style={{
      background: '#0b1220',
      border: `1px solid ${open ? '#334155' : '#1e293b'}`,
      borderRadius: 10, overflow: 'hidden', transition: 'all 0.3s ease',
    }}>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          width: '100%', textAlign: 'left', background: 'transparent', border: 'none',
          padding: '18px 22px', cursor: 'pointer',
          display: 'grid', gridTemplateColumns: '36px 1fr 24px', gap: 12, alignItems: 'center',
        }}
      >
        <span style={{ ...mono, fontSize: 11, color: '#38bdf8', letterSpacing: 1.5 }}>
          0{i + 1}
        </span>
        <span style={{ fontSize: 15.5, fontWeight: 600, color: '#f1f5f9' }}>{item.q}</span>
        <span style={{
          color: '#64748b', fontSize: 18,
          transform: open ? 'rotate(45deg)' : 'rotate(0deg)',
          transition: 'transform 0.3s ease',
        }}>+</span>
      </button>
      {open && (
        <div style={{
          padding: '0 22px 20px 70px', fontSize: 13.5, color: '#94a3b8', lineHeight: 1.7,
          animation: 'fadeInUp 0.3s ease-out',
        }}>
          {item.a}
        </div>
      )}
    </div>
  );
};

const FAQSection = () => {
  const { SectionLabel, SectionH } = window;
  return (
    <section style={{
      position: 'relative', background: '#030712', color: '#fff',
      padding: '96px 48px', borderTop: '1px solid #1e293b',
    }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <SectionLabel n="05" label="FAQ" />
        <SectionH>Frequently asked <span style={{ color: '#64748b' }}>questions.</span></SectionH>
        <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {FAQ_ITEMS.map((item, i) => <FAQItem key={i} item={item} i={i} />)}
        </div>
      </div>
    </section>
  );
};

const FinalCTA = () => {
  const mono = { fontFamily: "'JetBrains Mono', ui-monospace, monospace" };
  return (
    <section style={{
      position: 'relative', background: '#05080f', color: '#fff',
      padding: '96px 48px', borderTop: '1px solid #1e293b',
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at center, rgba(56,189,248,0.14), transparent 60%)',
      }} />
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.3,
        backgroundImage: 'linear-gradient(rgba(56,189,248,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(56,189,248,0.05) 1px, transparent 1px)',
        backgroundSize: '32px 32px',
      }} />

      <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        <div style={{
          ...mono, fontSize: 11, letterSpacing: 2.5, color: '#38bdf8',
          marginBottom: 24, display: 'flex', alignItems: 'center', gap: 12,
          justifyContent: 'center',
        }}>
          <span style={{ display: 'inline-block', width: 28, height: 1, background: '#38bdf8' }} />
          READY_TO_DEPLOY
          <span style={{ display: 'inline-block', width: 28, height: 1, background: '#38bdf8' }} />
        </div>
        <h2 style={{
          fontSize: 56, lineHeight: 1.05, fontWeight: 800, letterSpacing: -2,
          margin: 0, marginBottom: 20, color: '#f1f5f9',
        }}>
          Take <span style={{
            background: 'linear-gradient(135deg, #7dd3fc, #3b82f6)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
          }}>CTRL</span> of your HIPAA program.
        </h2>
        <p style={{ fontSize: 17, color: '#94a3b8', lineHeight: 1.6, margin: 0, marginBottom: 36, maxWidth: 580, marginLeft: 'auto', marginRight: 'auto' }}>
          Free compliance gap assessment. 30-day money-back guarantee. No credit card required.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="Contact.html" style={{
            ...mono, background: '#38bdf8', color: '#030712',
            border: 'none', padding: '16px 24px', borderRadius: 4,
            fontSize: 13, fontWeight: 700, cursor: 'pointer', letterSpacing: 1.5,
            boxShadow: '0 0 50px rgba(56,189,248,0.35)', textDecoration: 'none',
          }}>START FREE ASSESSMENT →</a>
          <a href="Contact.html" style={{
            ...mono, background: 'transparent', color: '#e2e8f0',
            border: '1px solid #334155', padding: '16px 22px', borderRadius: 4,
            fontSize: 13, fontWeight: 600, cursor: 'pointer', letterSpacing: 1.5,
            textDecoration: 'none',
          }}>BOOK 30-MIN DEMO</a>
        </div>
      </div>
    </section>
  );
};

const FooterBold = () => {
  const mono = { fontFamily: "'JetBrains Mono', ui-monospace, monospace" };
  const FoldMarkHP = window.FoldMarkHP;
  return (
    <footer style={{
      background: '#030712', color: '#64748b',
      borderTop: '1px solid #1e293b', padding: '56px 48px 32px',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 40,
          paddingBottom: 40, borderBottom: '1px solid #1e293b',
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <FoldMarkHP size={28} />
              <span style={{ fontSize: 17, fontWeight: 800, color: '#fff', letterSpacing: -0.3 }}>CTRL</span>
            </div>
            <div style={{ fontSize: 12.5, color: '#64748b', lineHeight: 1.6, maxWidth: 260 }}>
              Security & Compliance software for healthcare. HIPAA-native, AI-assisted, built for the mid-market.
            </div>
          </div>
          {[
            { h: 'PRODUCT', links: [
              { l: 'Features', href: 'index.html#features' },
              { l: 'CTRL Assist', href: 'index.html#features' },
              { l: 'Pricing', href: 'Pricing.html' },
              { l: 'Security', href: 'Security.html' },
            ]},
            { h: 'INDUSTRIES', links: [
              { l: 'Telehealth', href: 'Telehealth.html' },
              { l: 'Behavioral Health', href: '#' },
              { l: 'Dental & DSOs', href: '#' },
              { l: 'Business Associates', href: '#' },
              { l: 'Rural Hospitals', href: 'Rural.html' },
            ]},
            { h: 'COMPANY', links: [
              { l: 'About', href: 'About.html' },
              { l: 'Blog', href: '#' },
              { l: 'Contact', href: 'Contact.html' },
              { l: 'Careers', href: '#' },
            ]},
            { h: 'LEGAL', links: [
              { l: 'Privacy', href: '#' },
              { l: 'Terms', href: '#' },
              { l: 'BAA', href: '#' },
              { l: 'Trust Center', href: '#' },
            ]},
          ].map(col => (
            <div key={col.h}>
              <div style={{ ...mono, fontSize: 10, letterSpacing: 1.5, color: '#38bdf8', marginBottom: 14 }}>
                {col.h}
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 9 }}>
                {col.links.map(link => (
                  <li key={link.l}>
                    <a href={link.href} style={{ color: '#94a3b8', textDecoration: 'none', fontSize: 12.5 }}>{link.l}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 24, ...mono, fontSize: 11, color: '#475569', letterSpacing: 0.5,
        }}>
          <span>© 2026 CTRL SECURITY & COMPLIANCE LLC — ALL RIGHTS RESERVED</span>
          <span>sales@ctrlcompliance.com</span>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { FAQSection, FinalCTA, FooterBold });