The V15 Company — Influencer Marketing Agency

{[ ["brand_name", "Brand Name", "text", "Your brand name"], ["contact_person", "Contact Person", "text", "Your name"], ["email", "Email Address", "email", "you@brand.com"], ["whatsapp", "WhatsApp Number", "tel", "+91 98765 43210"], ["instagram", "Instagram Handle", "text", "@yourbrand"], ["website", "Website", "url", "https://yourbrand.com"], ].map(([key, label, type, placeholder]) => (

{label} e.target.style.borderColor = "#EFB5BB"} onBlur={e => e.target.style.borderColor = "#ECECEC"} />

))}

Campaign Objective

e.target.style.borderColor = "#EFB5BB"}
                  onBlur={e => e.target.style.borderColor = "#ECECEC"}
                />
              </div>

<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 20, marginTop: 20 }} className="form-grid-3">
                {[
                  ["niche", "Creator Niche Required", "text", "E.g. Beauty, Tech..."],
                  ["num_creators", "Number of Creators", "number", "E.g. 5"],
                  ["budget", "Campaign Budget (₹)", "text", "E.g. ₹50,000"],
                ].map(([key, label, type, placeholder]) => (
                  <div key={key}>
                    <label style={labelStyle}>{label}</label>
                    <input type={type} placeholder={placeholder} value={form[key]} onChange={set(key)}
                      style={inputStyle}
                      onFocus={e => e.target.style.borderColor = "#EFB5BB"}
                      onBlur={e => e.target.style.borderColor = "#ECECEC"}
                    />
                  </div>
                ))}
              </div>

<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginTop: 20 }} className="form-grid">
                <div>
                  <label style={labelStyle}>Deliverables Required</label>
                  <input type="text" placeholder="E.g. 1 Reel + 3 Stories" value={form.deliverables} onChange={set("deliverables")}
                    style={inputStyle}
                    onFocus={e => e.target.style.borderColor = "#EFB5BB"}
                    onBlur={e => e.target.style.borderColor = "#ECECEC"}
                  />
                </div>
                <div>
                  <label style={labelStyle}>Campaign Timeline</label>
                  <input type="text" placeholder="E.g. Within 30 days" value={form.timeline} onChange={set("timeline")}
                    style={inputStyle}
                    onFocus={e => e.target.style.borderColor = "#EFB5BB"}
                    onBlur={e => e.target.style.borderColor = "#ECECEC"}
                  />
                </div>
              </div>

<div style={{ marginTop: 20 }}>
                <label style={labelStyle}>Additional Notes</label>
                <textarea placeholder="Any specific requirements, preferences, or questions..." value={form.notes} onChange={set("notes")}
                  style={{ ...inputStyle, minHeight: 80, resize: "vertical" }}
                  onFocus={e => e.target.style.borderColor = "#EFB5BB"}
                  onBlur={e => e.target.style.borderColor = "#ECECEC"}
                />
              </div>

<button onClick={handleSubmit} disabled={loading} style={{
                width: "100%", marginTop: 28,
                background: loading ? "#ccc" : "#111", color: "#fff",
                border: "none", cursor: loading ? "not-allowed" : "pointer",
                padding: "15px", borderRadius: 12, fontSize: 15, fontWeight: 700,
                letterSpacing: "0.3px", transition: "background 0.2s",
              }}
                onMouseEnter={e => { if (!loading) e.target.style.background = "#333"; }}
                onMouseLeave={e => { if (!loading) e.target.style.background = "#111"; }}
              >{loading ? "Submitting..." : "Submit Campaign Requirement →"}</button>
            </div>
          </FadeIn>
        )}
      </div>
      <style>{`@media(max-width:640px){.form-grid{grid-template-columns:1fr!important;}.form-grid-3{grid-template-columns:1fr!important;}}`}</style>
    </section>
  );
}

