import { CalendarDays, Check, ContactRound, FileUp, Filter, ListTodo, Mail, Paperclip, Search, Signature, Smartphone, Star } from "lucide-react";
import "./campaign-kit.css";

type Copy = { en: string; th: string };
const core: Array<[typeof Mail, Copy]> = [
  [Mail, { en: "Inbox and folders", th: "กล่องจดหมายและโฟลเดอร์" }], [Search, { en: "Fast search", th: "ค้นหาได้รวดเร็ว" }],
  [Paperclip, { en: "File attachments", th: "แนบไฟล์" }], [ContactRound, { en: "Contacts", th: "รายชื่อผู้ติดต่อ" }],
  [Filter, { en: "Rules and filters", th: "กฎและตัวกรอง" }], [Signature, { en: "Email signatures", th: "ลายเซ็นอีเมล" }],
  [Star, { en: "Stars and tags", th: "ดาวและป้ายกำกับ" }], [Smartphone, { en: "Mobile ready", th: "พร้อมใช้งานบนมือถือ" }],
];

function Bi({ copy, inverse = false }: { copy: Copy; inverse?: boolean }) { return <span className={inverse ? "bi inverse" : "bi"}><span>{copy.en}</span><span lang="th">{copy.th}</span></span>; }
function Header({ edition, inverse = false }: { edition: string; inverse?: boolean }) { return <header><b className={inverse ? "logo inverse" : "logo"}><i><Mail size={17} /></i>Zimphony</b><em>{edition}</em></header>; }
function Footer({ copy, inverse = false }: { copy: Copy; inverse?: boolean }) { return <footer className={inverse ? "inverse" : ""}><Bi copy={copy} inverse={inverse} /></footer>; }

function Inbox() { return <div className="inbox" aria-hidden="true"><aside><b><Mail size={13} /> Z</b><button>+ Compose</button>{["Inbox 12", "Starred", "Sent", "Projects"].map(x => <span key={x}>{x}</span>)}</aside><section><div className="search"><Search size={12} />Search mail</div><h3>Inbox <small>Today</small></h3>{[["M", "Maya Chen", "Project handoff and next steps"], ["N", "Northstar Studio", "April estimate is ready"], ["R", "Ravi", "New brief: regional launch"]].map(([letter, from, subject]) => <p key={from}><i>{letter}</i><b>{from}<small>{subject}</small></b><time>10:24</time></p>)}</section></div>; }

