graph LR
    subgraph Editor["Visual Editor"]
        direction TB
        BLOCKS[Block Palette] --> CANVAS[Email Canvas]
        CANVAS --> PREVIEW[Live Preview]
        THEME[Theme Panel] --> CANVAS
    end

    subgraph Actions["Editor Actions"]
        UNDO[Undo/Redo<br/>50 states]
        SAVE[Auto-save<br/>localStorage]
        VIEW[Device Toggle<br/>Desktop/Mobile]
    end

    Editor --> Actions

    style BLOCKS fill:#DC2626,color:#fff
    style CANVAS fill:#16A34A,color:#fff
    style PREVIEW fill:#F59E0B,color:#fff
    style THEME fill:#7C3AED,color:#fff

graph LR
    S1["1. Select<br/>Template"] --> S2["2. Choose<br/>Recipients"]
    S2 --> S3["3. Customize<br/>Variables"]
    S3 --> S4["4. Preview<br/>Email"]
    S4 --> S5["5. Send &<br/>Track"]

    style S1 fill:#DC2626,color:#fff
    style S2 fill:#F59E0B,color:#fff
    style S3 fill:#16A34A,color:#fff
    style S4 fill:#7C3AED,color:#fff
    style S5 fill:#3B82F6,color:#fff

flowchart LR
    subgraph Input["Input Methods"]
        MANUAL[Manual Entry]
        CSV[CSV Import]
        RESEND[Resend Sync]
    end

    subgraph Storage["Contact Storage"]
        LOCAL[(localStorage)]
        CLOUD[(Resend Audience)]
    end

    MANUAL --> LOCAL
    CSV --> LOCAL
    RESEND --> LOCAL
    LOCAL <-.->|Sync| CLOUD

    style MANUAL fill:#DC2626,color:#fff
    style CSV fill:#16A34A,color:#fff
    style RESEND fill:#F59E0B,color:#fff
    style LOCAL fill:#FEF3C7
    style CLOUD fill:#000,color:#fff

graph TB
    subgraph Client["Browser (Client)"]
        UI[React UI]
        ZUSTAND[(Zustand Store)]
        LS[(LocalStorage)]

        UI <--> ZUSTAND
        ZUSTAND --> LS
    end

    subgraph Server["Next.js Server (Vercel)"]
        API[API Routes]
        RENDER[React Email<br/>Renderer]

        API --> RENDER
    end

    subgraph External["External Services"]
        RESEND[Resend API]
        RESEND_T[Resend Templates]
        RESEND_A[Resend Audiences]
    end

    UI -->|HTTP Requests| API
    API -->|Send Email| RESEND
    API -->|Manage Templates| RESEND_T
    API -->|Sync Contacts| RESEND_A

    RESEND -->|Delivery Status| API
    RESEND_T -->|Template Data| API
    RESEND_A -->|Contact Data| API

    style UI fill:#DC2626,color:#fff
    style ZUSTAND fill:#7C3AED,color:#fff
    style LS fill:#FEF3C7
    style API fill:#16A34A,color:#fff
    style RENDER fill:#F59E0B,color:#fff
    style RESEND fill:#000,color:#fff
    style RESEND_T fill:#000,color:#fff
    style RESEND_A fill:#000,color:#fff

graph TD
    HOME["/\nDashboard"] --> TEMPLATES["/templates\nTemplate Library"]
    HOME --> CONTACTS["/contacts\nContact Manager"]
    HOME --> SEND["/send\nSending Wizard"]
    HOME --> SETTINGS["/settings\nConfiguration"]

    TEMPLATES --> EDITOR["/templates/[id]/edit\nVisual Editor"]
    TEMPLATES --> RESEND_T["/templates/resend\nResend Templates"]

    style HOME fill:#DC2626,color:#fff
    style TEMPLATES fill:#16A34A,color:#fff
    style CONTACTS fill:#F59E0B,color:#fff
    style SEND fill:#7C3AED,color:#fff
    style SETTINGS fill:#3B82F6,color:#fff
    style EDITOR fill:#EC4899,color:#fff
    style RESEND_T fill:#000,color:#fff