// ── Creator Form ─────────────────────────────────────────────────────────────
function CreatorForm() {
  const [form, setForm] = useState({
    full_name: "", email: "", whatsapp: "", instagram: "",
    followers: "", niche: "", city: "", portfolio: "",
    media_kit: "", past_collabs: "", notes: "",
  });
  const [loading, setLoading] = useState(false);
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

const handleSubmit = async () => {
    if (!form.full_name || !form.email || !form.instagram) {
      alert("Please fill in Full Name, Email, and Instagram Username.");
      return;
    }
    setLoading(true);
    await new Promise(r => setTimeout(r, 1200));
    setLoading(false);
    window.open("https://forms.google.com", "_blank");
  };

const inputStyle = {
    width: "100%", padding: "12px 14px", borderRadius: 10,
    border: "1px solid #ECECEC", fontSize: 14, color: "#111",
    background: "#fff", outline: "none", boxSizing: "border-box",
    fontFamily: "inherit", transition: "border-color 0.2s",
  };
  const labelStyle = { display: "block", fontSize: 13, fontWeight: 600, color: "#444", marginBottom: 6 };

return (
    <section id="for-creators" style={{ background: "#fff", padding: "100px 24px" }}>
      <div style={{ maxWidth: 860, margin: "0 auto" }}>
        <FadeIn>
          <div style={{ textAlign: "center", marginBottom: 56 }}>
            <div style={{ fontSize: 13, color: "#EFB5BB", fontWeight: 700, letterSpacing: "2px", marginBottom: 12, textTransform: "uppercase" }}>Are You A Creator?</div>
            <h2 style={{ fontSize: "clamp(28px, 4vw, 44px)", fontWeight: 800, color: "#111", margin: "0 0 12px", letterSpacing: "-1.5px" }}>Join Our Creator Network</h2>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 8, marginTop: 8,
              background: "#22C55E15", border: "1px solid #22C55E55",
              borderRadius: 20, padding: "6px 16px",
            }}>
              <span style={{ fontSize: 14 }}>🚫</span>
              <span style={{ color: "#16a34a", fontWeight: 700, fontSize: 13 }}>We do not charge creators any upfront fee.</span>
            </div>
          </div>
        </FadeIn>

<FadeIn delay={0.1}>
          <div style={{ background: "#F8F8F8", borderRadius: 20, padding: "40px", border: "1px solid #ECECEC" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }} className="form-grid">
              {[
                ["full_name", "Full Name", "text", "Your full name"],
                ["email", "Email Address", "email", "you@email.com"],
                ["whatsapp", "WhatsApp Number", "tel", "+91 98765 43210"],
                ["instagram", "Instagram Username", "text", "@yourhandle"],
                ["followers", "Follower Count", "text", "E.g. 25K"],
                ["city", "City", "text", "E.g. Mumbai"],
              ].map(([key, label, type, placeholder]) => (
                <div key={key}>
                  <label style={labelStyle}>{label}</label>
                  <input type={type} placeholder={placeholder} value={form[key]} onChange={set(key)}
                    style={inputStyle}
                    onFocus={e => e.target.style.borderColor = "#EFB5BB"}
                    onBlur={e => e.target.style.borderColor = "#ECECEC"}
                  />
                </div>
              ))}
            </div>

<div style={{ marginTop: 20 }}>
              <label style={labelStyle}>Creator Niche</label>
              <input type="text" placeholder="E.g. Beauty, Tech, Food..." value={form.niche} onChange={set("niche")}
                style={inputStyle}
                onFocus={e => e.target.style.borderColor = "#EFB5BB"}
                onBlur={e => e.target.style.borderColor = "#ECECEC"}
              />
            </div>

<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginTop: 20 }} className="form-grid">
              <div>
                <label style={labelStyle}>Portfolio Link</label>
                <input type="url" placeholder="https://..." value={form.portfolio} onChange={set("portfolio")}
                  style={inputStyle}
                  onFocus={e => e.target.style.borderColor = "#EFB5BB"}
                  onBlur={e => e.target.style.borderColor = "#ECECEC"}
                />
              </div>
              <div>
                <label style={labelStyle}>Media Kit Link</label>
                <input type="url" placeholder="https://..." value={form.media_kit} onChange={set("media_kit")}
                  style={inputStyle}
                  onFocus={e => e.target.style.borderColor = "#EFB5BB"}
                  onBlur={e => e.target.style.borderColor = "#ECECEC"}
                />
              </div>
            </div>

