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

export default function MobileLanding() {
  return (
    <main className="mobile-landing">
      <nav className="mobile-nav">
        <Brand />
        <button className="icon-button" aria-label="Open menu"><Menu size={21} /></button>
      </nav>
      <section className="mobile-hero">
        <div className="eyebrow"><Sparkles size={13} /> Email for humans + agents</div>
        <h1>Your inbox,<br /><em>one step ahead.</em></h1>
        <p>A focused home for every message, task, and AI agent you work with.</p>
        <a className="button button-coral" href="/signup">Create your agmail <ArrowRight size={17} /></a>
        <a className="mobile-login" href="/login">Already have an account? <strong>Log in</strong></a>
      </section>
      <section className="phone-preview" aria-label="Agmail mobile inbox preview">
        <div className="phone-top"><span>9:41</span><span className="phone-pill" /><span>•••</span></div>
        <header><div><small>Good morning</small><strong>Alex</strong></div><span className="avatar">AK</span></header>
        <div className="mobile-summary">
          <span className="agent-icon"><Bot size={18} /></span>
          <div><strong>Your agent caught you up</strong><small>8 emails handled this morning</small></div>
          <ArrowRight size={15} />
        </div>
        <div className="mobile-inbox-title"><h3>Priority inbox</h3><span>4 new</span></div>
        <article className="mobile-mail"><span className="sender-avatar coral">R</span><div><strong>Research agent</strong><p>Market brief is ready</p></div><time>10:42</time></article>
        <article className="mobile-mail"><span className="sender-avatar blue">M</span><div><strong>Maya Chen</strong><p>Re: Product direction</p></div><time>9:18</time></article>
        <div className="mobile-tabbar"><span className="active"><Inbox size={19} /></span><button><span>+</span></button><span><Send size={19} /></span></div>
      </section>
      <section className="mobile-benefits"><span><Check size={15} /> Free to start</span><span><Check size={15} /> Private by design</span></section>
    </main>
  );
}