sequenceDiagram
    participant User
    participant Browser
    participant API as Next.js API
    participant Resend as Resend API

    User->>Browser: Configure Settings
    Browser->>Browser: Save to LocalStorage

    User->>Browser: Create/Edit Template
    Browser->>Browser: Save to LocalStorage

    User->>Browser: Start Send Wizard
    Browser->>Browser: Select Template & Recipients

    loop For Each Recipient
        Browser->>API: POST /api/preview
        Note right of API: Replace variables<br/>{{recipientName}}, etc.
        API-->>Browser: Personalized HTML

        Browser->>API: POST /api/send
        API->>Resend: Send via Resend
        Resend-->>API: {id, success}
        API-->>Browser: Response

        Browser->>Browser: Update Progress
    end

    Browser-->>User: Show Results Summary

graph TB
    subgraph Zustand["Zustand Store"]
        THEME[Theme State]
        BLOCKS[Blocks State]
        HISTORY[History Stack]
    end

    subgraph LocalStorage
        TEMPLATES[(Templates)]
        CONTACTS[(Contacts)]
        SETTINGS[(Settings)]
        ONBOARDING[(Onboarding)]
    end

    subgraph Components
        EDITOR_UI[Editor UI]
        SIDEBAR_UI[Sidebar]
        PREVIEW_UI[Preview Panel]
    end

    Components --> Zustand
    Zustand --> LocalStorage

    style THEME fill:#7C3AED,color:#fff
    style BLOCKS fill:#7C3AED,color:#fff
    style HISTORY fill:#7C3AED,color:#fff

graph TB
    subgraph Blocks["7 Block Types"]
        HEADER[Header<br/>Title + Subtitle + Icons]
        TEXT[Text<br/>Content + Alignment + Highlight]
        IMAGE[Image<br/>URL + Caption + Border]
        BUTTON[Button<br/>Text + URL + Style]
        WISHES[Wishes<br/>Title + Item List]
        DIVIDER[Divider<br/>Line/Icons/Spacer]
        FOOTER[Footer<br/>Sender + LinkedIn + Message]
    end

    style HEADER fill:#DC2626,color:#fff
    style TEXT fill:#16A34A,color:#fff
    style IMAGE fill:#F59E0B,color:#fff
    style BUTTON fill:#7C3AED,color:#fff
    style WISHES fill:#3B82F6,color:#fff
    style DIVIDER fill:#EC4899,color:#fff
    style FOOTER fill:#000,color:#fff

graph LR
    subgraph Colors["Color System"]
        PRIMARY[Primary<br/>#DC2626]
        SECONDARY[Secondary<br/>#16A34A]
        ACCENT[Accent<br/>#F59E0B]
    end

    subgraph Variants["Color Variants"]
        DARK[Dark Variant]
        LIGHT[Light Variant]
    end

    PRIMARY --> DARK
    PRIMARY --> LIGHT
    SECONDARY --> DARK
    SECONDARY --> LIGHT
    ACCENT --> LIGHT

    style PRIMARY fill:#DC2626,color:#fff
    style SECONDARY fill:#16A34A,color:#fff
    style ACCENT fill:#F59E0B,color:#fff

graph TB
    subgraph Principles["Neobrutalism Characteristics"]
        BORDER[Bold Borders<br/>4px solid black]
        SHADOW[Hard Shadows<br/>8px offset, no blur]
        COLOR[Vibrant Colors<br/>Primary, Secondary, Accent]
        TYPE[Bold Typography<br/>High contrast]
    end

    style BORDER fill:#000,color:#fff
    style SHADOW fill:#333,color:#fff
    style COLOR fill:#DC2626,color:#fff
    style TYPE fill:#16A34A,color:#fff