/* global React, Section, SectionHeader, Button, Icon */

const OPTIONS = [
  {
    key: "single",
    title: "Single Reel / Post",
    sub: "Post on Instagram + TikTok + Story on IG.",
    price: "$250",
    unit: "/ piece",
    badge: null,
    bullets: [
      "1× Reel or feed Post on Instagram",
      "1× Cross-post on TikTok",
      "1× dedicated Story on Instagram (free bonus)",
      "Concept + script co-developed",
      "Brief + 2 revision rounds",
      "30-day usage rights",
      "Post-campaign metrics report",
    ],
    cta: "Book a single piece",
  },
  {
    key: "bundle",
    title: "Bundle · All Platforms",
    sub: "Posted across all 5 social media platforms.",
    price: "$320",
    unit: " · bundle",
    badge: "Best value",
    bullets: [
      "1× Reel + 1× feed Post on Instagram",
      "1× Cross-post on TikTok, Facebook, X / Twitter, LinkedIn",
      "1× dedicated Story on Instagram (free bonus)",
      "Co-developed concept + script",
      "Branded final slide + CTA",
      "60-day usage rights",
      "Detailed reach & engagement report (all platforms)",
    ],
    cta: "Book the bundle",
    featured: true,
  },
  {
    key: "longterm",
    title: "Long-term Collaboration",
    sub: "Monthly partnership — very open to this.",
    price: "By discussion",
    unit: " · monthly",
    badge: "Open for this",
    bullets: [
      "Monthly content cadence (negotiable)",
      "Co-branded series identity",
      "Cross-posting across all 5 platforms",
      "Mention in monthly newsletter",
      "Quarterly performance review",
      "First-look on new formats",
    ],
    cta: "Let's talk monthly",
  },
];

const EXTRAS = [
  {
    icon: "gift",
    title: "Story Bonus",
    body: "Every package includes a free Story repost — extra reach at no extra cost.",
    tag: "Free",
  },
  {
    icon: "video",
    title: "UGC (User-Generated Content)",
    body: "Raw or lightly-edited UGC clips for your own ads and channels. Scoped per brief.",
    tag: "Available",
  },
  {
    icon: "presentation",
    title: "Custom formats",
    body: "Live workshops, dashboard reviews, course collabs — happy to scope on request.",
    tag: "On request",
  },
];

function Collab({ onCTA }) {
  return (
    <Section id="collab" className="section--collab">
      <SectionHeader
        eyebrow="Collaboration options"
        title="Three ways to work together."
        subtitle="Clear, fair pricing. Story always included free. Long-term partnership is the easiest path."
      />
      <div className="collab-grid">
        {OPTIONS.map((o) => (
          <div key={o.key} className={`collab-card ${o.featured ? "collab-card--featured" : ""}`}>
            {o.badge && (
              <span className={`collab-badge ${o.featured ? "collab-badge--featured" : ""}`}>{o.badge}</span>
            )}
            <h3 className="collab-title">{o.title}</h3>
            <p className="collab-sub">{o.sub}</p>
            <div className="collab-price">{o.price}<span>{o.unit}</span></div>
            <ul className="collab-bullets">
              {o.bullets.map((b) => (
                <li key={b}><Icon name="check" size={14} /> {b}</li>
              ))}
            </ul>
            <Button
              variant={o.featured ? "primary" : "secondary"}
              onClick={onCTA}
              icon={<Icon name="arrow-right" size={16} />}
            >
              {o.cta}
            </Button>
          </div>
        ))}
      </div>

      <div className="collab-extras">
        {EXTRAS.map((e) => (
          <div key={e.title} className="collab-extra">
            <div className="collab-extra-icon"><Icon name={e.icon} size={20} /></div>
            <div className="collab-extra-body">
              <div className="collab-extra-head">
                <h4>{e.title}</h4>
                <span className={`collab-extra-tag ${e.tag === "Free" ? "is-free" : ""}`}>{e.tag}</span>
              </div>
              <p>{e.body}</p>
            </div>
          </div>
        ))}
      </div>

      <p className="collab-foot">
        <Icon name="message-circle" size={14} /> All prices in USD · payable in IDR equivalent · invoice on request.
      </p>
    </Section>
  );
}

window.Collab = Collab;