/* ═══════════════════════════════════════════
   Rta Labs — Section Components
   ═══════════════════════════════════════════ */

/* ── SVG Icons for Capabilities ── */
const CapIcons = {
  autonomous: (
    <svg className="cap-icon" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="16" cy="16" r="12"></circle>
      <circle cx="16" cy="16" r="5"></circle>
      <line x1="16" y1="4" x2="16" y2="8"></line>
      <line x1="16" y1="24" x2="16" y2="28"></line>
      <line x1="4" y1="16" x2="8" y2="16"></line>
      <line x1="24" y1="16" x2="28" y2="16"></line>
    </svg>
  ),
  validation: (
    <svg className="cap-icon" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="8 16 13 21 24 10"></polyline>
      <rect x="4" y="4" width="24" height="24" rx="2"></rect>
    </svg>
  ),
  deploy: (
    <svg className="cap-icon" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M16 4 L28 12 L28 24 L16 28 L4 24 L4 12 Z"></path>
      <line x1="16" y1="16" x2="16" y2="28"></line>
      <line x1="16" y1="16" x2="28" y2="12"></line>
      <line x1="16" y1="16" x2="4" y2="12"></line>
    </svg>
  ),
  govern: (
    <svg className="cap-icon" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <rect x="4" y="6" width="24" height="20" rx="2"></rect>
      <line x1="4" y1="12" x2="28" y2="12"></line>
      <line x1="12" y1="12" x2="12" y2="26"></line>
    </svg>
  ),
};

/* ── Theme toggle icons ── */
const SunIcon = () => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
    <circle cx="8" cy="8" r="3"></circle>
    <line x1="8" y1="1.5" x2="8" y2="3"></line>
    <line x1="8" y1="13" x2="8" y2="14.5"></line>
    <line x1="1.5" y1="8" x2="3" y2="8"></line>
    <line x1="13" y1="8" x2="14.5" y2="8"></line>
    <line x1="3.4" y1="3.4" x2="4.5" y2="4.5"></line>
    <line x1="11.5" y1="11.5" x2="12.6" y2="12.6"></line>
    <line x1="3.4" y1="12.6" x2="4.5" y2="11.5"></line>
    <line x1="11.5" y1="4.5" x2="12.6" y2="3.4"></line>
  </svg>
);
const MoonIcon = () => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M13.5 8.5A5.5 5.5 0 0 1 8 3a5 5 0 1 0 5.5 5.5Z"></path>
  </svg>
);

/* ── Social icons ── */
const LinkedInIcon = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z"></path>
    <rect x="2" y="9" width="4" height="12"></rect>
    <circle cx="4" cy="4" r="2"></circle>
  </svg>
);
const GitHubIcon = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
  </svg>
);

/* ── Navigation ── */
function Nav({ scrolled, activeSection, onNavClick, theme, onToggleTheme }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const links = [
    { id: 'platform', label: 'Platform' },
    { id: 'agents', label: 'AI Agents' },
    { id: 'capabilities', label: 'Capabilities' },
    { id: 'principles', label: 'Security' },
    { id: 'blog', label: 'Blog', href: 'https://blog.rtalabs.in' },
    { id: 'contact', label: 'Contact' },
  ];

  const handleClick = (link) => {
    setMenuOpen(false);
    if (link.href) return;
    onNavClick(link.id);
  };

  return (
    <React.Fragment>
      <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
        <div className="nav-inner">
          <a href="#" className="nav-logo" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
            <svg className="nav-logo-mark" width="28" height="28" viewBox="0 0 110 110" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="55" cy="55" r="53" stroke="currentColor" strokeWidth="2.5"/>
              <polygon points="55,15 93,78 17,78" stroke="currentColor" strokeWidth="2.5" fill="none" strokeLinejoin="round"/>
              <circle cx="55" cy="52" r="5.5" fill="currentColor"/>
            </svg>
            <span className="nav-logo-text">Rta<span> Labs</span></span>
          </a>
          <div className="nav-right">
            <ul className="nav-links">
              {links.map(link => (
                <li key={link.id}>
                  <a
                    href={link.href || `#${link.id}`}
                    className={activeSection === link.id ? 'active' : ''}
                    target={link.href ? '_blank' : undefined}
                    rel={link.href ? 'noopener noreferrer' : undefined}
                    onClick={(e) => { if (!link.href) e.preventDefault(); handleClick(link); }}
                  >{link.label}</a>
                </li>
              ))}
            </ul>
            <button className="theme-toggle" onClick={onToggleTheme} aria-label="Toggle theme">
              {theme === 'dark' ? <SunIcon /> : <MoonIcon />}
            </button>
            <button
              className={`nav-hamburger ${menuOpen ? 'open' : ''}`}
              onClick={() => setMenuOpen(!menuOpen)}
              aria-label="Toggle menu"
            >
              <span></span><span></span><span></span>
            </button>
          </div>
        </div>
      </nav>
      <div className={`mobile-nav ${menuOpen ? 'open' : ''}`}>
        {links.map(link => (
          <a
            key={link.id}
            href={link.href || `#${link.id}`}
            target={link.href ? '_blank' : undefined}
            rel={link.href ? 'noopener noreferrer' : undefined}
            onClick={(e) => { if (!link.href) e.preventDefault(); handleClick(link); }}
          >{link.label}</a>
        ))}
        <button className="theme-toggle" onClick={() => { onToggleTheme(); setMenuOpen(false); }} aria-label="Toggle theme" style={{ marginTop: 8 }}>
          {theme === 'dark' ? <SunIcon /> : <MoonIcon />}
        </button>
      </div>
    </React.Fragment>
  );
}

