"use client";

export default function GrowPage() {
  const items = [
    { icon: "📣", title: "Marketing copy", desc: "AI-generated landing page, emails, and social posts tailored to your product." },
    { icon: "🎯", title: "Launch channels", desc: "Recommended channels based on your target audience and business model." },
    { icon: "👥", title: "User acquisition", desc: "Onboarding flows, referral mechanics, and early adopter campaigns." },
    { icon: "💬", title: "Community", desc: "Discord, Slack, or forum setup recommendations for your user base." },
  ];

  return (
    <div
      className="vibn-enter"
      style={{ padding: "28px 32px", overflow: "auto", fontFamily: "Outfit, sans-serif" }}
    >
      <div style={{ maxWidth: 560 }}>
        <h3 style={{ fontFamily: "Newsreader, serif", fontSize: "1.2rem", fontWeight: 400, color: "#1a1a1a", marginBottom: 4 }}>
          Grow
        </h3>
        <p style={{ fontSize: "0.8rem", color: "#a09a90", marginBottom: 28 }}>
          Marketing, launch strategy, and user acquisition — coming once your product is live.
        </p>

        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {items.map((item, i) => (
            <div
              key={i}
              className="vibn-enter"
              style={{
                display: "flex", alignItems: "flex-start", gap: 16,
                padding: "18px 20px", background: "#fff",
                border: "1px solid #e8e4dc", borderRadius: 10,
                boxShadow: "0 1px 2px #1a1a1a05",
                animationDelay: `${i * 0.06}s`,
              }}
            >
              <div style={{ fontSize: "1.2rem", flexShrink: 0, marginTop: 2 }}>{item.icon}</div>
              <div>
                <div style={{ fontSize: "0.88rem", fontWeight: 600, color: "#1a1a1a", marginBottom: 4 }}>{item.title}</div>
                <div style={{ fontSize: "0.8rem", color: "#6b6560", lineHeight: 1.55 }}>{item.desc}</div>
              </div>
              <span style={{
                marginLeft: "auto", flexShrink: 0,
                display: "inline-flex", alignItems: "center",
                padding: "3px 9px", borderRadius: 4,
                fontSize: "0.68rem", fontWeight: 600,
                color: "#9a7b3a", background: "#d4a04a12",
              }}>
                Soon
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}