<div style={{ marginTop: 20 }}>
              <label style={labelStyle}>Previous Brand Collaborations</label>
              <textarea placeholder="List any brands you've worked with before..." value={form.past_collabs} onChange={set("past_collabs")}
                style={{ ...inputStyle, minHeight: 80, resize: "vertical" }}
                onFocus={e => e.target.style.borderColor = "#EFB5BB"}
                onBlur={e => e.target.style.borderColor = "#ECECEC"}
              />
            </div>

<div style={{ marginTop: 20 }}>
              <label style={labelStyle}>Additional Notes</label>
              <textarea placeholder="Anything else you'd like us to know..." value={form.notes} onChange={set("notes")}
                style={{ ...inputStyle, minHeight: 80, resize: "vertical" }}
                onFocus={e => e.target.style.borderColor = "#EFB5BB"}
                onBlur={e => e.target.style.borderColor = "#ECECEC"}
              />
            </div>

<button onClick={handleSubmit} disabled={loading} style={{
              width: "100%", marginTop: 28,
              background: loading ? "#ccc" : "linear-gradient(135deg, #EFB5BB, #c0667a)",
              color: "#fff", border: "none", cursor: loading ? "not-allowed" : "pointer",
              padding: "15px", borderRadius: 12, fontSize: 15, fontWeight: 700,
              letterSpacing: "0.3px", transition: "opacity 0.2s",
            }}
              onMouseEnter={e => { if (!loading) e.target.style.opacity = "0.9"; }}
              onMouseLeave={e => { e.target.style.opacity = "1"; }}
            >{loading ? "Submitting..." : "Join Creator Network →"}</button>
          </div>
        </FadeIn>
      </div>
      <style>{`@media(max-width:640px){.form-grid{grid-template-columns:1fr!important;}}`}</style>
    </section>
  );
}