/* ── Hero ── */
function Hero() {
  return (
    <section className="hero" id="hero">
      <div className="container hero-content">
        <div className="hero-label">AI Systems for Security</div>
        <h1>Complex systems<br />require <em>structure.</em></h1>
        <p className="hero-sub">AI-powered security for modern digital infrastructure.</p>
        <p className="hero-body">
          Rta Labs builds systems for securing and governing complex digital environments.
          Through AI agents, autonomous validation, and continuous assessment, we help
          organizations identify weaknesses, strengthen security posture, and operate
          with confidence.
        </p>
        <div className="hero-ctas">
          <a href="#contact" className="btn btn-primary" onClick={(e) => {
            e.preventDefault();
            document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
          }}>Request Access</a>
          <a href="#contact" className="btn btn-secondary" onClick={(e) => {
            e.preventDefault();
            document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
          }}>Talk to Us</a>
        </div>
      </div>
    </section>
  );
}

/* ── Platform Overview ── */
function Platform() {
  const features = [
    { title: 'Autonomous Workflows', desc: 'AI-driven processes that execute security tasks independently and continuously.' },
    { title: 'Governed Execution', desc: 'Structured control over every action, decision, and assessment in the pipeline.' },
    { title: 'Continuous Assurance', desc: 'Ongoing validation that security posture meets standards at all times.' },
    { title: 'Operational Visibility', desc: 'Real-time insight into system health, risk surfaces, and agent activity.' },
  ];

  return (
    <section className="section" id="platform">
      <div className="container">
        <div data-animate>
          <div className="label">Platform</div>
          <h2 className="section-head">Security systems built for environments<br />that exceed human scale.</h2>
        </div>
        <div className="platform-grid">
          <div className="platform-text" data-animate data-delay="1">
            <p>
              Modern environments evolve faster than traditional security models
              can adapt. Rta Labs develops AI-assisted systems that continuously
              evaluate, validate, and govern applications, infrastructure, APIs,
              and digital ecosystems.
            </p>
          </div>
          <div className="platform-features" data-animate data-delay="2">
            {features.map((f, i) => (
              <div className="platform-feat" key={i}>
                <h4>{f.title}</h4>
                <p>{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── AI Agents ── */
function Agents() {
  const agents = [
    {
      tag: 'Agent',
      title: 'Validation Agent',
      desc: 'Continuously validates configurations, attack surfaces, and security posture across your entire environment.',
    },
    {
      tag: 'Agent',
      title: 'Assessment Agent',
      desc: 'Autonomously evaluates environments for exploitable weaknesses, mapping risk with precision.',
    },
    {
      tag: 'Agent',
      title: 'Deployment Assurance Agent',
      desc: 'Helps ensure resilient, secure, and watertight deployments before they reach production.',
    },
    {
      tag: 'Agent',
      title: 'Governance Agent',
      desc: 'Maintains structured oversight and controlled execution across all security operations.',
    },
  ];

  return (
    <section className="section section-alt" id="agents">
      <div className="container">
        <div data-animate>
          <div className="label">AI Agents</div>
          <h2 className="section-head">AI Agents for Security Operations</h2>
          <p className="section-sub">Autonomous agents that work continuously to validate, assess, and govern your security environment.</p>
        </div>
        <div className="agents-grid">
          {agents.map((agent, i) => (
            <div className="agent-card" key={i} data-animate data-delay={i < 2 ? '1' : '2'}>
              <div className="agent-card-status">
                <div className="agent-pulse"></div>
                <span className="agent-card-tag">{agent.tag}</span>
              </div>
              <h3>{agent.title}</h3>
              <p>{agent.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Capabilities ── */
function Capabilities() {
  const caps = [
    { icon: 'autonomous', title: 'Autonomous Security', desc: 'AI-assisted systems for continuous security assessment across every layer.' },
    { icon: 'validation', title: 'Continuous Validation', desc: 'Structured workflows that validate environments and configurations over time.' },
    { icon: 'deploy', title: 'Watertight Deployments', desc: 'Security validation for reliable, governed production deployments.' },
    { icon: 'govern', title: 'Governance Systems', desc: 'Control, visibility, and assurance across complex digital environments.' },
  ];

  return (
    <section className="section" id="capabilities">
      <div className="container">
        <div data-animate>
          <div className="label">Capabilities</div>
          <h2 className="section-head">What we build</h2>
        </div>
        <div className="cap-grid">
          {caps.map((cap, i) => (
            <div className="cap-card" key={i} data-animate data-delay={String(i + 1)}>
              {CapIcons[cap.icon]}
              <h3>{cap.title}</h3>
              <p>{cap.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Operating Principle ── */
function Principle() {
  return (
    <section className="section section-alt principle" id="principles">
      <div className="container">
        <div data-animate>
          <div className="label" style={{ justifyContent: 'center' }}>Principle</div>
          <h2>Order, <em>enforced.</em></h2>
          <p className="principle-sub">Through structured AI systems, continuous validation, and governed execution.</p>
        </div>
      </div>
    </section>
  );
}

/* ── India Presence ── */
function India() {
  return (
    <section className="section india" id="india">
      <div className="container">
        <div data-animate>
          <div className="label" style={{ justifyContent: 'center' }}>Origin</div>
          <h2>Built in India.<br />Designed for global systems.</h2>
          <p>
            Rta Labs is an India-based company building security systems for
            modern digital infrastructure and evolving technology ecosystems.
          </p>
        </div>
      </div>
    </section>
  );
}

/* ── Blog ── */
function Blog() {
  return (
    <section className="section section-alt" id="blog">
      <div className="container" style={{ textAlign: 'center' }}>
        <div data-animate>
          <div className="label" style={{ justifyContent: 'center' }}>Insights</div>
          <h2 className="section-head">From our blog</h2>
          <p className="section-sub" style={{ margin: '0 auto 36px' }}>
            Perspectives on AI-assisted security, autonomous validation, and building systems for complex environments.
          </p>
          <a href="https://blog.rtalabs.in" target="_blank" rel="noopener noreferrer" className="btn btn-secondary" style={{ display: 'inline-flex' }}>
            Read the Blog &rarr;
          </a>
        </div>
      </div>
    </section>
  );
}

/* ── Footer ── */
function Footer() {
  return (
    <footer className="footer">
      <div className="container footer-inner">
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <svg width="22" height="22" viewBox="0 0 110 110" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="55" cy="55" r="53" stroke="var(--text-2)" strokeWidth="2.5"/>
            <polygon points="55,15 93,78 17,78" stroke="var(--text-2)" strokeWidth="2.5" fill="none" strokeLinejoin="round"/>
            <circle cx="55" cy="52" r="5.5" fill="var(--text-2)"/>
          </svg>
          <div>
            <div className="footer-brand">Rta Labs</div>
            <div className="footer-tagline">AI Systems for Security &amp; Assurance</div>
          </div>
        </div>
        <div className="footer-meta">
          <div className="footer-social">
            <a
              href="https://www.linkedin.com/company/rta-lab/"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Rta Labs on LinkedIn"
            >
              <LinkedInIcon />
            </a>
            <a
              href="https://github.com/rta-lab"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Rta Labs on GitHub"
            >
              <GitHubIcon />
            </a>
          </div>
          <span>India</span>
          <span>&copy; {new Date().getFullYear()} Rta Labs. All rights reserved.</span>
        </div>
      </div>
    </footer>
  );
}

// Export to window for cross-file access
Object.assign(window, { Nav, Hero, Platform, Agents, Capabilities, Principle, India, Blog, Footer });