function PostOne() { return <article className="post one"><Header edition="WEBMAIL-ONLY" /><div className="copy"><label>YOUR BRAND. YOUR MAIL.</label><h2>Work mail,<br />made yours.</h2><strong lang="th">อีเมลองค์กร<br />ในแบบของคุณ</strong><p><Bi copy={{ en: "A clean, branded workspace for the mail your team uses every day.", th: "พื้นที่ทำงานอีเมลที่สะอาด ใช้แบรนด์ของคุณ และพร้อมสำหรับทีมทุกวัน" }} /></p></div><Inbox /><Footer copy={{ en: "Install it on your infrastructure.", th: "ติดตั้งบนโครงสร้างพื้นฐานของคุณ" }} /></article>; }
function PostTwo() { return <article className="post two"><Header edition="WEBMAIL-ONLY" inverse /><div className="copy"><label>MAIL, WITHOUT THE DETOUR</label><h2>Everything<br />around the email.</h2><strong lang="th">ครบทุกอย่าง<br />รอบงานอีเมล</strong></div><div className="hub"><Mail size={43} /></div><div className="orbit">{core.map(([Icon, copy]) => <span key={copy.en}><Icon size={17} /><Bi copy={copy} inverse /></span>)}</div><Footer inverse copy={{ en: "One familiar place for focused communication.", th: "ที่เดียวสำหรับการสื่อสารที่เป็นระบบ" }} /></article>; }
function PostThree() { const points = [{ en: "Read conversations clearly", th: "อ่านบทสนทนาได้ชัดเจน" }, { en: "Find messages in seconds", th: "ค้นหาอีเมลได้ในไม่กี่วินาที" }, { en: "Keep contacts close", th: "มีรายชื่อผู้ติดต่อพร้อมใช้" }, { en: "Work comfortably on mobile", th: "ทำงานได้สบายบนมือถือ" }]; return <article className="post three"><Header edition="WEBMAIL-ONLY" /><div className="copy"><label>BUILT FOR THE ACTUAL WORKDAY</label><h2>Mail that<br />keeps moving.</h2><strong lang="th">อีเมลที่<br />ทำงานต่อเนื่อง</strong></div><div className="phone" aria-hidden="true"><small>9:41</small><h3>Inbox</h3><p><Search size={11} /> Search</p>{["Project update", "Meeting notes", "Contract review"].map((x, i) => <span key={x}><i>{["M", "K", "R"][i]}</i><b>{x}<small>New message waiting</small></b></span>)}<button>+ Compose</button></div><ul>{points.map(copy => <li key={copy.en}><Check size={16} /><Bi copy={copy} /></li>)}</ul><Footer copy={{ en: "Responsive mail for desktop, tablet, and mobile.", th: "อีเมลที่ตอบสนองบนเดสก์ท็อป แท็บเล็ต และมือถือ" }} /></article>; }
function PostFour() { return <article className="post four"><Header edition="WEBMAIL-GOOGLE" inverse /><div className="copy"><label>MAIL + PRODUCTIVITY ADD-ON</label><h2>Your inbox,<br />with room<br />to plan.</h2><strong lang="th">กล่องจดหมาย<br />ที่มีพื้นที่<br />ให้คุณวางแผน</strong></div><div className="calendar" aria-hidden="true"><p><b>Calendar</b><span>April 2026</span></p><div>{["M","T","W","T","F","S","S"].map(x => <b key={x}>{x}</b>)}{Array.from({ length: 28 }, (_, i) => <i className={[9,16,17].includes(i) ? "booked" : ""} key={i}>{i + 1}</i>)}</div></div><div className="addon"><span><CalendarDays size={17} /> Calendar</span><span><ListTodo size={17} /> Tasks</span><span><FileUp size={17} /> Drive</span></div><Footer inverse copy={{ en: "Connect the tools your team already uses.", th: "เชื่อมต่อเครื่องมือที่ทีมของคุณใช้อยู่แล้ว" }} /></article>; }
function PostFive() { return <article className="post five"><Header edition="CHOOSE YOUR EDITION" /><div className="copy"><label>ONE MAIL CORE. TWO READY PATHS.</label><h2>Pick the<br />workspace<br />that fits.</h2><strong lang="th">เลือกพื้นที่ทำงาน<br />ที่เหมาะกับคุณ</strong></div><div className="compare"><section><Mail /><h3>Webmail Only</h3><p lang="th">อีเมลสำหรับองค์กร<br />ที่ชัดเจนและครบถ้วน</p><span><Check size={12} />Mail essentials</span><span><Check size={12} />Contacts, filters & signatures</span><span><Check size={12} />Mobile & tablet ready</span></section><section><CalendarDays /><h3>Webmail + Google</h3><p lang="th">Mail, Contacts พร้อม<br />Calendar, Tasks และ Drive</p><span><Check size={12} />Mail and Contacts</span><span><Check size={12} />Calendar & Tasks add-ons</span><span><Check size={12} />Drive add-on</span></section></div><Footer copy={{ en: "White-label. Installable. Built around mail.", th: "ไวท์เลเบล ติดตั้งได้ และสร้างมาเพื่องานอีเมล" }} /></article>; }

export default function CampaignKitPage() { return <main className="kit"><div className="intro"><label>MARKETING CREATIVE KIT</label><h1>Webmail launch posts</h1><p>5 vertical layouts · Thai + English · 4:5 social format</p></div><div className="posts"><PostOne /><PostTwo /><PostThree /><PostFour /><PostFive /></div></main>; }
