// @bun
// src/components/docs/integrations/IntegrationsTwilioPage.tsx
import Link from "@contractspec/lib.ui-link";
import { jsx, jsxs } from "react/jsx-runtime";
function IntegrationsTwilioPage() {
  return /* @__PURE__ */ jsxs("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h1", {
            className: "text-4xl font-bold",
            children: "Twilio"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Send SMS notifications, alerts, and two-factor authentication codes using Twilio's reliable messaging platform."
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Setup"
          }),
          /* @__PURE__ */ jsx("div", {
            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
            children: /* @__PURE__ */ jsx("pre", {
              children: `# .env
TWILIO_ACCOUNT_SID=...
TWILIO_AUTH_TOKEN=...
TWILIO_PHONE_NUMBER=+1234567890`
            })
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Sending SMS"
          }),
          /* @__PURE__ */ jsx("div", {
            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
            children: /* @__PURE__ */ jsx("pre", {
              children: `capabilityId: twilio-send-sms
provider:
  type: twilio
  operation: sendSMS

inputs:
  to:
    type: string
    description: "Phone number in E.164 format"
  body:
    type: string
    description: "Message content (max 1600 chars)"

outputs:
  messageSid:
    type: string
  status:
    type: string`
            })
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Use cases"
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground list-inside list-disc space-y-2",
            children: [
              /* @__PURE__ */ jsx("li", {
                children: "Order confirmations and shipping updates"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Two-factor authentication codes"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Appointment reminders"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Alert notifications"
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Best practices"
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground list-inside list-disc space-y-2",
            children: [
              /* @__PURE__ */ jsx("li", {
                children: "Always use E.164 format for phone numbers (+1234567890)"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Keep messages under 160 characters to avoid splitting"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Implement rate limiting to prevent spam"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Handle delivery failures gracefully"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Respect opt-out requests"
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/integrations/s3",
            className: "btn-ghost",
            children: "Previous: S3 Storage"
          }),
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/integrations/slack",
            className: "btn-primary",
            children: "Next: Slack Messaging"
          })
        ]
      })
    ]
  });
}
export {
  IntegrationsTwilioPage
};
