import {
  ArrowRight, Bot, Check, ChevronDown, Clock3, Inbox, Menu,
  Paperclip, Search, Send, ShieldCheck, Sparkles,
} from "lucide-react";
import Brand from "./Brand";

const mail = [
  { sender: "Research agent", subject: "Market brief is ready", time: "10:42", color: "coral" },
  { sender: "Maya Chen", subject: "Re: Product direction", time: "9:18", color: "blue" },
  { sender: "Calendar", subject: "Design review in 30 minutes", time: "8:30", color: "gold" },
];

export default function WebLanding() {
  return (
    <main className="landing">
      <nav className="nav shell">
        <Brand />
        <div className="nav-links"><a href="#product">Product</a><a href="#security">Security</a><a href="#about">About</a></div>
        <div className="nav-actions"><a className="button button-quiet" href="/login">Log in</a><a className="button button-dark" href="/signup">Create account <ArrowRight size={15} /></a></div>
      </nav>
      <section className="hero shell">
        <div className="hero-copy">
          <div className="eyebrow"><Sparkles size={14} /> Built for you and your agents</div>
          <h1>Email that works<br /><em>at your speed.</em></h1>
          <p>A calm, intelligent inbox where you and your AI agents can send, receive, organize, and get work done.</p>
          <div className="hero-actions"><a className="button button-coral" href="/signup">Get your @agmail <ArrowRight size={17} /></a><a className="button button-outline" href="#product">See how it works</a></div>
          <div className="trust-line"><span><Check size={13} /> Free to start</span><span><Check size={13} /> No card required</span></div>
        </div>
        <div className="product-stage" aria-label="Agmail inbox preview">
          <div className="orb orb-one" /><div className="orb orb-two" />
          <div className="inbox-window">
            <aside className="inbox-sidebar">
              <div className="mini-brand"><Brand compact /></div>
              <button className="compose"><span>+</span></button>
              <div className="side-icons"><span className="active"><Inbox size={18} /></span><span><Send size={18} /></span><span><Clock3 size={18} /></span></div>
              <div className="avatar">AK</div>
            </aside>
            <div className="mail-panel">
              <header className="mail-toolbar"><div><small>Good morning,</small><strong>Alex</strong></div><div className="toolbar-actions"><Search size={17} /><Menu size={17} /></div></header>
              <div className="inbox-heading"><div><h3>Inbox</h3><span>12</span></div><button>Priority <ChevronDown size={13} /></button></div>
              <div className="agent-summary"><div className="agent-icon"><Bot size={19} /></div><div><strong>Your agent handled 8 emails</strong><p>3 replies drafted · 2 tasks completed</p></div><ArrowRight size={16} /></div>
              <div className="mail-list">
                {mail.map((item, index) => (
                  <article className={index === 0 ? "mail-item selected" : "mail-item"} key={item.sender}>
                    <span className={`sender-avatar ${item.color}`}>{item.sender[0]}</span><div><strong>{item.sender}</strong><p>{item.subject}</p></div><time>{item.time}</time>
                  </article>
                ))}
              </div>
              <div className="quick-reply"><Paperclip size={16} /><span>Ask your agent to draft a reply…</span><button><ArrowRight size={15} /></button></div>
            </div>
          </div>
          <div className="floating-note"><span><Check size={14} /></span><div><strong>Follow-up sent</strong><small>Handled by your agent</small></div></div>
        </div>
      </section>
      <section className="feature-strip shell" id="product">
        <div className="feature-intro"><span>One inbox. Less noise.</span><h2>Made for the way work is changing.</h2></div>
        <div className="feature-grid">
          <article><span className="feature-icon peach"><Bot size={21} /></span><h3>Agent-ready</h3><p>Give every agent a secure address and clear permissions.</p></article>
          <article><span className="feature-icon cyan"><Sparkles size={21} /></span><h3>Quietly intelligent</h3><p>Summaries, sorting, and replies—without the clutter.</p></article>
          <article id="security"><span className="feature-icon violet"><ShieldCheck size={21} /></span><h3>Private by design</h3><p>Your conversations stay encrypted and in your control.</p></article>
        </div>
      </section>
    </main>
  );
}