berrypod/lib/berrypod_web/components/shop_components/content.ex

defmodule BerrypodWeb.ShopComponents.Content do
  @moduledoc false

  use Phoenix.Component

  import BerrypodWeb.CoreComponents, only: [external_link: 1]
  import BerrypodWeb.ShopComponents.Base

  @default_social_links [
    %{platform: :instagram, url: "https://instagram.com", label: "Instagram"},
    %{platform: :bluesky, url: "https://bsky.app", label: "Bluesky"},
    %{platform: :mastodon, url: "https://mastodon.social", label: "Mastodon"},
    %{platform: :kofi, url: "https://ko-fi.com", label: "Ko-fi"},
    %{platform: :github, url: "https://github.com", label: "GitHub"}
  ]

  @doc """
  Renders a content body container for long-form content pages (about, etc.).

  ## Attributes

  * `image_src` - Optional. Base path to image (without size/extension), used with responsive_image.
  * `image_alt` - Optional. Alt text for the image. Defaults to "Page image".

  ## Slots

  * `inner_block` - Required. The content to render.

  ## Examples

      <.content_body image_src="/mockups/night-sky-blanket-3" image_alt="A cosy blanket">
        <p>Content here...</p>
      </.content_body>
  """
  attr :image_src, :string, default: nil
  attr :image_alt, :string, default: "Page image"

  slot :inner_block, required: true

  def content_body(assigns) do
    ~H"""
    <div class="content-body">
      <%= if @image_src do %>
        <div class="content-image about-image">
          <.responsive_image
            src={@image_src}
            source_width={1200}
            alt={@image_alt}
            sizes="(max-width: 800px) 100vw, 800px"
            class="content-hero-image"
          />
        </div>
      <% end %>

      <div class="content-text">
        {render_slot(@inner_block)}
      </div>
    </div>
    """
  end

  @doc """
  Renders a contact form card.

  ## Attributes

  * `title` - Optional. Form heading. Defaults to "Send a message".
  * `email` - Optional. If provided, displays "Email me: [email]" below the title.

  ## Examples

      <.contact_form />
      <.contact_form title="Get in touch" />
      <.contact_form email="hello@example.com" />
  """
  attr :title, :string, default: "Send a message"
  attr :email, :string, default: nil
  attr :response_time, :string, default: nil

  def contact_form(assigns) do
    ~H"""
    <.shop_card class="contact-form-card">
      <h2 class="contact-form-heading">
        {@title}
      </h2>
      <%= if @email || @response_time do %>
        <div class="contact-form-meta">
          <%= if @email do %>
            <p>
              Email me:
              <a href={"mailto:#{@email}"} class="accent-email">
                {@email}
              </a>
            </p>
          <% end %>
          <%= if @response_time do %>
            <p>{@response_time}</p>
          <% end %>
        </div>
      <% else %>
        <div class="contact-form-spacer"></div>
      <% end %>

      <form action="/contact/send" method="post" phx-submit="send_contact" class="contact-form">
        <input type="hidden" name="_csrf_token" value={Phoenix.Controller.get_csrf_token()} />

        <div>
          <label class="contact-form-label">Name</label>
          <.shop_input type="text" name="name" placeholder="Your name" required />
        </div>

        <div>
          <label class="contact-form-label">Email</label>
          <.shop_input type="email" name="email" placeholder="your@email.com" required />
        </div>

        <div>
          <label class="contact-form-label">Subject</label>
          <.shop_input type="text" name="subject" placeholder="How can I help?" />
        </div>

        <div>
          <label class="contact-form-label">Message</label>
          <.shop_textarea name="message" rows="5" placeholder="Your message..." required />
        </div>

        <.shop_button type="submit" class="contact-form-submit">
          Send message
        </.shop_button>
      </form>
    </.shop_card>
    """
  end

  @doc """
  Renders the order tracking card.

  Submits `lookup_orders` to the parent LiveView. The `:sent` state shows a
  confirmation message; `:not_found` shows the form again with an error note.

  ## Attributes

  * `tracking_state` - Optional. `:idle | :sent | :not_found`. Defaults to `:idle`.

  ## Examples

      <.order_tracking_card />
      <.order_tracking_card tracking_state={@tracking_state} />
  """
  attr :tracking_state, :atom, default: :idle

  def order_tracking_card(%{tracking_state: :sent} = assigns) do
    ~H"""
    <.shop_card class="card-section">
      <h3 class="card-heading">Check your inbox</h3>
      <p class="card-text card-text--spaced">
        We've sent a link to your email address. It'll expire after an hour.
      </p>
      <button phx-click="reset_tracking" class="order-tracking-reset">
        Try a different email
      </button>
    </.shop_card>
    """
  end

  def order_tracking_card(%{tracking_state: :not_found} = assigns) do
    ~H"""
    <.shop_card class="card-section">
      <h3 class="card-heading">Track your order</h3>
      <p class="card-text card-text--spaced">
        No orders found for that address. Make sure you use the same email you checked out with.
      </p>
      <form action="/contact/lookup" method="post" phx-submit="lookup_orders" class="card-inline-form">
        <input type="hidden" name="_csrf_token" value={Phoenix.Controller.get_csrf_token()} />
        <.shop_input
          type="email"
          name="email"
          placeholder="your@email.com"
          class="email-input"
          required
        />
        <.shop_button type="submit">Try again</.shop_button>
      </form>
    </.shop_card>
    """
  end

  def order_tracking_card(assigns) do
    ~H"""
    <.shop_card class="card-section">
      <h3 class="card-heading">Track your order</h3>
      <p class="card-text card-text--spaced">
        Enter the email address you used at checkout and we'll send you a link.
      </p>
      <form action="/contact/lookup" method="post" phx-submit="lookup_orders" class="card-inline-form">
        <input type="hidden" name="_csrf_token" value={Phoenix.Controller.get_csrf_token()} />
        <.shop_input
          type="email"
          name="email"
          placeholder="your@email.com"
          class="email-input"
          required
        />
        <.shop_button type="submit">Send link</.shop_button>
      </form>
    </.shop_card>
    """
  end

  @doc """
  Renders the info card with bullet points (e.g., "Handy to know" section).

  ## Attributes

  * `title` - Required. Card heading.
  * `items` - Required. List of maps with `label` and `value` keys.

  ## Examples

      <.info_card title="Handy to know" items={[
        %{label: "Printing", value: "2-5 business days"},
        %{label: "Delivery", value: "3-7 business days after printing"}
      ]} />
  """
  attr :title, :string, required: true
  attr :items, :list, required: true

  def info_card(assigns) do
    ~H"""
    <.shop_card class="card-section">
      <h3 class="card-heading">{@title}</h3>
      <ul class="info-card-list">
        <%= for item <- @items do %>
          <li class="info-card-item">
            <span class="info-card-bullet">•</span>
            <span>
              <strong class="info-card-label">{item.label}:</strong> {item.value}
            </span>
          </li>
        <% end %>
      </ul>
    </.shop_card>
    """
  end

  @doc """
  Renders the contact info card with email link.

  ## Attributes

  * `title` - Optional. Card heading. Defaults to "Get in touch".
  * `email` - Required. Email address.
  * `response_text` - Optional. Response time text. Defaults to "We typically respond within 24 hours".

  ## Examples

      <.contact_info_card email="hello@example.com" />
  """
  attr :title, :string, default: "Get in touch"
  attr :email, :string, required: true
  attr :response_text, :string, default: "We typically respond within 24 hours"

  def contact_info_card(assigns) do
    ~H"""
    <.shop_card class="card-section">
      <h3 class="card-heading">{@title}</h3>
      <a href={"mailto:#{@email}"} class="contact-info-email">
        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
          />
        </svg>
        {@email}
      </a>
      <p class="card-text">
        {@response_text}
      </p>
    </.shop_card>
    """
  end

  @doc """
  Renders a newsletter signup card.

  ## Attributes

  * `title` - Optional. Card heading. Defaults to "Newsletter".
  * `description` - Optional. Card description.
  * `button_text` - Optional. Button text. Defaults to "Subscribe".
  * `variant` - Optional. Either `:card` (default, with border/background) or `:inline` (no card styling, for embedding in footer).
  * `newsletter_state` - Optional. `:idle | :submitted | :error | :disabled`. Defaults to `:idle`.
  * `newsletter_enabled` - Optional. Whether signups are active. Defaults to `true`.

  ## Examples

      <.newsletter_card />
      <.newsletter_card title="Studio news" description="Get updates on new products." />
      <.newsletter_card variant={:inline} newsletter_state={@newsletter_state} />
  """
  attr :title, :string, default: "Newsletter"

  attr :description, :string,
    default: "Sample newsletter signup. Replace with your own message to encourage subscribers."

  attr :button_text, :string, default: "Subscribe"
  attr :variant, :atom, default: :card
  attr :newsletter_state, :atom, default: :idle
  attr :newsletter_enabled, :boolean, default: true

  def newsletter_card(%{newsletter_state: :submitted, variant: :inline} = assigns) do
    ~H"""
    <div>
      <h3 class="newsletter-heading">{@title}</h3>
      <p class="card-text card-text--spaced">
        Check your inbox to confirm your subscription.
      </p>
    </div>
    """
  end

  def newsletter_card(%{newsletter_state: :submitted} = assigns) do
    ~H"""
    <.shop_card class="card-section">
      <h3 class="card-heading">{@title}</h3>
      <p class="card-text card-text--spaced">
        Check your inbox to confirm your subscription.
      </p>
    </.shop_card>
    """
  end

  def newsletter_card(%{variant: :inline} = assigns) do
    ~H"""
    <div>
      <h3 class="newsletter-heading">
        {@title}
      </h3>
      <p class="card-text card-text--spaced">
        {@description}
      </p>
      <%= if @newsletter_enabled do %>
        <form
          action="/newsletter/subscribe"
          method="post"
          phx-submit="newsletter_subscribe"
          class="card-inline-form"
        >
          <input type="hidden" name="_csrf_token" value={Phoenix.Controller.get_csrf_token()} />
          <.shop_input
            type="email"
            name="email"
            placeholder="your@email.com"
            class="email-input"
            required
          />
          <.shop_button type="submit">{@button_text}</.shop_button>
        </form>
        <p :if={@newsletter_state == :error} class="card-text newsletter-error">
          Something went wrong. Please try again.
        </p>
      <% end %>
    </div>
    """
  end

  def newsletter_card(assigns) do
    ~H"""
    <.shop_card class="card-section">
      <h3 class="card-heading">{@title}</h3>
      <p class="card-text card-text--spaced">
        {@description}
      </p>
      <%= if @newsletter_enabled do %>
        <form
          action="/newsletter/subscribe"
          method="post"
          phx-submit="newsletter_subscribe"
          class="card-inline-form"
        >
          <input type="hidden" name="_csrf_token" value={Phoenix.Controller.get_csrf_token()} />
          <.shop_input
            type="email"
            name="email"
            placeholder="your@email.com"
            class="email-input"
            required
          />
          <.shop_button type="submit">{@button_text}</.shop_button>
        </form>
        <p :if={@newsletter_state == :error} class="card-text newsletter-error">
          Something went wrong. Please try again.
        </p>
      <% end %>
    </.shop_card>
    """
  end

  @doc """
  Renders social media links in a single card with a compact grid layout.

  ## Attributes

  * `title` - Optional. Card heading. Defaults to "Follow us".
  * `links` - Optional. List of maps with `platform`, `url`, and `label` keys.
    Supported platforms: :instagram, :pinterest, :facebook, :twitter, :tiktok, :patreon, :youtube

  ## Examples

      <.social_links_card />
      <.social_links_card title="Elsewhere" links={[%{platform: :instagram, url: "https://instagram.com/example", label: "Instagram"}]} />
  """
  attr :title, :string, default: "Find me on"

  attr :links, :list, default: @default_social_links

  def social_links_card(assigns) do
    ~H"""
    <.shop_card class="card-section">
      <h3 class="card-heading">{@title}</h3>
      <div class="social-link-card-list">
        <%= for link <- @links do %>
          <.external_link
            href={link.url}
            icon={false}
            class="social-link-card-item themed-button-outline"
          >
            <span class="social-link-card-icon">
              <.social_icon platform={link.platform} />
            </span>
            <span>{link.label}</span>
          </.external_link>
        <% end %>
      </div>
    </.shop_card>
    """
  end

  @doc """
  Renders social media icon links.

  ## Attributes

  * `links` - Optional. List of maps with `platform`, `url`, and `label` keys.
    Supported platforms: :instagram, :pinterest

  ## Examples

      <.social_links />
      <.social_links links={[%{platform: :instagram, url: "https://instagram.com/example", label: "Instagram"}]} />
  """
  attr :links, :list, default: @default_social_links

  def social_links(assigns) do
    ~H"""
    <div class="social-links">
      <%= for link <- @links do %>
        <.external_link
          href={link.url}
          icon={false}
          class="social-link"
          aria-label={link.label}
        >
          <.social_icon platform={link.platform} />
        </.external_link>
      <% end %>
    </div>
    """
  end

  # Renders a social media icon for the given platform.
  #
  # All icons are from Simple Icons (simpleicons.org), MIT licensed.
  #
  # ## Supported platforms
  #
  # **Commercial/Creative:**
  # :instagram, :pinterest, :tiktok, :facebook, :twitter, :youtube, :patreon, :kofi, :etsy, :gumroad, :bandcamp
  #
  # **Open Web/Federated:**
  # :mastodon, :pixelfed, :bluesky, :peertube, :lemmy, :matrix
  #
  # **Developer/Hacker:**
  # :github, :gitlab, :codeberg, :sourcehut
  #
  # **Communication:**
  # :discord, :telegram, :signal
  #
  # **Other:**
  # :substack, :rss, :website
  attr :platform, :atom, required: true

  # Commercial/Creative platforms
  defp social_icon(%{platform: :instagram} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077" />
    </svg>
    """
  end

  defp social_icon(%{platform: :pinterest} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :tiktok} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :facebook} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :twitter} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :youtube} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :patreon} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M15.386.524c-4.764 0-8.64 3.876-8.64 8.64 0 4.75 3.876 8.613 8.64 8.613 4.75 0 8.614-3.864 8.614-8.613C24 4.4 20.136.524 15.386.524M.003 23.537h4.22V.524H.003" />
    </svg>
    """
  end

  defp social_icon(%{platform: :kofi} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :etsy} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M8.559 1.067c0-.263.128-.435.349-.442 1.074-.034 2.15-.066 3.225-.1.058-.002.22-.012.282.099.014.026.026.061.026.12 0 0 .006 2.548.006 3.85 0 .163.147.28.322.28h4.64c.239 0 .505.209.505.447 0 0-.002.818-.005 1.76-.003.88-.064 1.668-.064 1.668-.025.235-.229.418-.462.418h-4.551c-.244 0-.383.155-.383.398v8.34c0 2.1 1.32 2.581 2.429 2.581.867 0 2.028-.323 2.428-.521.112-.056.251-.06.315.053.024.043.05.089.074.144.305.697.628 1.391.929 2.088.073.163.038.335-.143.454-1.008.665-2.691 1.229-4.577 1.229-2.606 0-5.811-1.032-5.811-6.049V9.692c0-.266-.137-.394-.36-.394H5.62c-.227 0-.372-.14-.372-.37V7.321c0-.175.067-.285.23-.391 2.23-1.441 2.992-4.102 3.08-5.6.006-.099.001-.198.001-.263z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :gumroad} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm4.152 16.053c-.752.822-1.882 1.37-3.449 1.37-3.071 0-5.3-2.037-5.3-5.442 0-3.238 2.062-5.47 5.135-5.47 1.498 0 2.598.465 3.378 1.198l-.978 1.483c-.588-.466-1.206-.74-2.14-.74-1.935 0-3.058 1.418-3.058 3.475 0 2.119 1.205 3.502 3.14 3.502.85 0 1.578-.3 2.004-.63v-1.507h-2.309v-1.835h4.576v4.596z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :bandcamp} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M0 18.75l7.437-13.5H24l-7.438 13.5H0z" />
    </svg>
    """
  end

  # Open Web/Federated platforms
  defp social_icon(%{platform: :mastodon} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :pixelfed} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zm5.696 14.943c-.156 1.015-.776 1.885-1.681 2.351-.598.307-1.263.44-1.967.44H8.34c-.63 0-1.235-.123-1.79-.368-.588-.26-1.105-.63-1.536-1.1a4.347 4.347 0 0 1-.953-1.6c-.189-.588-.26-1.207-.199-1.855.093-.996.497-1.855 1.199-2.569.732-.746 1.623-1.19 2.66-1.33.147-.02.298-.033.445-.045h5.682c.88.08 1.651.39 2.312.953.729.62 1.182 1.392 1.354 2.321a4.09 4.09 0 0 1-.018 1.802zM12.186 9.592H9.109c-.517.054-.976.238-1.373.553-.57.452-.907 1.034-.997 1.737-.059.465.003.91.196 1.33.258.564.66.992 1.21 1.275.383.196.795.283 1.235.26h3.108c.518-.054.977-.238 1.374-.553.57-.452.907-1.033.996-1.737.06-.465-.002-.91-.196-1.33a2.345 2.345 0 0 0-1.209-1.274 2.48 2.48 0 0 0-1.267-.261z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :bluesky} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :peertube} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 0 1.608 6v12L12 24l10.392-6V6zm-1.476 2.94 8.64 4.98v2.401L9.6 4.86l.924-1.92zm-1.848 3.839 8.64 4.98v2.4l-8.64-4.98V6.78zm0 4.078 8.64 4.98v2.401l-8.64-4.98v-2.401z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :lemmy} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zm-.5 4.5a2.5 2.5 0 0 1 1 4.793V15.5a.5.5 0 0 1-1 0V9.293A2.5 2.5 0 0 1 11.5 4.5zm-5 7a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm10 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :matrix} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.33-.439.573-.121.245-.18.56-.18.946v5.058H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z" />
    </svg>
    """
  end

  # Developer/Hacker platforms
  defp social_icon(%{platform: :github} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
    </svg>
    """
  end

  defp social_icon(%{platform: :gitlab} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="m23.6 9.593-.033-.086L20.3.98a.851.851 0 0 0-.336-.405.874.874 0 0 0-.994.066.873.873 0 0 0-.29.441L16.47 7.674H7.53L5.32 1.082a.857.857 0 0 0-.29-.441.874.874 0 0 0-.994-.067.852.852 0 0 0-.336.406L.433 9.507.4 9.593a6.062 6.062 0 0 0 2.012 7.01l.01.008.028.02 4.984 3.73 2.466 1.865 1.502 1.135a1.009 1.009 0 0 0 1.22 0l1.502-1.135 2.466-1.866 5.012-3.75.013-.01a6.063 6.063 0 0 0 2.005-7.007z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :codeberg} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.187 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467 4.416 16.553a12 12 0 0 0 5.137-4.213z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :sourcehut} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 0C5.371 0 0 5.371 0 12s5.371 12 12 12 12-5.371 12-12S18.629 0 12 0zm0 21.677c-5.335 0-9.677-4.342-9.677-9.677S6.665 2.323 12 2.323 21.677 6.665 21.677 12 17.335 21.677 12 21.677z" />
    </svg>
    """
  end

  # Communication platforms
  defp social_icon(%{platform: :discord} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :telegram} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :signal} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M9.237 1.805a9.72 9.72 0 0 1 5.527 0l.558-1.343A11.14 11.14 0 0 0 8.678.462l.559 1.343Zm-3.91 1.95A9.678 9.678 0 0 0 1.805 9.24l1.448.295a8.261 8.261 0 0 1 3.003-4.672l-.93-1.108Zm13.346 0-.929 1.108a8.261 8.261 0 0 1 3.003 4.672l1.449-.295a9.678 9.678 0 0 0-3.523-5.485ZM1.463 10.723A9.81 9.81 0 0 0 1.5 12c0 .893.12 1.758.344 2.58l1.41-.393A8.315 8.315 0 0 1 3 12c0-.373.024-.742.073-1.104l-1.61-.173Zm20.59 1.104.073 1.104c0 .373-.024.742-.073 1.104l1.61.173a9.81 9.81 0 0 0-.037-2.381h-1.573Zm-19.699 4.43a9.723 9.723 0 0 0 2.973 4.047l.929-1.108a8.222 8.222 0 0 1-2.513-3.42l-1.39.48Zm17.291 0-1.389-.48a8.221 8.221 0 0 1-2.513 3.42l.929 1.108a9.723 9.723 0 0 0 2.973-4.048Zm-13.17 5.052a9.72 9.72 0 0 0 5.526 0l-.559-1.343a8.262 8.262 0 0 1-4.41 0l-.558 1.343ZM12 4.2a7.8 7.8 0 1 0 0 15.6 7.8 7.8 0 0 0 0-15.6ZM2.7 12a9.3 9.3 0 1 1 18.6 0 9.3 9.3 0 0 1-18.6 0Z" />
    </svg>
    """
  end

  # Other platforms
  defp social_icon(%{platform: :substack} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :rss} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415a3.3 3.3 0 0 1 3.293 3.295A3.303 3.303 0 0 1 3.283 24C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :website} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-.5 2.047A10.003 10.003 0 0 1 21.95 11.5h-4.4a15.93 15.93 0 0 0-1.55-6.33 10.05 10.05 0 0 1 1.45-.93A9.933 9.933 0 0 0 11.5 2.047zm-.5 0v4.4c-1.55-.09-3.03-.4-4.4-.93a15.93 15.93 0 0 1 4.4-3.47zm0 5.4v4.06H6.44c.08-1.47.33-2.87.73-4.17a16.93 16.93 0 0 0 4.33.91v-.8zm1 0v.8c1.5-.08 2.96-.39 4.33-.91.4 1.3.65 2.7.73 4.17H12.5V7.447zM11 12.5H6.44c.08 1.47.33 2.87.73 4.17a16.93 16.93 0 0 0 4.33-.91V12.5h-.5zm1 0v3.26c1.5.08 2.96.39 4.33.91.4-1.3.65-2.7.73-4.17H12.5H12zm-1 4.25c-1.55.09-3.03.4-4.4.93a15.93 15.93 0 0 1 4.4 3.47v-4.4zm1 0v4.4a15.93 15.93 0 0 1 4.4-3.47c-1.37-.53-2.85-.84-4.4-.93z" />
    </svg>
    """
  end

  # Additional social platforms
  defp social_icon(%{platform: :linkedin} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :threads} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :whatsapp} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :twitch} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :spotify} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :soundcloud} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M1.175 12.225c-.051 0-.094.046-.101.1l-.233 2.154.233 2.105c.007.058.05.098.101.098.05 0 .09-.04.099-.098l.255-2.105-.27-2.154c0-.057-.045-.1-.09-.1m-.899.828c-.06 0-.091.037-.104.094L0 14.479l.165 1.308c0 .055.045.094.09.094s.089-.045.104-.104l.21-1.319-.21-1.334c0-.061-.044-.09-.09-.09m1.83-1.229c-.061 0-.12.045-.12.104l-.21 2.563.225 2.458c0 .06.045.12.119.12.061 0 .105-.061.121-.12l.254-2.474-.254-2.548c-.016-.06-.061-.12-.121-.12m.945-.089c-.075 0-.135.06-.15.135l-.193 2.64.21 2.544c.016.077.075.138.149.138.075 0 .135-.061.15-.15l.24-2.532-.24-2.623c0-.075-.06-.135-.135-.135l-.031-.017zm1.155.36c-.005-.09-.075-.149-.159-.149-.09 0-.158.06-.164.149l-.217 2.43.2 2.563c0 .09.075.157.159.157.074 0 .148-.068.148-.158l.227-2.563-.227-2.444.033.015zm.809-1.709c-.101 0-.18.09-.18.181l-.21 3.957.187 2.563c0 .09.08.164.18.164.094 0 .174-.09.18-.18l.209-2.563-.209-3.972c-.008-.104-.088-.18-.18-.18m.959-.914c-.105 0-.195.09-.203.194l-.18 4.872.165 2.548c0 .12.09.209.195.209.104 0 .194-.089.21-.209l.193-2.548-.192-4.856c-.016-.12-.105-.21-.21-.21m.989-.449c-.121 0-.211.089-.225.209l-.165 5.275.165 2.52c.014.119.104.225.225.225.119 0 .225-.105.225-.225l.195-2.52-.196-5.275c0-.12-.105-.225-.225-.225m1.245.045c0-.135-.105-.24-.24-.24-.119 0-.24.105-.24.24l-.149 5.441.149 2.503c.016.135.121.24.256.24s.24-.105.24-.24l.164-2.503-.164-5.456-.016.015zm.749-.134c-.135 0-.255.119-.255.254l-.15 5.322.15 2.473c0 .15.12.255.255.255s.255-.12.255-.27l.15-2.474-.165-5.307c0-.148-.12-.27-.271-.27m1.005.166c-.164 0-.284.135-.284.285l-.103 5.143.135 2.474c0 .149.119.277.284.277.149 0 .271-.12.284-.285l.121-2.443-.135-5.112c-.012-.164-.135-.285-.285-.285m1.184-.945c-.045-.029-.105-.044-.165-.044s-.119.015-.165.044c-.09.054-.149.15-.149.255v.061l-.104 6.048.115 2.449v.008c.008.06.03.135.074.18.058.061.142.104.234.104.08 0 .158-.044.209-.09.058-.06.091-.135.091-.225l.015-.24.117-2.203-.135-6.086c0-.104-.061-.193-.135-.239l-.002-.022zm1.006-.547c-.045-.045-.09-.061-.15-.061-.074 0-.149.016-.209.061-.075.061-.119.15-.119.24v.029l-.137 6.609.076 1.215.061 1.185c0 .164.148.314.328.314.181 0 .33-.15.33-.329l.15-2.414-.15-6.637c0-.12-.074-.221-.165-.277m8.934 3.777c-.405 0-.795.086-1.139.232-.24-2.654-2.46-4.736-5.188-4.736-.659 0-1.305.135-1.889.359-.225.09-.27.18-.285.359v9.368c.016.18.15.33.33.345h8.185C22.681 17.218 24 15.914 24 14.28s-1.319-2.952-2.938-2.952" />
    </svg>
    """
  end

  defp social_icon(%{platform: :vimeo} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M23.9765 6.4168c-.105 2.338-1.739 5.5429-4.894 9.6088-3.2679 4.247-6.0258 6.3699-8.2898 6.3699-1.409 0-2.578-1.294-3.553-3.881l-1.9179-7.1138c-.719-2.584-1.488-3.878-2.312-3.878-.179 0-.806.378-1.8809 1.132l-1.129-1.457a315.06 315.06 0 003.501-3.1279c1.579-1.368 2.765-2.085 3.5539-2.159 1.867-.18 3.016 1.1 3.447 3.838.465 2.953.789 4.789.971 5.5069.5389 2.45 1.1309 3.674 1.7759 3.674.502 0 1.256-.796 2.265-2.385 1.004-1.589 1.54-2.797 1.612-3.628.144-1.371-.395-2.061-1.614-2.061-.574 0-1.167.121-1.777.391 1.186-3.8679 3.434-5.7568 6.7619-5.6368 2.4729.06 3.6279 1.664 3.4929 4.7969z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :behance} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M16.969 16.927a2.561 2.561 0 0 0 1.901.677 2.501 2.501 0 0 0 1.531-.475c.362-.235.636-.584.779-.99h2.585a5.091 5.091 0 0 1-1.9 2.896 5.292 5.292 0 0 1-3.091.88 5.839 5.839 0 0 1-2.284-.433 4.871 4.871 0 0 1-1.723-1.211 5.657 5.657 0 0 1-1.08-1.874 7.057 7.057 0 0 1-.383-2.393c-.005-.8.129-1.595.396-2.349a5.313 5.313 0 0 1 5.088-3.604 4.87 4.87 0 0 1 2.376.563c.661.362 1.231.87 1.668 1.485a6.2 6.2 0 0 1 .943 2.133c.194.821.263 1.666.205 2.508h-7.699c-.063.79.184 1.574.688 2.187ZM6.947 4.084a8.065 8.065 0 0 1 1.928.198 4.29 4.29 0 0 1 1.49.638c.418.303.748.711.958 1.182.241.579.357 1.203.341 1.83a3.506 3.506 0 0 1-.506 1.961 3.726 3.726 0 0 1-1.503 1.287 3.588 3.588 0 0 1 2.027 1.437c.464.747.697 1.615.67 2.494a4.593 4.593 0 0 1-.423 2.032 3.945 3.945 0 0 1-1.163 1.413 5.114 5.114 0 0 1-1.683.807 7.135 7.135 0 0 1-1.928.259H0V4.084h6.947Zm-.235 12.9c.308.004.616-.029.916-.099a2.18 2.18 0 0 0 .766-.332c.228-.158.411-.371.534-.619.142-.317.208-.663.191-1.009a2.08 2.08 0 0 0-.642-1.715 2.618 2.618 0 0 0-1.696-.505h-3.54v4.279h3.471Zm13.635-5.967a2.13 2.13 0 0 0-1.654-.619 2.336 2.336 0 0 0-1.163.259 2.474 2.474 0 0 0-.738.62 2.359 2.359 0 0 0-.396.792c-.074.239-.12.485-.137.734h4.769a3.239 3.239 0 0 0-.679-1.785l-.002-.001Zm-13.813-.648a2.254 2.254 0 0 0 1.423-.433c.399-.355.607-.88.56-1.413a1.916 1.916 0 0 0-.178-.891 1.298 1.298 0 0 0-.495-.533 1.851 1.851 0 0 0-.711-.274 3.966 3.966 0 0 0-.835-.073H3.241v3.631h3.293v-.014ZM21.62 5.122h-5.976v1.527h5.976V5.122Z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :dribbble} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308 2.3-1.555 3.936-4.02 4.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4 1.73 1.358 3.92 2.166 6.29 2.166 1.42 0 2.77-.29 4-.814zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248-1.698-3.018-3.53-5.558-3.8-5.928-2.868 1.35-5.01 3.99-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6 3.645-1.365 5.19-3.44 5.373-3.702-1.81-1.61-4.19-2.586-6.795-2.586-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04.24.49.47.985.68 1.486.08.18.15.36.22.53 3.41-.43 6.8.26 7.14.33-.02-2.42-.88-4.64-2.31-6.38z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :linktree} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="m13.73635 5.85251 4.00467-4.11665 2.3248 2.3808-4.20064 4.00466h5.9085v3.30473h-5.9365l4.22865 4.10766-2.3248 2.3338L12.0005 12.099l-5.74052 5.76852-2.3248-2.3248 4.22864-4.10766h-5.9375V8.12132h5.9085L3.93417 4.11666l2.3248-2.3808 4.00468 4.11665V0h3.4727zm-3.4727 10.30614h3.4727V24h-3.4727z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :snapchat} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12.206.793c.99 0 4.347.276 5.93 3.821.529 1.193.403 3.219.299 4.847l-.003.06c-.012.18-.022.345-.03.51.075.045.203.09.401.09.3-.016.659-.12 1.033-.301.165-.088.344-.104.464-.104.182 0 .359.029.509.09.45.149.734.479.734.838.015.449-.39.839-1.213 1.168-.089.029-.209.075-.344.119-.45.135-1.139.36-1.333.81-.09.224-.061.524.12.868l.015.015c.06.136 1.526 3.475 4.791 4.014.255.044.435.27.42.509 0 .075-.015.149-.045.225-.24.569-1.273.988-3.146 1.271-.059.091-.12.375-.164.57-.029.179-.074.36-.134.553-.076.271-.27.405-.555.405h-.03c-.135 0-.313-.031-.538-.074-.36-.075-.765-.135-1.273-.135-.3 0-.599.015-.913.074-.6.104-1.123.464-1.723.884-.853.599-1.826 1.288-3.294 1.288-.06 0-.119-.015-.18-.015h-.149c-1.468 0-2.427-.675-3.279-1.288-.599-.42-1.107-.779-1.707-.884-.314-.045-.629-.074-.928-.074-.54 0-.958.089-1.272.149-.211.043-.391.074-.54.074-.374 0-.523-.224-.583-.42-.061-.192-.09-.389-.135-.567-.046-.181-.105-.494-.166-.57-1.918-.222-2.95-.642-3.189-1.226-.031-.063-.052-.15-.055-.225-.015-.243.165-.465.42-.509 3.264-.54 4.73-3.879 4.791-4.02l.016-.029c.18-.345.224-.645.119-.869-.195-.434-.884-.658-1.332-.809-.121-.029-.24-.074-.346-.119-1.107-.435-1.257-.93-1.197-1.273.09-.479.674-.793 1.168-.793.146 0 .27.029.383.074.42.194.789.3 1.104.3.234 0 .384-.06.465-.105l-.046-.569c-.098-1.626-.225-3.651.307-4.837C7.392 1.077 10.739.807 11.727.807l.419-.015h.06z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :reddit} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :medium} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :tumblr} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M14.563 24c-5.093 0-7.031-3.756-7.031-6.411V9.747H5.116V6.648c3.63-1.313 4.512-4.596 4.71-6.469C9.84.051 9.941 0 9.999 0h3.517v6.114h4.801v3.633h-4.82v7.47c.016 1.001.375 2.371 2.207 2.371h.09c.631-.02 1.486-.205 1.936-.419l1.156 3.425c-.436.636-2.4 1.374-4.156 1.404h-.178l.011.002z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :applepodcasts} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M5.34 0A5.328 5.328 0 000 5.34v13.32A5.328 5.328 0 005.34 24h13.32A5.328 5.328 0 0024 18.66V5.34A5.328 5.328 0 0018.66 0zm6.525 2.568c2.336 0 4.448.902 6.056 2.587 1.224 1.272 1.912 2.619 2.264 4.392.12.59.12 2.2.007 2.864a8.506 8.506 0 01-3.24 5.296c-.608.46-2.096 1.261-2.336 1.261-.088 0-.096-.091-.056-.46.072-.592.144-.715.48-.856.536-.224 1.448-.874 2.008-1.435a7.644 7.644 0 002.008-3.536c.208-.824.184-2.656-.048-3.504-.728-2.696-2.928-4.792-5.624-5.352-.784-.16-2.208-.16-3 0-2.728.56-4.984 2.76-5.672 5.528-.184.752-.184 2.584 0 3.336.456 1.832 1.64 3.512 3.192 4.512.304.2.672.408.824.472.336.144.408.264.472.856.04.36.03.464-.056.464-.056 0-.464-.176-.896-.384l-.04-.03c-2.472-1.216-4.056-3.274-4.632-6.012-.144-.706-.168-2.392-.03-3.04.36-1.74 1.048-3.1 2.192-4.304 1.648-1.737 3.768-2.656 6.128-2.656zm.134 2.81c.409.004.803.04 1.106.106 2.784.62 4.76 3.408 4.376 6.174-.152 1.114-.536 2.03-1.216 2.88-.336.43-1.152 1.15-1.296 1.15-.023 0-.048-.272-.048-.603v-.605l.416-.496c1.568-1.878 1.456-4.502-.256-6.224-.664-.67-1.432-1.064-2.424-1.246-.64-.118-.776-.118-1.448-.008-1.02.167-1.81.562-2.512 1.256-1.72 1.704-1.832 4.342-.264 6.222l.413.496v.608c0 .336-.027.608-.06.608-.03 0-.264-.16-.512-.36l-.034-.011c-.832-.664-1.568-1.842-1.872-2.997-.184-.698-.184-2.024.008-2.72.504-1.878 1.888-3.335 3.808-4.019.41-.145 1.133-.22 1.814-.211zm-.13 2.99c.31 0 .62.06.844.178.488.253.888.745 1.04 1.259.464 1.578-1.208 2.96-2.72 2.254h-.015c-.712-.331-1.096-.956-1.104-1.77 0-.733.408-1.371 1.112-1.745.224-.117.534-.176.844-.176zm-.011 4.728c.988-.004 1.706.349 1.97.97.198.464.124 1.932-.218 4.302-.232 1.656-.36 2.074-.68 2.356-.44.39-1.064.498-1.656.288h-.003c-.716-.257-.87-.605-1.164-2.644-.341-2.37-.416-3.838-.218-4.302.262-.616.974-.966 1.97-.97z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :kick} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M1.333 0h8v5.333H12V2.667h2.667V0h8v8H20v2.667h-2.667v2.666H20V16h2.667v8h-8v-2.667H12v-2.666H9.333V24h-8Z" />
    </svg>
    """
  end

  defp social_icon(%{platform: :rumble} = assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M14.4528 13.5458c.8064-.6542.9297-1.8381.2756-2.6445a1.8802 1.8802 0 0 0-.2756-.2756 21.2127 21.2127 0 0 0-4.3121-2.776c-1.066-.51-2.256.2-2.4261 1.414a23.5226 23.5226 0 0 0-.14 5.5021c.116 1.23 1.292 1.964 2.372 1.492a19.6285 19.6285 0 0 0 4.5062-2.704v-.008zm6.9322-5.4002c2.0335 2.228 2.0396 5.637.014 7.8723A26.1487 26.1487 0 0 1 8.2946 23.846c-2.6848.6713-5.4168-.914-6.1662-3.5781-1.524-5.2002-1.3-11.0803.17-16.3045.772-2.744 3.3521-4.4661 6.0102-3.832 4.9242 1.174 9.5443 4.196 13.0764 8.0121v.002z" />
    </svg>
    """
  end

  # Fallback for unknown platforms
  defp social_icon(assigns) do
    ~H"""
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 22c-5.523 0-10-4.477-10-10S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z" />
    </svg>
    """
  end

  @doc """
  Renders a star rating display.

  ## Attributes

  * `rating` - Required. Number of filled stars (1-5).
  * `max` - Optional. Maximum stars to display. Defaults to 5.
  * `size` - Optional. Size variant: `:sm` (w-4), `:md` (w-5). Defaults to `:sm`.
  * `color` - Optional. Star color. Defaults to "#f59e0b" (amber).

  ## Examples

      <.star_rating rating={5} />
      <.star_rating rating={4} size={:md} />
  """
  attr :rating, :integer, required: true
  attr :max, :integer, default: 5
  attr :size, :atom, default: :sm
  attr :color, :string, default: "#f59e0b"

  def star_rating(assigns) do
    ~H"""
    <div class="star-rating" data-size={@size}>
      <%= for i <- 1..@max do %>
        <svg
          width="16"
          height="16"
          viewBox="0 0 20 20"
          style={"color: #{if i <= @rating, do: @color, else: "var(--t-border-default)"};"}
        >
          <path
            d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"
            fill="currentColor"
          />
        </svg>
      <% end %>
    </div>
    """
  end

  @doc """
  Renders trust badges (e.g., free delivery, easy returns).

  ## Attributes

  * `items` - Optional. List of badge items. Each item is a map with:
    - `title` - Badge title (sentence case)
    - `description` - Badge description
    Defaults to "Made to order" and "Quality materials" badges.

  ## Examples

      <.trust_badges />
      <.trust_badges items={[%{title: "Custom", description: "Badge text"}]} />
  """
  attr :items, :list,
    default: [
      %{title: "Made to order", description: "Printed just for you"},
      %{title: "Quality materials", description: "Premium inks and substrates"}
    ]

  def trust_badges(assigns) do
    ~H"""
    <div class="trust-badges">
      <%= for item <- @items do %>
        <div class="trust-badge-item">
          <span class="trust-badge-icon">
            <svg
              width="20"
              height="20"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
              />
            </svg>
          </span>
          <div>
            <p class="trust-badge-title">{item.title}</p>
            <p class="trust-badge-text">{item.description}</p>
          </div>
        </div>
      <% end %>
    </div>
    """
  end

  @doc """
  Renders a customer reviews section with collapsible header and review cards.

  ## Attributes

  * `reviews` - Required. List of review maps with:
    - `rating` - Star rating (1-5)
    - `title` - Review title
    - `body` - Review text
    - `author` - Reviewer name
    - `date` - Relative date string (e.g., "2 weeks ago")
    - `verified` - Boolean, if true shows "Verified purchase" badge
  * `average_rating` - Optional. Average rating to show in header. Defaults to 5.
  * `total_count` - Optional. Total number of reviews. Defaults to length of reviews list.
  * `open` - Optional. Whether section is expanded by default. Defaults to true.

  ## Examples

      <.reviews_section reviews={@product.reviews} average_rating={4.8} total_count={24} />
  """
  attr :reviews, :list, required: true
  attr :average_rating, :integer, default: 5
  attr :total_count, :integer, default: nil
  attr :open, :boolean, default: true

  def reviews_section(assigns) do
    assigns =
      assign_new(assigns, :display_count, fn ->
        assigns.total_count || length(assigns.reviews)
      end)

    ~H"""
    <details open={@open} class="pdp-reviews">
      <summary class="reviews-summary">
        <div class="reviews-header-left">
          <h2 class="reviews-heading">
            Customer reviews
          </h2>
          <div class="reviews-rating-group">
            <.star_rating rating={@average_rating} />
            <span class="reviews-count">({@display_count})</span>
          </div>
        </div>
        <svg
          class="reviews-chevron"
          width="20"
          height="20"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
      </summary>

      <div class="reviews-body">
        <div class="reviews-list">
          <%= for review <- @reviews do %>
            <.review_card review={review} />
          <% end %>
        </div>

        <.shop_button_outline class="reviews-load-more">
          Load more reviews
        </.shop_button_outline>
      </div>
    </details>
    """
  end

  @doc """
  Renders a single review card.

  ## Attributes

  * `review` - Required. Map with `rating`, `title`, `body`, `author`, `date`, `verified`.

  ## Examples

      <.review_card review={%{rating: 5, title: "Great!", body: "...", author: "Jane", date: "1 week ago", verified: true}} />
  """
  attr :review, :map, required: true

  def review_card(assigns) do
    ~H"""
    <article class="review-card">
      <div class="review-header">
        <.star_rating rating={@review.rating} />
        <span class="review-date">{@review.date}</span>
      </div>
      <h3 class="review-title">{@review.title}</h3>
      <p class="review-body">
        {@review.body}
      </p>
      <div class="review-footer">
        <span class="review-author">
          {@review.author}
        </span>
        <%= if @review.verified do %>
          <span class="review-verified">
            Verified purchase
          </span>
        <% end %>
      </div>
    </article>
    """
  end

  @doc """
  Renders a page title heading.

  ## Attributes

  * `text` - Required. The title text.

  ## Examples

      <.page_title text="Your basket" />
  """
  attr :text, :string, required: true

  def page_title(assigns) do
    ~H"""
    <h1 class="page-title">
      {@text}
    </h1>
    """
  end

  @doc """
  Renders rich text content with themed typography.

  This component renders structured content blocks (paragraphs, headings)
  with appropriate theme styling.

  ## Attributes

  * `blocks` - Required. List of content blocks. Each block is a map with:
    - `type` - Either `:paragraph`, `:heading`, or `:lead`
    - `text` - The text content
    - `level` - For headings, the level (2, 3, etc.). Defaults to 2.

  ## Examples

      <.rich_text blocks={[
        %{type: :lead, text: "Introduction paragraph..."},
        %{type: :paragraph, text: "Regular paragraph..."},
        %{type: :heading, text: "Section Title"},
        %{type: :paragraph, text: "More content..."}
      ]} />
  """
  attr :blocks, :list, required: true

  def rich_text(assigns) do
    ~H"""
    <div class="rich-text">
      <%= for block <- @blocks do %>
        <.rich_text_block block={block} />
      <% end %>
    </div>
    """
  end

  attr :block, :map, required: true

  defp rich_text_block(%{block: %{type: :lead}} = assigns) do
    ~H"""
    <p class="rich-text-lead">
      {@block.text}
    </p>
    """
  end

  defp rich_text_block(%{block: %{type: :updated_at}} = assigns) do
    ~H"""
    <p class="rich-text-updated-at">
      Last updated: {@block.date}
    </p>
    """
  end

  defp rich_text_block(%{block: %{type: :paragraph}} = assigns) do
    ~H"""
    <p class="rich-text-paragraph">
      {@block.text}
    </p>
    """
  end

  defp rich_text_block(%{block: %{type: :heading}} = assigns) do
    ~H"""
    <h2 class="rich-text-heading">
      {@block.text}
    </h2>
    """
  end

  defp rich_text_block(%{block: %{type: :closing}} = assigns) do
    ~H"""
    <p class="rich-text-closing">
      {@block.text}
    </p>
    """
  end

  defp rich_text_block(%{block: %{type: :list}} = assigns) do
    ~H"""
    <ul class="rich-text-list">
      <%= for item <- @block.items do %>
        <li>{item}</li>
      <% end %>
    </ul>
    """
  end

  defp rich_text_block(assigns) do
    ~H"""
    <p class="rich-text-paragraph">
      {@block.text}
    </p>
    """
  end

  @doc """
  Renders a responsive `<picture>` element with AVIF, WebP, and JPEG sources.

  Computes available widths from `source_width` to avoid upscaling - only generates
  srcset entries for sizes smaller than or equal to the original image dimensions.

  The component renders:
  - `<source>` for AVIF (best compression, modern browsers)
  - `<source>` for WebP (good compression, broad support)
  - `<img>` with JPEG srcset (fallback for legacy browsers)

  ## Attributes

  * `src` - Required. Base path to the image variants (without size/extension).
  * `alt` - Required. Alt text for accessibility.
  * `source_width` - Required. Original image width in pixels.
  * `sizes` - Optional. Responsive sizes attribute. Defaults to "100vw".
  * `class` - Optional. CSS classes to apply to the `<img>` element.
  * `width` - Optional. Explicit width attribute.
  * `height` - Optional. Explicit height attribute.
  * `priority` - Optional. If true, sets eager loading and high fetchpriority.
    Defaults to false (lazy loading).

  ## Examples

      <.responsive_image
        src="/image_cache/abc123"
        source_width={1200}
        alt="Product image"
      />

      <.responsive_image
        src="/image_cache/abc123"
        source_width={1200}
        alt="Hero banner"
        priority={true}
        sizes="(max-width: 768px) 100vw, 50vw"
      />
  """
  attr :src, :string, required: true, doc: "Base path without size/extension"
  attr :alt, :string, required: true
  attr :source_width, :integer, required: true, doc: "Original image width"
  attr :sizes, :string, default: "100vw"
  attr :class, :string, default: ""
  attr :width, :integer, default: nil
  attr :height, :integer, default: nil
  attr :priority, :boolean, default: false

  def responsive_image(assigns) do
    alias Berrypod.Images.Optimizer

    # Compute available widths from source dimensions (no upscaling)
    available = Optimizer.applicable_widths(assigns.source_width)
    default_width = Enum.max(available)

    assigns =
      assigns
      |> assign(:available_widths, available)
      |> assign(:default_width, default_width)

    ~H"""
    <picture>
      <source
        type="image/avif"
        srcset={build_srcset(@src, @available_widths, "avif")}
        sizes={@sizes}
      />
      <source
        type="image/webp"
        srcset={build_srcset(@src, @available_widths, "webp")}
        sizes={@sizes}
      />
      <img
        src={"#{@src}-#{@default_width}.jpg"}
        srcset={build_srcset(@src, @available_widths, "jpg")}
        sizes={@sizes}
        alt={@alt}
        width={@width}
        height={@height}
        loading={if @priority, do: "eager", else: "lazy"}
        decoding={if @priority, do: "sync", else: "async"}
        fetchpriority={if @priority, do: "high", else: nil}
        class={@class}
      />
    </picture>
    """
  end

  @doc """
  Renders flash messages styled for the shop theme.
  """
  attr :flash, :map, required: true

  def shop_flash_group(assigns) do
    ~H"""
    <div id="shop-flash-group" class="shop-flash-group">
      <%= if msg = Phoenix.Flash.get(@flash, :info) do %>
        <div
          id="shop-flash-info"
          class="shop-flash shop-flash--info"
          role="status"
          aria-live="polite"
        >
          <svg
            class="shop-flash-icon shop-flash-icon--info"
            width="20"
            height="20"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            aria-hidden="true"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
          </svg>
          <p>{msg}</p>
          <button
            type="button"
            class="shop-flash-close"
            aria-label="Close"
            phx-click={
              Phoenix.LiveView.JS.push("lv:clear-flash", value: %{key: :info})
              |> Phoenix.LiveView.JS.hide(
                to: "#shop-flash-info",
                transition: {"fade-out", "fade-out-from", "fade-out-to"}
              )
            }
          >
            <svg
              width="16"
              height="16"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="2"
              stroke="currentColor"
              aria-hidden="true"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      <% end %>
      <%= if msg = Phoenix.Flash.get(@flash, :error) do %>
        <div
          id="shop-flash-error"
          class="shop-flash shop-flash--error"
          role="alert"
          aria-live="assertive"
        >
          <svg
            class="shop-flash-icon shop-flash-icon--error"
            width="20"
            height="20"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            aria-hidden="true"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
            />
          </svg>
          <p>{msg}</p>
          <button
            type="button"
            class="shop-flash-close"
            aria-label="Close"
            phx-click={
              Phoenix.LiveView.JS.push("lv:clear-flash", value: %{key: :error})
              |> Phoenix.LiveView.JS.hide(
                to: "#shop-flash-error",
                transition: {"fade-out", "fade-out-from", "fade-out-to"}
              )
            }
          >
            <svg
              width="16"
              height="16"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="2"
              stroke="currentColor"
              aria-hidden="true"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      <% end %>
    </div>
    """
  end

  defp build_srcset(base, widths, format) do
    widths
    |> Enum.sort()
    |> Enum.map_join(", ", &"#{base}-#{&1}.#{format} #{&1}w")
  end
end