// Portal — showcases the client & editor collaboration platform.
function PortalSection() {
  const { Container, Eyebrow, Icon } = window;
  const { Card, Button } = window.ZentroDesignSystem_967cea;

  const features = [
    { icon: "CheckCircle",    title: "Approve in one click",   body: "Review finished edits and approve them the moment they're ready — or request changes without writing long emails." },
    { icon: "ListChecks",     title: "Revision checklists",    body: "Turn feedback into clear, checkable items like “fix subtitle at 01:24” so nothing gets lost in translation." },
    { icon: "MessageSquare",  title: "Comment in context",     body: "Talk with your dedicated editor directly on each task. Every conversation stays attached to the work it's about." },
    { icon: "PlusCircle",     title: "Create tasks instantly", body: "Send a new brief in seconds. It lands with your dedicated editor automatically — no back-and-forth to get started." },
    { icon: "Bell",           title: "Real-time updates",      body: "Instant notifications in the portal and by email the moment your edit moves forward, gets a comment, or is ready for review." },
    { icon: "Activity",       title: "Full transparency",      body: "See status, deadlines, and a complete history of every task — so you always know exactly where your content stands." },
  ];

  return (
    <section id="portal" style={{ padding: "100px 0", borderTop: "1px solid var(--border-subtle)", position: "relative", overflow: "hidden", scrollMarginTop: 80 }}>
      {/* subtle glow */}
      <div style={{ position: "absolute", top: -160, right: -180, width: 600, height: 500, background: "radial-gradient(circle, rgba(251,208,40,0.07), transparent 65%)", pointerEvents: "none" }} />
      <Container>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 32, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 680 }}>
            <Eyebrow>The Zentro Portal</Eyebrow>
            <h2 style={{ marginTop: 20, fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "clamp(2.25rem, 4.5vw, 3.5rem)", lineHeight: 1.02, letterSpacing: "-0.03em", color: "var(--text-primary)", textWrap: "balance" }}>
              Your Projects.<br /><span style={{ color: "var(--gold-500)", fontStyle: "italic" }}>One Shared Workspace.</span>
            </h2>
            <p style={{ marginTop: 18, fontFamily: "var(--font-sans)", fontSize: 17, lineHeight: 1.7, color: "var(--text-secondary)", maxWidth: 560 }}>
              Every client gets access to our private portal — a dedicated workspace where you and your editor create tasks, communicate, approve edits, and track everything in real time. Better collaboration, better results.
            </p>
          </div>
          
        </div>

        <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }} className="z-services-grid">
          {features.map((f) => (
            <Card key={f.title} hover padding={28}>
              <span style={{ width: 48, height: 48, borderRadius: "var(--radius-md)", background: "rgba(251,208,40,0.12)", border: "1px solid rgba(251,208,40,0.3)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <Icon name={f.icon} size={22} color="var(--gold-400)" />
              </span>
              <h3 style={{ marginTop: 22, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 21, letterSpacing: "-0.02em", color: "var(--text-primary)" }}>{f.title}</h3>
              <p style={{ marginTop: 10, fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.6, color: "var(--text-secondary)" }}>{f.body}</p>
            </Card>
          ))}
        </div>

        <p style={{ marginTop: 36, fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-tertiary)" }}>
          Portal access is included with every partnership — for you and your team, at no extra cost.
        </p>
      </Container>
    </section>
  );
}
window.PortalSection = PortalSection;