import { ArrowRight, Bot, Braces, Check, MessageSquare, ShieldCheck, Zap } from 'lucide-react'
import { Link } from 'react-router-dom'

export function LandingPage() {
  return (
    <div className="landing">
      <header className="landing-nav">
        <Link to="/" className="landing-brand"><img src="/urmi-logo.png" alt="Urmi" /></Link>
        <nav>
          <a href="#product">Product</a>
          <a href="#developers">Developers</a>
          <a href="#security">Security</a>
        </nav>
        <div className="landing-actions">
          <Link to="/login">Log in</Link>
          <Link to="/register" className="landing-cta">Start building <ArrowRight size={15} /></Link>
        </div>
      </header>

      <main>
        <section className="hero-section">
          <div className="hero-copy">
            <span className="hero-pill"><i /> SMS infrastructure for AI agents</span>
            <h1>Give every AI agent a reliable way to <em>reach humans.</em></h1>
            <p>One API for transactional SMS, OTPs, alerts, and agent-driven conversations—built for delivery, compliance, and scale.</p>
            <div className="hero-actions">
              <Link to="/register" className="hero-primary">Start building free <ArrowRight size={17} /></Link>
              <a href="#developers" className="hero-secondary">View API <Braces size={17} /></a>
            </div>
            <div className="hero-proof"><span><Check size={13} /> No credit card</span><span><Check size={13} /> Sandbox included</span><span><Check size={13} /> India-ready</span></div>
          </div>

          <div className="agent-demo">
            <div className="demo-window">
              <div className="demo-top"><span><i /><i /><i /></span><small>agent.ts</small><b>Connected</b></div>
              <pre><code><span className="code-purple">await</span> urmi.messages.send({'{'}{'\n'}  to: <span className="code-green">"+91 98765 43210"</span>,{'\n'}  agent: <span className="code-green">"support_agent"</span>,{'\n'}  message: response.text,{'\n'}  template: <span className="code-green">"CASE_UPDATE"</span>{'\n'}{'}'})</code></pre>
              <div className="demo-event"><span><MessageSquare size={17} /></span><div><small>MESSAGE DELIVERED</small><strong>Your refund was approved. It will arrive in 3–5 days.</strong></div><b>184 ms</b></div>
            </div>
            <div className="agent-orbit orbit-one"><Bot size={19} /></div>
            <div className="agent-orbit orbit-two"><Zap size={18} /></div>
          </div>
        </section>

        <section className="trust-strip">
          <span>Designed for autonomous communication</span>
          <div><b>AI support</b><b>Fintech</b><b>Commerce</b><b>Logistics</b><b>Healthcare</b></div>
        </section>

        <section className="feature-section" id="product">
          <div className="section-heading"><span>THE AGENT MESSAGING LAYER</span><h2>Simple at the surface. Serious underneath.</h2><p>Your agents focus on the conversation. Urmi handles telecom complexity.</p></div>
          <div className="feature-grid">
            <article><span><Bot /></span><h3>Agent-native messaging</h3><p>Stable APIs and webhooks designed for tools, workflows, and autonomous agents.</p></article>
            <article><span><Zap /></span><h3>Fast, observable delivery</h3><p>Track every message from API request to carrier delivery with one event timeline.</p></article>
            <article id="security"><span><ShieldCheck /></span><h3>Compliance built in</h3><p>KYC, DLT templates, sender validation, and consent checks before messages leave.</p></article>
          </div>
        </section>

        <section className="developer-band" id="developers">
          <div><span>BUILD IN MINUTES</span><h2>One endpoint. Every agent.</h2><p>Start in the sandbox, inspect the request, and promote the same integration to production.</p></div>
          <Link to="/register">Get your API key <ArrowRight size={16} /></Link>
        </section>
      </main>

      <footer className="landing-footer"><img src="/urmi-logo.png" alt="Urmi" /><span>SMS infrastructure for the agentic internet.</span><small>© 2026 Urmi Technologies</small></footer>
    </div>
  )
}