// ── Services ─────────────────────────────────────────────────────────────────
function Services() {
  return (
    <section id="services" style={{ background: "#F8F8F8", padding: "100px 24px" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <FadeIn>
          <div style={{ textAlign: "center", marginBottom: 60 }}>
            <div style={{ fontSize: 13, color: "#EFB5BB", fontWeight: 700, letterSpacing: "2px", marginBottom: 12, textTransform: "uppercase" }}>What We Offer</div>
            <h2 style={{ fontSize: "clamp(28px, 4vw, 44px)", fontWeight: 800, color: "#111", margin: 0, letterSpacing: "-1.5px" }}>Our Services</h2>
          </div>
        </FadeIn>

<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: 20 }}>
          {SERVICES.map((s, i) => (
            <FadeIn key={s.title} delay={i * 0.08}>
              <div style={{
                background: "#fff", borderRadius: 18, padding: 32,
                border: "1px solid #ECECEC", transition: "all 0.25s", cursor: "default",
              }}
                onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 16px 40px rgba(0,0,0,0.08)"; e.currentTarget.style.borderColor = "#EFB5BB"; }}
                onMouseLeave={e => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; e.currentTarget.style.borderColor = "#ECECEC"; }}
              >
                <div style={{ fontSize: 32, marginBottom: 16 }}>{s.icon}</div>
                <div style={{ fontWeight: 800, fontSize: 18, color: "#111", marginBottom: 8 }}>{s.title}</div>
                <div style={{ color: "#666", fontSize: 14, lineHeight: 1.6 }}>{s.desc}</div>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Trust Section ─────────────────────────────────────────────────────────────
function Trust() {
  return (
    <section style={{ background: "#fff", padding: "100px 24px" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <FadeIn>
          <div style={{ textAlign: "center", marginBottom: 60 }}>
            <h2 style={{ fontSize: "clamp(28px, 4vw, 44px)", fontWeight: 800, color: "#111", margin: 0, letterSpacing: "-1.5px" }}>
              Why Creators Trust<br /><span style={{ color: "#c0667a" }}>The V15 Company</span>
            </h2>
          </div>
        </FadeIn>

<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 20 }}>
          {TRUST_CARDS.map((c, i) => (
            <FadeIn key={c.title} delay={i * 0.08}>
              <div style={{
                background: "#F8F8F8", borderRadius: 18, padding: "28px 24px",
                border: "1px solid #ECECEC", textAlign: "center",
              }}>
                <div style={{
                  width: 52, height: 52, borderRadius: 16,
                  background: "#EFB5BB22", border: "1px solid #EFB5BB",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontSize: 24, margin: "0 auto 16px",
                }}>{c.icon}</div>
                <div style={{ fontWeight: 700, fontSize: 15, color: "#111", marginBottom: 8 }}>{c.title}</div>
                <div style={{ color: "#666", fontSize: 13, lineHeight: 1.6 }}>{c.desc}</div>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Payment Terms ─────────────────────────────────────────────────────────────
function PaymentTerms() {
  const cards = [
    {
      icon: "👤", title: "For Creators",
      items: [
        "No upfront fee — ever.",
        "A 10% service fee is deducted only after successful campaign completion and payment receipt.",
        "Creators should never transfer money to claim campaigns.",
      ],
    },
    {
      icon: "🏢", title: "For Brands",
      items: [
        "A 10% management fee on the final campaign value.",
        "Minimum 50% advance required before campaign execution.",
        "Remaining balance due within 5 business days after campaign completion.",
      ],
    },
    {
      icon: "💸", title: "Creator Payments",
      items: [
        "Payments processed within 15 business days after brand payment is received.",
        "Deliverables must be approved before payment is released.",
        "Campaign requirements must be fully fulfilled.",
      ],
    },
    {
      icon: "🎁", title: "Barter Campaigns",
      items: [
        "Separate coordination charges may apply for barter/gifting campaigns.",
        "Details shared during campaign briefing.",
      ],
    },
  ];

return (
    <section id="payment-terms" style={{ background: "#F8F8F8", padding: "100px 24px" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <FadeIn>
          <div style={{ textAlign: "center", marginBottom: 60 }}>
            <div style={{ fontSize: 13, color: "#EFB5BB", fontWeight: 700, letterSpacing: "2px", marginBottom: 12, textTransform: "uppercase" }}>Clarity First</div>
            <h2 style={{ fontSize: "clamp(28px, 4vw, 44px)", fontWeight: 800, color: "#111", margin: "0 0 16px", letterSpacing: "-1.5px" }}>Transparent Payment Terms</h2>
          </div>
        </FadeIn>

<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: 20 }}>
          {cards.map((card, i) => (
            <FadeIn key={card.title} delay={i * 0.08}>
              <div style={{
                background: "#fff", borderRadius: 18, padding: 32,
                border: "1px solid #ECECEC",
              }}>
                <div style={{ fontSize: 28, marginBottom: 12 }}>{card.icon}</div>
                <div style={{ fontWeight: 800, fontSize: 17, color: "#111", marginBottom: 16 }}>{card.title}</div>
                {card.items.map((item, j) => (
                  <div key={j} style={{ display: "flex", gap: 10, marginBottom: 10 }}>
                    <div style={{ color: "#EFB5BB", fontWeight: 700, flexShrink: 0, marginTop: 1 }}>✦</div>
                    <div style={{ color: "#555", fontSize: 14, lineHeight: 1.6 }}>{item}</div>
                  </div>
                ))}
              </div>
            </FadeIn>
          ))}
        </div>

<FadeIn delay={0.2}>
          <div style={{
            marginTop: 24, background: "#fff", borderRadius: 16, padding: 24,
            border: "1px solid #ECECEC",
          }}>
            <div style={{ fontWeight: 700, fontSize: 15, color: "#111", marginBottom: 8 }}>📜 General Terms</div>
            <p style={{ color: "#666", fontSize: 14, lineHeight: 1.7, margin: 0 }}>
              The V15 Company reserves the right to decline campaigns that do not align with company values and standards. All payment terms are subject to individual campaign agreements.
            </p>
          </div>
        </FadeIn>
      </div>
    </section>
  );
}

// ── Safety Notice ─────────────────────────────────────────────────────────────
function SafetyNotice() {
  return (
    <section style={{ background: "#fff", padding: "60px 24px" }}>
      <div style={{ maxWidth: 860, margin: "0 auto" }}>
        <FadeIn>
          <div style={{
            background: "linear-gradient(135deg, #fff5f6, #fff)",
            border: "2px solid #EFB5BB", borderRadius: 20, padding: "40px",
            textAlign: "center",
          }}>
            <div style={{ fontSize: 40, marginBottom: 12 }}>🛡️</div>
            <h2 style={{ fontSize: 26, fontWeight: 800, color: "#111", margin: "0 0 16px", letterSpacing: "-0.5px" }}>Creator Safety First</h2>
            <div style={{ maxWidth: 560, margin: "0 auto" }}>
              {[
                "We never charge creators any upfront fee.",
                "Do not transfer money to anyone claiming to offer campaigns on behalf of The V15 Company.",
                "If in doubt, contact us directly through our official Instagram or WhatsApp.",
              ].map((item, i) => (
                <div key={i} style={{ display: "flex", alignItems: "flex-start", gap: 12, marginBottom: 12, textAlign: "left" }}>
                  <span style={{ color: "#c0667a", fontWeight: 800, flexShrink: 0, fontSize: 16 }}>⚠</span>
                  <span style={{ color: "#444", fontSize: 15, lineHeight: 1.6 }}>{item}</span>
                </div>
              ))}
            </div>
            <a href="https://www.instagram.com/the_v15_company" target="_blank" rel="noreferrer" style={{
              display: "inline-block", marginTop: 20,
              background: "#EFB5BB", color: "#7a2d3c", textDecoration: "none",
              padding: "10px 24px", borderRadius: 10, fontWeight: 700, fontSize: 14,
            }}>Contact Us on Instagram →</a>
          </div>
        </FadeIn>
      </div>
    </section>
  );
}

// ── FAQ ───────────────────────────────────────────────────────────────────────
function FAQ() {
  const [open, setOpen] = useState(null);
  return (
    <section id="faqs" style={{ background: "#F8F8F8", padding: "100px 24px" }}>
      <div style={{ maxWidth: 760, margin: "0 auto" }}>
        <FadeIn>
          <div style={{ textAlign: "center", marginBottom: 56 }}>
            <div style={{ fontSize: 13, color: "#EFB5BB", fontWeight: 700, letterSpacing: "2px", marginBottom: 12, textTransform: "uppercase" }}>Got Questions?</div>
            <h2 style={{ fontSize: "clamp(28px, 4vw, 44px)", fontWeight: 800, color: "#111", margin: 0, letterSpacing: "-1.5px" }}>Frequently Asked Questions</h2>
          </div>
        </FadeIn>

{["For Brands", "For Creators"].map(cat => (
          <div key={cat} style={{ marginBottom: 32 }}>
            <div style={{
              fontSize: 13, fontWeight: 700, color: "#c0667a",
              letterSpacing: "1px", textTransform: "uppercase", marginBottom: 12,
            }}>{cat}</div>
            {FAQS.filter(f => f.category === cat).map((faq, i) => {
              const key = `${cat}-${i}`;
              const isOpen = open === key;
              return (
                <FadeIn key={key} delay={i * 0.05}>
                  <div style={{
                    background: "#fff", border: "1px solid #ECECEC",
                    borderRadius: 14, marginBottom: 8, overflow: "hidden",
                  }}>
                    <button onClick={() => setOpen(isOpen ? null : key)} style={{
                      width: "100%", textAlign: "left", background: "none",
                      border: "none", cursor: "pointer", padding: "18px 20px",
                      display: "flex", justifyContent: "space-between", alignItems: "center",
                    }}>
                      <span style={{ fontWeight: 700, fontSize: 15, color: "#111" }}>{faq.q}</span>
                      <span style={{ color: "#EFB5BB", fontWeight: 700, fontSize: 18, transition: "transform 0.2s", transform: isOpen ? "rotate(45deg)" : "" }}>+</span>
                    </button>
                    {isOpen && (
                      <div style={{ padding: "0 20px 18px", color: "#555", fontSize: 14, lineHeight: 1.7 }}>{faq.a}</div>
                    )}
                  </div>
                </FadeIn>
              );
            })}
          </div>
        ))}
      </div>
    </section>
  );
}

// ── Contact ───────────────────────────────────────────────────────────────────
function Contact() {
  const [form, setForm] = useState({ name: "", email: "", message: "" });
  const [sent, setSent] = useState(false);
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

const handleSubmit = async () => {
    if (!form.name || !form.email || !form.message) { alert("Please fill all fields."); return; }
    await new Promise(r => setTimeout(r, 800));
    setSent(true);
  };

return (
    <section id="contact" style={{ background: "#fff", padding: "100px 24px" }}>
      <div style={{ maxWidth: 640, margin: "0 auto" }}>
        <FadeIn>
          <div style={{ textAlign: "center", marginBottom: 48 }}>
            <div style={{ fontSize: 13, color: "#EFB5BB", fontWeight: 700, letterSpacing: "2px", marginBottom: 12, textTransform: "uppercase" }}>Get In Touch</div>
            <h2 style={{ fontSize: "clamp(28px, 4vw, 44px)", fontWeight: 800, color: "#111", margin: "0 0 12px", letterSpacing: "-1.5px" }}>Contact Us</h2>
          </div>
        </FadeIn>

<FadeIn delay={0.1}>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", marginBottom: 36, flexWrap: "wrap" }}>
            <a href="https://www.instagram.com/the_v15_company" target="_blank" rel="noreferrer" style={{
              display: "flex", alignItems: "center", gap: 8,
              background: "#EFB5BB22", border: "1px solid #EFB5BB",
              color: "#c0667a", textDecoration: "none",
              padding: "10px 20px", borderRadius: 10, fontWeight: 700, fontSize: 14,
            }}>📸 Instagram</a>
            <a href="https://wa.me/91XXXXXXXXXX" target="_blank" rel="noreferrer" style={{
              display: "flex", alignItems: "center", gap: 8,
              background: "#22C55E15", border: "1px solid #22C55E66",
              color: "#16a34a", textDecoration: "none",
              padding: "10px 20px", borderRadius: 10, fontWeight: 700, fontSize: 14,
            }}>💬 WhatsApp</a>
          </div>
        </FadeIn>

<FadeIn delay={0.15}>
          {sent ? (
            <div style={{
              background: "#F8F8F8", borderRadius: 20, padding: 40,
              textAlign: "center", border: "2px solid #22C55E",
            }}>
              <div style={{ fontSize: 40, marginBottom: 12 }}>✅</div>
              <h3 style={{ fontSize: 22, fontWeight: 800, color: "#111", margin: "0 0 8px" }}>Message Sent!</h3>
              <p style={{ color: "#666", fontSize: 15 }}>We'll get back to you soon.</p>
            </div>
          ) : (
            <div style={{ background: "#F8F8F8", borderRadius: 20, padding: 36, border: "1px solid #ECECEC" }}>
              {[["name", "Name", "text", "Your name"], ["email", "Email", "email", "you@email.com"]].map(([k, l, t, p]) => (
                <div key={k} style={{ marginBottom: 18 }}>
                  <label style={{ display: "block", fontSize: 13, fontWeight: 600, color: "#444", marginBottom: 6 }}>{l}</label>
                  <input type={t} placeholder={p} value={form[k]} onChange={set(k)}
                    style={inputStyle}
                    onFocus={e => e.target.style.borderColor = "#EFB5BB"}
                    onBlur={e => e.target.style.borderColor = "#ECECEC"}
                  />
                </div>
              ))}
              <div style={{ marginBottom: 20 }}>
                <label style={{ display: "block", fontSize: 13, fontWeight: 600, color: "#444", marginBottom: 6 }}>Message</label>
                <textarea placeholder="How can we help?" value={form.message} onChange={set("message")}
                  style={{ ...inputStyle, minHeight: 120, resize: "vertical" }}
                  onFocus={e => e.target.style.borderColor = "#EFB5BB"}
                  onBlur={e => e.target.style.borderColor = "#ECECEC"}
                />
              </div>
              <button onClick={handleSubmit} style={{
                width: "100%", background: "#111", color: "#fff",
                border: "none", cursor: "pointer", padding: "14px",
                borderRadius: 12, fontSize: 15, fontWeight: 700,
              }}
                onMouseEnter={e => e.target.style.background = "#333"}
                onMouseLeave={e => e.target.style.background = "#111"}
              >Send Message →</button>
            </div>
          )}
        </FadeIn>
      </div>
    </section>
  );
}

// ── Footer ────────────────────────────────────────────────────────────────────
function Footer() {
  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

return (
    <footer style={{ background: "#111", color: "#fff", padding: "60px 24px 32px" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 40, marginBottom: 48 }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
              <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: "linear-gradient(135deg, #EFB5BB, #c0667a)",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontWeight: 900, fontSize: 14, color: "#fff",
              }}>V15</div>
              <span style={{ fontWeight: 700, fontSize: 17 }}>The V15 Company</span>
            </div>
            <p style={{ color: "#888", fontSize: 14, lineHeight: 1.6, maxWidth: 280 }}>
              Building Meaningful Creator Partnerships.
            </p>
            <a href="https://www.instagram.com/the_v15_company" target="_blank" rel="noreferrer" style={{
              display: "inline-flex", alignItems: "center", gap: 6, marginTop: 16,
              color: "#EFB5BB", textDecoration: "none", fontSize: 14, fontWeight: 600,
            }}>📸 @the_v15_company</a>
          </div>

<div style={{ display: "flex", gap: 48, flexWrap: "wrap" }}>
            <div>
              <div style={{ color: "#666", fontSize: 12, fontWeight: 700, letterSpacing: "1px", textTransform: "uppercase", marginBottom: 16 }}>Navigation</div>
              {["home", "for-brands", "for-creators", "services", "payment-terms", "faqs", "contact"].map(link => (
                <button key={link} onClick={() => scrollTo(link)} style={{
                  display: "block", background: "none", border: "none", cursor: "pointer",
                  color: "#888", fontSize: 14, marginBottom: 10, padding: 0, textAlign: "left",
                  transition: "color 0.2s",
                }}
                  onMouseEnter={e => e.target.style.color = "#fff"}
                  onMouseLeave={e => e.target.style.color = "#888"}
                >{{ "home": "Home", "for-brands": "For Brands", "for-creators": "For Creators", "services": "Services", "payment-terms": "Payment Terms", "faqs": "FAQs", "contact": "Contact" }[link]}</button>
              ))}
            </div>

<div>
              <div style={{ color: "#666", fontSize: 12, fontWeight: 700, letterSpacing: "1px", textTransform: "uppercase", marginBottom: 16 }}>Legal</div>
              {["Privacy Policy", "Terms & Conditions", "Creator Terms", "Brand Terms", "Payment Terms"].map(item => (
                <div key={item} style={{ color: "#888", fontSize: 14, marginBottom: 10, cursor: "pointer" }}>{item}</div>
              ))}
            </div>
          </div>
        </div>

<div style={{ borderTop: "1px solid #222", paddingTop: 24, display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
          <div style={{ color: "#555", fontSize: 13 }}>© 2025 The V15 Company. All rights reserved.</div>
          <div style={{ color: "#555", fontSize: 13 }}>Made with ❤️ for creators.</div>
        </div>
      </div>
    </footer>
  );
}

// ── App ───────────────────────────────────────────────────────────────────────
export default function App() {
  return (
    <div style={{ fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", background: "#fff", overflowX: "hidden" }}>
      <style>{`
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { margin: 0; }
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #f5f5f5; }
        ::-webkit-scrollbar-thumb { background: #EFB5BB; border-radius: 10px; }
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
      `}</style>

<Navbar />
      <Hero />
      <CreatorNetwork />
      <HowItWorks />
      <BrandForm />
      <CreatorForm />
      <Services />
      <Trust />
      <PaymentTerms />
      <SafetyNotice />
      <FAQ />
      <Contact />
      <Footer />
    </div>
  );
}

Connecting Brands With
Creators That Actually Convert.

Creators Across Multiple Niches

How It Works

Submit Your Campaign Requirement

Campaign Requirement Submitted!