import { ShieldCheck, ShieldOff } from 'lucide-react'

export function Problem() {
  return (
    <section className="pb-12 sm:pb-16 px-4 sm:px-6">
      <div className="mx-auto max-w-5xl">
        <div className="mb-12 sm:mb-16">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
            {/* Without Greywall */}
            <div className="flex flex-col">
              <div className="flex items-center gap-2 mb-3">
                <ShieldOff className="h-4 w-4 text-red-400/70" />
                <span className="text-xs font-sans uppercase tracking-wider text-red-400/70 font-medium">
                  Without Greywall
                </span>
              </div>
              <div className="code-block p-5 sm:p-6 flex-1">
                <div className="flex items-center gap-2 mb-5">
                  <div className="w-3 h-3 rounded-full bg-red-500/70" />
                  <div className="w-3 h-3 rounded-full bg-yellow-500/70" />
                  <div className="w-3 h-3 rounded-full bg-green-500/70" />
                  <span className="ml-2 text-xs font-mono text-muted-foreground">~/project</span>
                </div>
                <div className="space-y-3 font-mono text-[11px] sm:text-xs">
                  <div>
                    <span className="text-muted-foreground">$ </span>
                    <span className="text-greyhaven-offwhite">claude </span>
                    <span className="text-red-400/80">--dangerously-skip-permissions</span>
                  </div>

                  <div className="border-l-2 border-primary/40 pl-3">
                    <div className="text-primary font-semibold text-[11px] uppercase tracking-wider mb-1">You</div>
                    <div className="text-greyhaven-offwhite">add rate limiting to the API client</div>
                  </div>

                  <div className="border-l-2 border-muted-foreground/30 pl-3">
                    <div className="text-muted-foreground font-semibold text-[11px] uppercase tracking-wider mb-1">Agent</div>
                    <div className="text-muted-foreground italic">thinking...</div>
                  </div>

                  <div className="pl-4 space-y-1.5 text-muted-foreground/60">
                    <div><span className="text-muted-foreground/40">$ </span><span className="text-red-400/80">cat .env</span></div>
                    <div><span className="text-muted-foreground/40">$ </span><span className="text-red-400/80">curl -H &quot;Authorization: Bearer sk-prod-...&quot; https://api.stripe.com/v1/charges</span></div>
                  </div>

                  <div className="border-l-2 border-muted-foreground/30 pl-3">
                    <div className="text-muted-foreground font-semibold text-[11px] uppercase tracking-wider mb-1">Agent</div>
                    <div className="text-greyhaven-offwhite">Done! I read your .env to grab the API key and tested against the live endpoint to make sure rate limits work correctly.</div>
                  </div>

                  <div className="border-l-2 border-primary/40 pl-3">
                    <div className="text-primary font-semibold text-[11px] uppercase tracking-wider mb-1">You</div>
                    <div className="text-greyhaven-offwhite">WHAT ARE THESE CHARGES ON MY STRIPE??? (╯°□°)╯︵ ┻━┻</div>
                  </div>
                </div>
              </div>
              <p className="text-xs text-muted-foreground font-serif mt-3 leading-relaxed">
                The agent read your production Stripe key from .env and hit the live API to &quot;test&quot; its work. Helpful intent, real damage.
              </p>
            </div>

            {/* With Greywall */}
            <div className="flex flex-col">
              <div className="flex items-center gap-2 mb-3">
                <ShieldCheck className="h-4 w-4 text-primary" />
                <span className="text-xs font-sans uppercase tracking-wider text-primary font-medium">
                  With Greywall
                </span>
              </div>
              <div className="code-block p-5 sm:p-6 border-primary/20 flex-1">
                <div className="flex items-center gap-2 mb-5">
                  <div className="w-3 h-3 rounded-full bg-red-500/70" />
                  <div className="w-3 h-3 rounded-full bg-yellow-500/70" />
                  <div className="w-3 h-3 rounded-full bg-green-500/70" />
                  <span className="ml-2 text-xs font-mono text-muted-foreground">~/project</span>
                </div>
                <div className="space-y-3 font-mono text-[11px] sm:text-xs">
                  <div>
                    <span className="text-muted-foreground">$ </span>
                    <span className="text-primary">greywall --</span>
                    <span className="text-greyhaven-offwhite"> claude </span>
                    <span className="text-primary">--dangerously-skip-permissions</span>
                  </div>

                  <div className="border-l-2 border-primary/40 pl-3">
                    <div className="text-primary font-semibold text-[11px] uppercase tracking-wider mb-1">You</div>
                    <div className="text-greyhaven-offwhite">add rate limiting to the API client</div>
                  </div>

                  <div className="border-l-2 border-muted-foreground/30 pl-3">
                    <div className="text-muted-foreground font-semibold text-[11px] uppercase tracking-wider mb-1">Agent</div>
                    <div className="text-muted-foreground italic">thinking...</div>
                  </div>

                  <div className="pl-4 space-y-1.5">
                    <div><span className="text-muted-foreground/40">$ </span><span className="text-muted-foreground">cat .env</span></div>
                    <div className="text-red-400/80 pl-4">&larr; Operation not permitted</div>
                    <div><span className="text-muted-foreground/40">$ </span><span className="text-muted-foreground">curl -H &quot;Authorization: ...&quot; https://api.stripe.com/v1/charges</span></div>
                    <div className="text-red-400/80 pl-4">&larr; Connection denied by proxy</div>
                  </div>

                  <div className="border-l-2 border-muted-foreground/30 pl-3">
                    <div className="text-muted-foreground font-semibold text-[11px] uppercase tracking-wider mb-1">Agent</div>
                    <div className="text-greyhaven-offwhite">Added rate limiting. I couldn&apos;t access .env, so I used placeholder values in the tests.</div>
                  </div>

                  <div className="border-l-2 border-primary/40 pl-3">
                    <div className="text-primary font-semibold text-[11px] uppercase tracking-wider mb-1">You</div>
                    <div className="text-greyhaven-offwhite">👍 (•̀ᴗ•́) 👍</div>
                  </div>
                </div>
              </div>
              <p className="text-xs text-muted-foreground font-serif mt-3 leading-relaxed">
                Kernel-enforced. The agent adapts and does the job without accessing secrets or production systems.
              </p>
            </div>
          </div>
        </div>

        {/* Resolution: Verification creates trust */}
        <div className="text-center max-w-3xl mx-auto">
          <p className="font-serif text-xl sm:text-2xl md:text-3xl font-semibold tracking-tight leading-snug mb-6">
            Run in <span className="text-primary">YOLO mode</span> without risking anything outside your project.
          </p>
          <p className="text-muted-foreground font-serif text-base sm:text-lg leading-relaxed max-w-2xl mx-auto mb-4">
            The security layer around your tools should be independent of the company selling you the AI.
            Greywall gives you complete <span className="text-foreground font-medium">observability</span> into
            what your agent touches and full <span className="text-foreground font-medium">control</span> over what it can reach.
          </p>
          <blockquote className="font-serif text-lg sm:text-xl text-muted-foreground italic mb-10">
            <span className="text-primary">&ldquo;</span>The act of verification creates trust.<span className="text-primary">&rdquo;</span>
          </blockquote>
          <div className="mx-auto max-w-3xl rounded-lg border border-border/40 overflow-hidden">
            <div className="relative w-full" style={{ paddingBottom: '56.25%' }}>
              <iframe
                src="https://www.youtube.com/embed/u7YFVGGpPRI"
                title="Greywall Demo"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
                className="absolute inset-0 w-full h-full"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}