import * as React from "react";
import { EmailLayout } from "../components/email-layout";
import { EmailHeader } from "../components/email-header";
import { EmailFooter } from "../components/email-footer";
import { EmailButton } from "../components/email-button";
import { emailTokens, getEmailBaseUrl } from "../tokens";

export interface NewsletterWelcomeEmailProps {
  email: string;
}

export function NewsletterWelcomeEmail({ email: _email }: NewsletterWelcomeEmailProps) {
  const baseUrl = getEmailBaseUrl();

  return (
    <EmailLayout previewText="Welcome to Quto AI Insights">
      <EmailHeader badge="Welcome" />

      <h1
        style={{
          fontFamily: emailTokens.fonts.display,
          fontSize: "24px",
          fontWeight: 700,
          color: emailTokens.colors.textPrimary,
          margin: "0 0 12px",
          lineHeight: "1.25",
          letterSpacing: "-0.5px",
        }}
      >
        Welcome to Quto AI Insights
      </h1>

      <p
        style={{
          fontSize: "14.5px",
          color: emailTokens.colors.textSecondary,
          margin: "0 0 16px",
          lineHeight: "1.6",
        }}
      >
        You&apos;re now subscribed to updates from Quto AI. We share concise, high-signal technical
        analysis on:
      </p>

      <ul
        style={{
          fontSize: "14px",
          color: emailTokens.colors.textSecondary,
          lineHeight: "1.6",
          paddingLeft: "20px",
          margin: "0 0 20px",
        }}
      >
        <li style={{ marginBottom: "6px" }}>Sub-350ms turn-around latency in voice AI systems</li>
        <li style={{ marginBottom: "6px" }}>Acoustic models tuned for Indian regional phonetics & ambient noise</li>
        <li style={{ marginBottom: "6px" }}>Enterprise SIP trunking & zero raw audio retention security</li>
      </ul>

      <p
        style={{
          fontSize: "13px",
          color: emailTokens.colors.textMuted,
          margin: "0 0 16px",
          lineHeight: "1.5",
        }}
      >
        We send occasional updates only when we have meaningful benchmarks or architectural blueprints to share — no marketing spam.
      </p>

      <EmailButton href={`${baseUrl}/blog`}>
        Read Latest Engineering Guides
      </EmailButton>

      <EmailFooter />
    </EmailLayout>
  );
}